<template>
	<view class="shiftDetails">
		<view class="container">
			<custom-tabs type="c1" :value="value" @change="changeIndex">
				<custom-tab-pane label="工班信息" name="c1_1">
					<ul>
						<li>
							<p>船名：</p>
							<span>快乐号</span>
						</li>
						<li>
							<p>航次：</p>
							<span>JK97065578</span>
						</li>
						<li>
							<p>进出口：</p>
							<span>进口</span>
						</li>
						<li>
							<p>贸易类型：</p>
							<span>外贸</span>
						</li>
						<li>
							<p>装卸类型：</p>
							<span> 装货</span>
						</li>
					</ul>
					<ul>
						<li>
							<p>工班：</p>
							<span> 一工班</span>
						</li>
						<li>
							<p>作业时间：</p>
							<span> 2023/06/06 12:00 - 023/06/06 13:00</span>
						</li>
						<li>
							<p>车型：</p>
							<span>轿车</span>
						</li>
						<li>
							<p>数量：</p>
							<span>100</span>
						</li>
						<li class="wLi">
							<p>备注：</p>
							<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
								laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
								sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
								nascetur ridiculus mus. Nam</span>
						</li>
						<li>
							<p>车型：</p>
							<span>备件</span>
						</li>
						<li>
							<p>数量：</p>
							<span>100</span>
						</li>
						<li class="wLi">
							<p>备注：</p>
							<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
								laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
								sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
								nascetur ridiculus mus. Nam</span>
						</li>
					</ul>
					<ul>
						<li>
							<p>工班：</p>
							<span> 二工班</span>
						</li>
						<li>
							<p>作业时间：</p>
							<span> 2023/06/06 12:00 - 023/06/06 13:00</span>
						</li>
						<li>
							<p>车型：</p>
							<span>轿车</span>
						</li>
						<li>
							<p>数量：</p>
							<span>100</span>
						</li>
						<li class="wLi">
							<p>备注：</p>
							<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
								laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
								sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
								nascetur ridiculus mus. Nam</span>
						</li>
					</ul>
				</custom-tab-pane>
				<custom-tab-pane label="翻仓信息" name="c1_2">
					<view class="fcInfo" v-for="(item,index) in fcList" :key="index + 'fc'">
						<view class="fcBox">
							<p>翻舱类型：</p>
							<span>舱内翻</span>
						</view>
						<ul v-for="(item2,index2) in item.infoList" :key="index2 + 'info'">
							<li>
								<p>航次：</p>
								<span>JK97065578</span>
							</li>
							<li>
								<p>翻舱起点：</p>
								<span>D5H4</span>
							</li>
							<li>
								<p>翻舱终点：</p>
								<span>舱外</span>
							</li>
							<li>
								<p>作业时间：</p>
								<span>2023/06/06 12:00 - 023/06/06 13:00</span>
							</li>
							<li>
								<p>车型：</p>
								<span>轿车</span>
							</li>
							<li>
								<p>数量：</p>
								<span>100</span>
							</li>
							<li>
								<p>体积：</p>
								<span>30</span>
							</li>
							<li>
								<p>重量：</p>
								<span>50</span>
							</li>
						</ul>

					</view>
				</custom-tab-pane>
				<custom-tab-pane label="其他信息" name="c1_3">
					<view class="otherInfo">
						<p class="title">辅助作业</p>
						<ul>
							<li>
								<p>技术工人：</p>
								<span>10</span>
							</li>
							<li>
								<p>普通工人：</p>
								<span>30</span>
							</li>
							<li>
								<p>作业时间：</p>
								<span>2023/06/06 12:00 - 023/06/06 13:00</span>
							</li>
							<li>
								<p>重量：</p>
								<span>50</span>
							</li>
							<li>
								<p>体积：</p>
								<span>30</span>
							</li>
							<li class="wLi">
								<p>描述：</p>
								<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
									laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
									sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient
									montes,nascetur ridiculus mus. Nam</span>
							</li>
						</ul>
						<p class="title">待工作业</p>
						<ul>
							<li class="wLi">
								<p>描述：</p>
								<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
									laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
									sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient
									montes,nascetur ridiculus mus. Nam</span>
							</li>
						</ul>
						<p class="title">作业备注</p>
						<ul>
							<li class="wLi">
								<p>描述：</p>
								<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
									laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
									sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient
									montes,nascetur ridiculus mus. Nam</span>
							</li>
						</ul>

					</view>
				</custom-tab-pane>
			</custom-tabs>
			<view class="btnList">
				<van-button type="default" @click="cancel">取消</van-button>
				<van-button type="default">删除</van-button>
				<van-button type="info">编辑</van-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 2,
				fcList: [{
					infoList: [{}, {}]
				}, {
					infoList: [{}]
				}]
			}
		},
		methods: {
			changeIndex(e) {
				// console.log('选中:', e)
			},
			// 取消
			cancel() {
				uni.navigateTo({
					url: '/pages/shipWork/mixWork'
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.shiftDetails {
		.container {
			padding: 30px 20px;
			background-color: #fff;

			.fcInfo {
				padding-bottom: 20px;
				border-bottom: 1px solid #ccc;

				.fcBox {
					display: flex;
					padding: 10px 20px;
					line-height: 35px;
					font-size: 16px;
				}

				ul {
					border-bottom: 1px dashed #ccc;
				}

				ul:last-child {
					border: none;
				}
			}

			.otherInfo {
				.title {
					margin: 20px 0;
					font-size: 16px;
					font-weight: bold;
					padding-left: 10px;
					border-left: 5px solid #2979ff;
				}
			}

			ul {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				li {
					width: 45%;
					display: flex;
					padding: 10px 20px;
					line-height: 35px;
					font-size: 16px;

					p {
						min-width: 85px;
						text-align: right;
					}
				}

				.wLi {
					width: calc(100% - 150px);
				}
			}

			.btnList {
				display: flex;
				justify-content: center;
				margin-top: 20px;

				/deep/ .van-button {
					margin: 30px 20px;
					width: 120px;
					height: 50px;
				}
			}
		}
	}
</style>