<template>
	<view class="container">
		<uni-navbar title="完成运输"></uni-navbar>
		<view class="box">
			<!-- <view class="box2"> -->
			<view class="commonMb">
				<view class="small-box commonBj" v-for="(item,index) in list" :key="item.id">
					<view class="small-box-top">
						<view class="small-box-top-left" @click="goToDetial(item)">
							<image style="width: 51rpx;height: 51rpx;margin-left: 11rpx;"
								src="../../static/images/driverHome/sj_06.png" mode="widthFix">
							</image>
							<text>{{ item.transportName }}</text>
						</view>


						<!-- <u-button v-if="item.isInterrupt=='2'" @tap="submit(item)" class="miniButton miniButtonWidth2"
							shape="circle" color="linear-gradient(to right, #FF2D04, #FFA53E )">结束运输</u-button> -->
						<view v-if="item.isInterrupt!='2'" class="small-box-top-right state-class1">
							<text>待审批</text>
						</view>
						<!-- <u-button  v-else  class="miniButton miniButtonWidth1" shape="circle" color="linear-gradient(to right, #F59A02, #FFD334 )">待审核</u-button> -->
					</view>
					<view class="small-box-middle mt20">
						<view class="middle-left" @click="goToDetial(item)" >
							<view class="circle-green circle-style">
								起
							</view>
							<view class="small-box-middle-line-left">
							</view>
							<view class="circle-red circle-style">
								终
							</view>
						</view>
						<view class="middle-middle">
							<view class="position-start" @click="goToDetial(item)" >
								<view class="green bold size24 textStyle">{{item.startName}}</view>
							</view>
							<view class="position-end" @click="goToDetial(item)" >
								<text class="red bold size24 textStyle ">{{item.endName}}</text>
							</view>
							<u-button v-if="item.isInterrupt=='2'" @tap="submit(item)" class=" rightBox miniButton miniButtonWidth2"
								shape="circle" color="linear-gradient(to right, #FF2D04, #FFA53E )">结束运输</u-button>
						</view>
					</view>
					<view @click="goToDetial(item)" class="small-box-date">
						<image style="width: 24rpx;height: 24rpx;margin-left: 10rpx;"
							src="../../static/images/transport/rili.png" mode="widthFix">
						</image>
						<view class="ml19 font-size-style">
							时间：{{changeDate(item.startTime)}} — {{changeDate(item.endTime)}}
							<!-- 时间：{{changeDate(item.startDate)}} {{changeTime(item.applyStartTime)}} —
							{{changeDate(item.endDate)}} {{changeTime(item.applyEndTime)}} -->
						</view>
					</view>
					<!-- <view class="small-box-bottom mt23">
							<view class="small-box-bottom-left">
								<image style="width: 25rpx;height: 25rpx;margin-left: 10rpx;"
									src="../../static/images/transport/time.png" mode="widthFix"></image>
								<text class="ml19 font-size-style">
									时间：{{changeTime(item.applyStartTime)}} — {{changeTime(item.applyEndTime)}}
								</text>
							</view>
						</view> -->
					<view @click="goToDetial(item)" class="small-box-bottom mt23">
						<view class="small-box-bottom-left">
							<image style="width: 25rpx;height: 25rpx;margin-left: 10rpx;"
								src="../../static/images/transport/time.png" mode="widthFix"></image>
							<text class="ml19 font-size-style">车牌号：{{item.carNumber}} </text>
						</view>
						<view class="small-box-bottom-left">
							<image style="width: 25rpx;height: 25rpx;" src="../../static/images/record/duoren.png"
								mode="widthFix">
							</image>
							<text class="mr15 ml19 font-size-style">车辆司机：{{item.driverName}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- </view> -->
		</view>
		<u-popup :show="show" mode="center">
			<view class="model">
				<view class="modelTitle">上传车辆结束运输状态<view class="close" @click="show=false"></view>
				</view>
				<view class="topBox">
					<text style="margin-left: 41rpx;">异常情况</text>
					<view style="margin-right: 41rpx;" class="rightIcon">

					</view>
				</view>
				<view class="bottomBox">
					车辆因长时间停滞未结束最终运输，定位系
					统已自动执行结束运输
				</view>
				<view class="textBox colorStyle2">
					<u--form :model="form2" ref="uForm" :rules="rules" labelWidth="0">
						<u-form-item class="block-box1" prop="truckState">
							<view class="textBox">
								<view class="redCircle"></view>
								<text class="itemText">车辆状态(<text class="redText">拍摄结束运输时,车辆外观图片+视频</text>)</text>
							</view>
							<view class="textBox mt29 flex-start">
								<xfx-image-upload uploadType="1" :max="2" :chooseNum="2" v-model="imgList"
									@uploadSuccess="UploadSuccessStateImg" @uploadFail="errorTruckImg"
									@imgDelete="delTruckImg" mediaType="image" :action="urlConfig">
								</xfx-image-upload>
								<xfx-image-upload class="ml29" uploadType="2" :max="1" :chooseNum="1" v-model="carVideo"
									@uploadSuccess="UploadSuccessVideo" @uploadFail="errorTruckVideo"
									@imgDelete="delVideo" mediaType="video" :action="urlConfig">
								</xfx-image-upload>
							</view>

						</u-form-item>
					</u--form>
				</view>
				<u-button class="custom-style5 widthButton" shape="circle" @click="confirm()"
					color="linear-gradient(to top, #F59A02, #FFD334)">
					确 定
				</u-button>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		selectEndData,
		editProcess
	} from "../../api/company/transport.js"
	import config from '@/config.js'
	export default {
		data() {
			return {
				list: [],
				carVideo: [],
				imgList: [],
				imgListData: [],
				carVideoData: [],
				// 图片上传地址
				urlConfig: config.baseUrl + '/file/upload',
				queryParams: {
					userId: this.$store.state.user.userId,
				},
				form2: {
					truckState: null,
					id: null,
				},
				show: false,
				rules: {
					truckState: [{
						validator: (rule, value, callback) => {
							return this.carVideo.length !== 0 && this.imgList.length === 2
						},
						message: '请上传两张照片与一段视频'
					}, ],
				},
				id: null,
				total: 0
			}
		},
		methods: {
			// 车辆状态图片上传成功
			UploadSuccessStateImg(res) {
				var _res = JSON.parse(res.data);
				if (_res.code == 200) {
					// let obj = {}
					// obj.name = this.imgListName
					// obj.url = _res.data.url
					this.imgListData.push(_res.data);
					this.imgList.push(_res.data.url)
				}
			},
			// 车辆状态图片删除
			delTruckImg(del, tempFilePaths) {
				let obj = {}
				if (del.tempFilePaths.length !== 0) {
					obj.name = del.tempFilePaths[0].slice(50)
					obj.url = del.tempFilePaths[0]
				}
				this.imgList = del.tempFilePaths;
				this.imgListData = this.imgListData.filter(item => {
					return item.url === obj.url
				})

			},
			// 车辆图片上传失败的回调
			errorTruckImg(res) {},
			// 车辆视频上传成功Vedio
			UploadSuccessVideo(res, o) {
				var _res = JSON.parse(res.data);
				if (_res.code == 200) {

					this.carVideoData.push(_res.data);
					this.srcVideo = _res.data.url;
					this.carVideo = [{
						cover: o,
						url: this.srcVideo
					}]
				}
			},
			// 车辆视频删除回调
			delVideo(del, tempFilePaths) {
				this.carVideo = []
				this.carVideoData = []
				this.tempFilePath = '';
			},
			// 视频上传失败的回调
			errorTruckVideo(res) {},
			editProcess(data) {
				editProcess(data).then(res => {
					this.show = false;
					this.getList();
				})
			},
			confirm() {
				this.$refs.uForm.validate().then(res => {
					this.editProcess({
						id: this.form2.id,
						endVideo: this.carVideoData,
						endImg: this.imgListData
					})
				})
			},
			submit(item) {
				this.clearForm();
				this.form2.id = item.id;
				this.show = true;
			},
			clearForm() {
				this.carVideo = [];
				this.imgList = [];
				this.imgListData = [];
				this.carVideoData = [];
				this.form2 = {
					id: null,
					truckState: null,
				};
				this.tempFilePath = '';
			},

			// 跳转 
			// 通过和驳回跳转，待审核不跳
			goToDetial(item) {
				if (item.isInterrupt == '2') {
					this.$tab.navigateTo(`/pages/driverLookTransportDetail/index?id=${item.id}`)
				}
			},
			changeStateClass(state) {
				switch (state) {
					case 0:
						return 'state-class1'
					case -1:
						return 'state-class2'
					case 1:
						return 'state-class3'
				}
			},
			changeDate(date) {
				return date.substring(0, 4) + '/' + date.substring(5, 7) + '/' + date.substring(8, 10) + ' ' + date
					.substring(11, 16)
			},
			changeTime(time) {
				return time.slice(0, 5)
			},
			// 获取运输列表
			async getList() {
				const res = await selectEndData(this.queryParams)
				this.total = res.total
				this.list = res.rows
				console.log(this.list);
			}
		},
		onShow() {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.deepRed {
		color: #E54504
	}

	.deepGreen {
		color: #088243
	}

	.small-box {
		margin-bottom: 31rpx;
		padding: 22rpx;

		.small-box-top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.small-box-top-left {
				display: flex;
				align-items: center;

				uni-text {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					margin-left: 18rpx;
				}

			}

			.small-box-top-right {
				text-align: center;
				width: 103rpx;
				height: 45rpx;
				border-radius: 15rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 45rpx;
			}
		}

		.mt20 {
			margin-top: 20rpx;
		}

		.small-box-date {
			display: flex;
			align-items: center;
			margin-top: 24rpx;
		}

		.small-box-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.small-box-bottom-left {
				display: flex;
				align-items: center;
			}
		}
	}


	.ml19 {
		margin-left: 10rpx;
	}

	.mt23 {
		margin-top: 23rpx;
	}

	.mr15 {
		margin-right: 15rpx;
	}

	.font-size-style {
		font-size: 24rpx;
		font-weight: 400;
		color: #485B93;
	}

	.state-class1 {
		background: linear-gradient(90deg, #F59A02 0%, #FFD334 100%);
	}

	.state-class2 {

		background: linear-gradient(90deg, #FF2D04 0%, #FFA53E 100%);
	}

	.state-class3 {

		background: linear-gradient(90deg, #3FC377 0%, #83D992 100%);
	}

	.custom-style5 {
		// box-shadow: 0px 2rpx 13rpx 0rpx rgba(27, 43, 95, 0.25);
		// border-radius: 28rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin: 27rpx 0 36rpx;
		height: 65rpx;
	}

	.miniButton {
		height: 45rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-right: 0;
		padding: 0;
	}

	.miniButtonWidth2 {
		width: 140rpx;
	}

	// 弹框样式
	/deep/ .u-popup__content {
		background-color: rgba(0, 0, 0, 0);
	}

	.model {
		width: 683rpx;
		// height: 441rpx;
		background: rgba(255, 255, 255, 0.64);
		border: 2rpx solid #77A8FF;
		box-shadow: 0px 0px 24rpx 6rpx rgba(109, 160, 251, 0.6);
		border-radius: 34rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.modelTitle {
		width: 683rpx;
		height: 80rpx;
		background: #7FB5FF;
		border-radius: 28rpx 28rpx 0px 0px;
		font-size: 28rpx;
		line-height: 80rpx;
		font-weight: bold;
		text-align: center;
		color: #FFFFFF;
		position: relative;
	}

	.close {
		width: 30rpx;
		height: 30rpx;
		// border: 1px salmon solid;
		position: absolute;
		right: 25rpx;
		top: 50%;
		transform: translateY(-50%);
		background-image: url('@/static/images/close.png');
		background-size: 100% 100%;
	}

	.widthButton {
		width: 150rpx;
		margin-bottom: 53rpx;
	}

	/deep/ .block-box1 .u-form-item__body__right__content__slot {
		display: block;
	}

	/deep/ .block-box1 .u-form-item__body {
		display: block;

		.u-form-item__body__right {
			// margin-top: 29rpx;

			.u-form-item__body__right__content__slot {
				align-items: start;

				.u-upload {
					display: block;
					flex: 0;
					// margin-right: 8rpx;

					.u-upload__wrap {
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: space-between;
						// width: 400rpx;

						.u-upload__wrap__preview {
							border-radius: 15rpx;
							overflow: visible;
							margin: 0 52rpx 0 0;

							&:nth-child(2) {
								margin-right: 26rpx !important;
							}

							.u-upload__wrap__preview__image {
								// border-radius: 15rpx !important;
								width: 167rpx !important;
								height: 167rpx !important;
								// border: 2rpx solid #495B93;

							}
						}

						.u-upload__button {
							background: rgba(255, 255, 255, 0.1);
							border: 1px solid #495B93;
							border-radius: 15px;
						}
					}
				}
			}
		}
	}

	// 车辆状态上传图片
	.flex-start {
		justify-content: start;

		/deep/.xfx-image-upload-list {
			// border: 2rpx solid #495B93;
			// border-radius: 15rpx;
			// // width: 160rpx;
			// height: 160rpx;

			.xfx-image-upload-Item {
				width: 180rpx;
				height: 180rpx;
				margin-right: 0;
				margin-bottom: 0;
				border: 2rpx solid #495B93;
				border-radius: 15rpx;
				// background-color: rgba(255, 255, 255, 0.1);

				&:not(:first-child) {
					margin-left: 20rpx;
				}

				&:nth-child(1) {
					background-color: rgba(255, 255, 255, 0.1);
				}
			}

			.xfx-image-upload-Item-add {
				padding-top: 36rpx;

				.text-upload {
					margin-top: 0;
				}
			}
		}
	}

	.textBox {
		display: flex;
		align-items: center;
		margin-left: 10px;
		width: 100%;
	}

	.mt29 {
		margin-top: 29rpx;
	}

	.ml29 {
		margin-left: 20rpx;
	}

	.topBox {
		width: 599rpx;
		height: 78rpx;
		background: linear-gradient(0deg, #FF2D04 0%, #FF7D1D 100%);
		border-radius: 28rpx 28rpx 0px 0px;
		margin-top: 33rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.bottomBox {
		width: 517rpx;
		background: rgba(255, 255, 255, 0.4);
		border: 2rpx solid #FB5637;
		border-radius: 0px 0px 28rpx 28rpx;
		padding: 36rpx 41rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #FB5637;
	}

	.rightIcon {
		height: 48rpx;
		width: 48rpx;
		// border: #F59A02 solid 1px;
		background: url('../../static/images/transport/3.png') no-repeat;
		background-size: 100% 100%;
	}
	.rightBox{
		position: absolute;
		right: 20rpx;
		top:49%;
		transform: translateY(-50%);
	}
	.textStyle{
		width: 360rpx;
	}
	//处理当前组件弹框
	/deep/ .boxUplod .u-transition .u-popup__content {
		// position: fixed;
		// display: flex;
		// bottom: 0px;
		// left: 0px;
		// right: 0px;
		// top: auto;
		background: rgba(255, 255, 255, 0.7);
	}
</style>
