<template>
	<view class="details">
		<head-view :title="title"></head-view>
		<view class="container">
			<view class="topBox">
				<view class="topImg">
					<image src="../../static/images/theme/logo.png"></image>
					<view class="rightTitle">
						<text>上海海通国际汽车码头有限公司</text>
						<text>SHANGHAI HAITONG INTERNATIONAL AUTOMOTIVE TERMINAL CO.</text>
					</view>
				</view>
				<p class="title">装卸货物交接计数单</p>
				<p class="bh">编号/N0:<text>QR-7.5.1-01-05-M</text></p>
				<view class="infoList">
					<view class="li">
						<p class="liTitle">船名：</p>
						<text>{{shipInfo.spmName}}</text>
					</view>
					<view class="li">
						<p class="liTitle">航次：</p>
						<text>{{shipInfo.vvyName}}</text>
					</view>
					<view class="li">
						<p class="liTitle">进出口：</p>
						<text>{{shipInfo.importExportFlagName}}</text>
					</view>
					<view class="li">
						<p class="liTitle">贸易类型：</p>
						<text>{{shipInfo.tradeType}}</text>
					</view>
					<view class="li">
						<p class="liTitle">完工时间：</p>
						<text>{{shipInfo.actualFinishTime}}</text>
					</view>
					<view class="li">
						<p class="liTitle">工班：</p>
						<text>{{shipInfo.gb}}</text>
					</view>
				</view>
			</view>
			<view class="listBox">
				<view class="listTitle">
					<image src="../../static/images/goodsImg2.png" mode=""></image>
					<p>货物明细</p>
					<view class="total">
						<text>总计：</text>
						<text>车辆数：{{totalObj.carAmount}}</text>
						<text>备件数：{{totalObj.partAmount}}</text>
					</view>
				</view>
				<view class="table">
					<view class="tableTop">
						<view class="tableHead" v-for="(item,index) in tableHead" :key="index">
							<p>{{item}}</p>
						</view>
					</view>
					<view class="tableInfo" v-for="(item,index) in tableData" :key="index">
						<view class="li">
							{{item.mnfBl}}
						</view>
						<view class="li">
							{{item.mnfMk}}
						</view>
						<view class="li">
							{{item.brdName}}
						</view>
						<view class="li">
							{{item.carAmount}}
						</view>
						<view class="li">
							{{item.partAmount}}
						</view>
						<view class="li" @click="toDetails(item)">
							详情
						</view>
					</view>
				</view>
			</view>
			<view class="signBox">
				<view class="signContent">
					<view class="signTitle">
						<p>堆场员签名:</p>
						<p>Yard staff:</p>
					</view>
					<view class="signInfo" v-if="shipInfo.yardSignUrl == null" @click="toSign('0')">
						去签名
					</view>
					<view class="signImg" v-else>
						<image :src="yardSignUrl" mode=""></image>
					</view>
				</view>
				<view class="row"></view>
				<view class="signContent" v-if="shipInfo.tradeType == '外贸'">
					<view class="signTitle">
						<p>理货员签名:</p>
						<p>tally clerk:</p>
					</view>
					<view class="signInfo" v-if="shipInfo.tallySignUrl == null" @click="toSign('1')">
						去签名
					</view>
					<view class="signImg" v-else>
						<image :src="tallySignUrl" mode=""></image>
					</view>
				</view>
				<view class="signContent" v-else>
					<view class="signTitle">
						<p>船方:</p>
						<p>the ship:</p>
					</view>
					<view class="signInfo" v-if="shipInfo.shipSignUrl == null" @click="toSign('2')">
						去签名
					</view>
					<view class="signImg" v-else>
						<image :src="shipSignUrl" mode=""></image>
					</view>
				</view>
			</view>
			<uni-popup ref="popup" background-color="#fff">
				<view class="table rowTable">
					<view class="popupTitle">残损具体情况</view>
					<view class="tableContent">
						<view class="tableTop">
							<view class="tableHead" v-for="(item,index) in rowTableHead" :key="index">
								<p>{{item}}</p>
							</view>
						</view>
						<view class="tableInfo" v-for="(item,index) in rowTableData" :key="index">
							<view class="li">
								{{index + 1}}
							</view>
							<view class="li">
								{{item.vinCode}}
							</view>
							<view class="li">
								{{item.qdLinkName}}
							</view>
							<view class="li">
								{{item.disposalSituationName}}
							</view>
						</view>

					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import HeadView from '@/components/head-view/head-view.vue';
	export default {
		data() {
			return {
				loginObj: {},
				portObj: {},
				title: "",
				shipInfo: {},
				totalObj: {},
				tableHead: ["提单号", "唛头", "品牌", "车辆数", "备件数", "原残具体情况"],
				tableData: [],
				rowTableHead: ["序号", "车架号", "质损发生环节", "损伤情况"],
				rowTableData: [],
				// 堆场员签名
				yardSignUrl: "",
				// 理货员签名
				tallySignUrl: "",
				// 船方签名
				shipSignUrl: "",

				vvyId: "",
			}
		},
		onLoad(options) {
			if ('params' in options) {
				this.vvyId = JSON.parse(decodeURIComponent(options.params)).vvyId
				this.loginObj = uni.getStorageSync('loginObj')
				this.portObj = uni.getStorageSync('portObj')
				this.initData()
			}
		},
		
		methods: {
			// 获取当前航次的船信息
			initData() {
				uni.request({
					url: `${this.$local}/shp/iEDeliverySlipController/page?vvyId=${this.vvyId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						console.log(res)
						if (res.statusCode == 200) {
							this.shipInfo = res.data.data.records[0]
							this.title = `船名：${this.shipInfo.spmName} / 航次：${this.shipInfo.vvyName} 装卸货物交接计数单`
							this.getInfo()
							this.getSgin()
						}
					}
				})
			},
			// 获取数据
			getInfo() {
				uni.request({
					url: `${this.$local}/shp/iEDeliverySlipController/planPage?vvyId=${this.shipInfo.vvyId}&importExportFlag=${this.shipInfo.importExportFlag}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
						if(res.data.data.plan.records) this.tableData = res.data.data.plan.records
						if(res.data.data.count)	this.totalObj = res.data.data.count
						}
					}
				})
			},
			// 获取当前行的数据
			toDetails(item) {
				this.$refs.popup.open('center')
				let obj = {
					splId: item.splId,
					importExportFlag: this.shipInfo.importExportFlag
				}
				uni.request({
					url: `${this.$local}/shp/iEDeliverySlipController/iEDeliverySlipPlanDamage`,
					data: obj,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'POST', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
							this.rowTableData = res.data.data
						}
					}
				})
			},
			// 获取堆场员，理货员，船方签名
			getSgin() {
				let arr = [{
					type: 0,
					url: this.shipInfo.yardSignUrl,
				}, {
					type: 1,
					url: this.shipInfo.tallySignUrl,
				}, {
					type: 2,
					url: this.shipInfo.shipSignUrl
				}]
				arr.forEach(v => {
					if (v != null) {
						this.initImg(v)
					}
				})
			},
			// 调用获取图片接口
			initImg(v) {
				uni.request({
					url: `${this.$local}/api/file/url/?fileName=${v.url}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
							if (v.type == 0) {
								this.yardSignUrl = res.data
							} else if (v.type == 1) {
								this.tallySignUrl = res.data
							} else {
								this.shipSignUrl = res.data
							}
						}
					}
				})
			},
			// 点击签字
			toSign(type) {
				this.shipInfo['type'] = type
				const params = encodeURIComponent(JSON.stringify(this.shipInfo));
				uni.reLaunch({
					url: '/pages/receipt/sign?params=' + params
				})
			},
		},
	}
</script>

<style lang="less" scoped>
	.details {
		background-color: #F6F7F9;

		.container {
			padding: 16px;
			margin-top: 68px;

			.topBox {
				background: #FFFFFF;
				border-radius: 8px;
				padding: 16px 24px;
				margin-bottom: 16px;

				.topImg {
					padding: 16px 0;
					border-bottom: 1px solid #999;
					display: flex;
					justify-content: space-between;

					image {
						width: 270px;
						height: 50px;
					}

					.rightTitle {
						text-align: right;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						text:first-child {
							font-size: 22px;
							color: #0052A4;
							font-weight: bold;
						}

						text:last-child {
							font-size: 14px;
							color: #666666;
						}
					}
				}

				.title {
					text-align: center;
					margin-top: 24px;
					font-size: 24px;
					color: #23262E;
					font-weight: bold;
				}

				.bh {
					margin-top: 20px;
					text-align: right;
					font-size: 14px;
					color: #666666;
					padding-bottom: 16.5px;
					border-bottom: 1px solid #eee;

					text {
						font-size: 18px;
						color: #0052A4;
						font-weight: bold;
					}
				}

				.infoList {
					display: flex;
					justify-content: space-around;
					flex-wrap: wrap;
					font-size: 14px;
					color: #23262E;
					margin-top: 16px;
					padding: 0 60px;

					.li {
						display: flex;
						width: 33%;
						margin-bottom: 6px;
						text-align: center;

						.liTitle {
							width: 100px;
							text-align: right;
						}

						text {
							font-weight: bold;
						}
					}
				}
			}

			.listBox {
				padding: 24px 18px;
				margin-bottom: 70px;
				background-color: #FFFFFF;

				.listTitle {
					display: flex;
					margin-bottom: 25px;

					image {
						width: 24px;
						height: 24px;
						margin-top: 6px;
					}

					p {
						font-size: 18px;
						color: #23262E;
						font-weight: bold;
						margin-left: 14px;
						display: flex;
						flex-direction: column;
						justify-content: center;
					}

					.total {
						padding: 7.5px 16px;
						background: #FFF8F4;
						font-size: 16px;
						color: #FF6400;
						margin-left: 16px;

						text:first-child {
							font-weight: bold;
						}

						text:last-child {
							margin-left: 32px;
						}
					}
				}
			}

			.signBox {
				width: 100%;
				height: 66px;
				background: #FFFFFF;
				border: 1px solid #E1E5ED;
				box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.05);
				position: fixed;
				bottom: 0;
				left: 0;
				display: flex;
				justify-content: flex-end;
				padding: 0 70px;

				.row {
					width: 1px;
					height: 30px;
					background-color: #ccc;
					margin-top: 18px;
				}

				.signContent {
					display: flex;
					margin: 0 54px;

					.signTitle {
						display: flex;
						flex-direction: column;
						justify-content: center;
						text-align: right;
					}

					.signInfo {
						display: flex;
						flex-direction: column;
						justify-content: center;
						font-size: 18px;
						color: #0052A4;
						margin-left: 16px;
					}

					.signImg {
						width: 100px;
						height: 54px;
						margin-top: 5px;
						margin-left: 10px;
					}
				}

				.signContent:last-child {
					margin-right: 0;
				}
			}

			.table {
				.popupTitle {
					width: 100%;
					height: 60px;
					line-height: 60px;
					font-size: 18px;
					font-weight: bold;
					border-bottom: 1px solid #999;
					text-align: center;
				}

				.tableContent {
					padding: 16px;
				}

				.tableTop {
					display: flex;
					background: #F4F4F4;
					padding: 8px 16px;

					.tableHead {
						flex: 1;

						p {
							font-size: 15px;
							color: #0B266A;
							padding-left: 9px;
							height: 20px;
							border-left: 1px solid #0B266A;
						}
					}
				}

				.tableInfo {
					display: flex;
					background: #fff;
					padding: 8px 16px;
					border-bottom: 1px solid #E9ECF1;

					.li {
						flex: 1;
						padding-left: 9px;
					}

					.li:last-child {
						color: #0067CF;
					}
				}

				.tableInfo:nth-of-type(2n) {
					background: #fff;
				}

				.tableInfo:nth-of-type(2n-1) {
					background: #FAFAFA;
				}
			}

			.rowTable {
				width: 600px;
				height: 400px;
				overflow: scroll;
			}
		}
	}
</style>