<template>
	<view class="truck-stop-check-detail">
		<view class="truck-stop-check-detail-header">
			<view class="flex_sb" style="margin: 0 24rpx;">
				<view class="">
					车牌号码:{{truckNo}}
				</view>
				<view class="">
					司机姓名:{{driverName}}
				</view>
			</view>
			<u-line margin="39rpx 0"></u-line>
			<view class="" style="margin: 0 24rpx;">

				<bs-customCell label="检查项目名" :value="checkItemName" labelCol="3" wrapCol="8">
				</bs-customCell>
			</view>
		</view>
		<view class="" style="height: 128rpx; background-color: #FAFAFA; padding-top: 46rpx; padding-bottom: 34rpx;">
			<u-tabs @change="tabChange" :list="tabList" lineWidth="30" lineColor="#2E75E6" :activeStyle="{
			            color: '#2E75E6',
			            fontWeight: 'bold',
			        }" :inactiveStyle="{
			            color: '#8C8C8C',
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
		</view>
		<view class="truck-stop-check-detail-content">
			<stopCheckItem v-for="(item,index) in checkItemList" v-show="currentTab === item.classifyLabel"
				ref="stopCheckItem" :key="index" :serialNumber="serialNumber(item.id)" :stopCheckInfo="item"
				:bottomLine="index<(checkItemList.length-1)" @openPopup="openPopup" :popUp="openPopId === item.id">
			</stopCheckItem>
		</view>
		<view class="operation-btn flex_sb">
			<button class="backBtn common_btn" @click="back">返回</button>
			<button class="submitBtn common_btn" @click="onSubmit">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		GetTruckCheckItemList,
		SubmitTruckCheckItemResult
	} from '../../api/apiList'
	export default {
		data() {
			return {
				tabList: [],
				checkItemId: '',
				driverName: '',
				checkItemName: '',
				truckNo: '',
				checkItemList: [],
				driverId: '',
				truckId: '',
				shipmentId: '',
				address: '',
				currentTab: "",
				openPopId: ''
			};
		},
		onLoad(option) {
			const {
				data
			} = option
			const {
				checkItemId,
				driverName,
				truckNo,
				checkItemName,
				driverId,
				truckId,
				shipmentId,
				address
			} = JSON.parse(data)
			this.address = address
			this.shipmentId = shipmentId
			this.driverId = driverId
			this.truckId = truckId
			this.checkItemId = checkItemId
			this.driverName = driverName
			this.truckNo = truckNo
			this.checkItemName = checkItemName
			this.getTruckCheckItemList()
		},
		methods: {
			cancelPopup(){
				this.openPopId = ''
			},
			openPopup(id){
				this.openPopId = id
				setTimeout(()=>{
					this.cancelPopup()
				}, 3000)
			},
			getTruckCheckItemList() {
				this.checkItemList = []
				this.tabList = []
				const checkLabel = []
				GetTruckCheckItemList({
					"args": {
						"pageNum": 0,
						"pageSize": 100,
						"restrictions": [{
							"field": "owner.id",
							"type": "EQ",
							"value": this.checkItemId
						}],
					}

				}).then(res => {
					res.data.data.datas.map((item, index) => {
						if (!checkLabel.includes(item.classifyLabel)) {
							checkLabel.push(item.classifyLabel)
							this.tabList.push({
								name: item.classifyLabel,
							})
						}
						if (index === 0) {
							this.currentTab = item.classifyLabel
						}
					})
					this.checkItemList = res.data.data.datas
				})
			},
			back() {
				uni.navigateBack()
			},
			onSubmit() {
				const checkResult = []
				this.$refs.stopCheckItem.map(stopCheckItem => {
					checkResult.push(stopCheckItem.getCheckResult())
				})
				Promise.all(checkResult).then(checkResult => {
					console.log(checkResult)
					if(checkResult.includes('uploadImageError')) return
					this.submitTruckCheckItemResult(checkResult)
				})
			},
			submitTruckCheckItemResult(checkResult) {
				SubmitTruckCheckItemResult({
					"aux": {
						"shipmentId": this.shipmentId,
						"driverId": this.driverId,
						"truckId": this.truckId,
						"checkTime": new Date(),
						"address": this.address,
						"personId": "",
						"remarks": "",
						"checkItemId": this.checkItemId,
						"repair": true,
						"rectify": false,
						"lines": checkResult,
					}
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: "点检完成",
						duration: 2500,
						success() {
							uni.navigateBack({
								delta: 2
							});
						}
					})

				})
			},
			tabChange(tabItem) {
				this.currentTab = tabItem.name
			},
			serialNumber(id) {
				return this.checkItemList.filter(item => item.classifyLabel === this.currentTab).findIndex(val => val
					.id === id) + 1
			}

		},

	}
</script>

<style lang="scss">
	.truck-stop-check-detail {
		&-header {
			background-color: #FFFFFF;
			padding: 40rpx 0rpx;

			.custom-cell-row {
				margin: 0;
			}
		}

		&-content {
			padding: 40rpx 24rpx;
			background-color: #FFFFFF;
		}

		.operation-btn {
			position: sticky;
			bottom: 0rpx;
			height: auto;
			background-color: #FFFFFF;
			padding: 24rpx 0;
			z-index: 98;
			margin-bottom: 0;

			&:after {
				content: "";
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background: inherit;
				filter: blur(12rpx);
				z-index: 99;
			}

			.common_btn {
				margin-top: 0;
				z-index: 100;
			}
		}
	}
</style>
