<template>
	<view class="container">
		<uni-navbar title="记录审批"></uni-navbar>
		<view class="box commonMt" style="overflow: hidden;">
			<view class="topMap">
				<mapPreview :pathDataId='pathData' :startPoint='form.startPoint' :endPoint='form.endPoint'
					v-show="isMap" :mtRoutePointList='form.mtRoutePointList'></mapPreview>
			</view>
			<view class="box3">
				<view class="commonMb commonMt">
					<view class="addLineSuccess-big-box commonBj">
						<view class="addLineSuccess-big-box-top">
							<image style="width: 45rpx;height: 45rpx; margin-left: 30rpx;"
								src="../../static/images/transport/dingwei.png" mode="widthFix">
							</image>
							<text class="listTitle">记录信息</text>
						</view>
						<view class="addLineSuccess-big-box-bottom">
							<view class="addLineSuccess-big-box-bottom-item">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text class="itemText">运&ensp;&nbsp;输&ensp;名&ensp;&nbsp;称:</text>
								</view>
								<view class="flexAlignCenter">
									<text class="infoText">{{form.transportName}}</text>
								</view>
							</view>
							<!-- <view class="map">
								<mapImg :startPoint='form.startPoint' :endPoint='form.endPoint'
									:mtRoutePointList='form.mtRoutePointList'>
								</mapImg>
							</view> -->
							<view class="addLineSuccess-big-box-bottom-item ">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text class="itemText">运输开始时间:</text>
								</view>
								<view class="flexAlignCenter">
									<text class="infoText">{{form.startTime}}</text>
								</view>
							</view>
							<!-- <view class="border-style"></view> -->
							<view class="addLineSuccess-big-box-bottom-item ">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text class="itemText">运输结束时间:</text>
								</view>
								<view class="flexAlignCenter">
									<text class="infoText">{{form.endTime}}</text>
								</view>
							</view>
							<!-- <view class="border-style"></view> -->
							<view class="addLineSuccess-big-box-bottom-item">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text class="itemText">车&emsp;&ensp;牌&emsp;&ensp;号:</text>
								</view>
								<view class="flexAlignCenter">
									<text class="infoText">{{form.carNumber}}</text>
								</view>
							</view>
							<view class="addLineSuccess-big-box-bottom-item">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text class="itemText">车&ensp;&nbsp;辆&ensp;司&ensp;&nbsp;机:</text>
								</view>
								<view class="flexAlignCenter">
									<text class="infoText">{{form.driverName}}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 车辆状态 -->
					<view class="addLineSuccess-big-box mt33 commonBj">
						<view class="addLineSuccess-big-box-top">
							<image style="width: 45rpx;height: 45rpx; margin-left: 30rpx;"
								src="../../static/images/car/yunshu.png" mode="widthFix">
							</image>
							<text class="listTitle">车辆状态</text>
						</view>
						<view class="addLineSuccess-big-box-bottom">
							<view class="addLineSuccess-big-box-bottom-item block">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text class="itemText">开始车辆状态:</text>
								</view>
								<view class="space-between state-icon-right mt30">
									<view class="state-box-size border radius15">
										<!-- <video controls object-fit="fill" @play="playvideo" @fullscreenchange="fullscreenchange"
										class="state-box-size border radius15" id="truckVideo" ref="truckVideo"
										src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/360e4b20-4f4b-11eb-8a36-ebb87efcf8c0.mp4"></video> -->
										<xfx-image-upload :remove="false" :add="false" v-model="startStateVideo"
											mediaType="video"></xfx-image-upload>
									</view>
									<u--image class=" border radius15" radius="15rpx" :key="index"
										v-for="(item,index) in startImgList" :showLoading="true" :src="item"
										width="180rpx" height="180rpx" @tap="previewStartImg(index)">
									</u--image>
								</view>
								<view class="flexAlignCenter mt33" v-if="form.isInterrupt===0">
									<view class="greenCircle">
									</view>
									<text class="itemText">结束车辆状态：</text>
								</view>
								<view class="space-between state-icon-right mt30" v-if="form.isInterrupt===0">
									<view class=" state-box-size border radius15">
										<!-- <video controls object-fit="fill" @play="playvideo" @fullscreenchange="fullscreenchange"
										class="state-box-size border radius15" id="truckVideo" ref="truckVideo"
										src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/360e4b20-4f4b-11eb-8a36-ebb87efcf8c0.mp4"></video> -->
										<xfx-image-upload :remove="false" :add="false" v-model="endStateVideo"
											mediaType="video"></xfx-image-upload>
									</view>
									<u--image class=" border radius15" radius="15rpx" :key="index"
										v-for="(item,index) in endImgList" :showLoading="true" :src="item"
										width="180rpx" height="180rpx" @tap="previewEndImg(index)">
									</u--image>
								</view>
							</view>
						</view>
					</view>
					<view class="mt33" style="margin-bottom: 100rpx;">
						<!-- 通过 -->
						<!-- <view v-if="!form.isInterrupt">
							<view class="addLineSuccess-big-box  commonGreenBj">
								<view class="addLineSuccess-big-box-top bg-color-green">
									<image style="width: 45rpx; height: 45rpx;margin-left: 30rpx;"
										src="../../static/images/record/yichang.png" mode="widthFix">
									</image>
									<text class="listTitle">审批状态</text>
								</view>
								<view class="addLineSuccess-big-box-bottom">
									<view class="addLineSuccess-big-box-bottom-item">
										<view class="flexAlignCenter">
											<view class="greenCircle">
											</view>
											<text class="itemText">审批状态:</text>
										</view>
										<view class="flexAlignCenter">
											<u-icon color="#017D3E" name="checkmark-circle-fill"
												style="margin-right: 12rpx;">
											</u-icon>
											<text class="greenText">通过</text>
										</view>
									</view>
								</view>
							</view>
						</view> -->
						<!-- 驳回 -->
						<view v-if="form.isInterrupt">
							<!-- 异常脱离原因 -->
							<view class="addLineSuccess-big-box commonRedBj">
								<view class="addLineSuccess-big-box-top bg-color-red">
									<image style="width: 45rpx; height: 45rpx;margin-left: 30rpx;"
										src="../../static/images/record/yichang.png" mode="widthFix">
									</image>
									<text class="listTitle">异常情况</text>
								</view>
								<view class="addLineSuccess-big-box-bottom">
									<view class="addLineSuccess-big-box-bottom-item">
										<view class="flexAlignCenter">
											<view class="redCircle mCircle">
											</view>
											<text class="itemText">异常情况:</text>
										</view>
										<view class="flexAlignCenter">
											<text class="redText">{{isInterruptContent}}</text>
										</view>
									</view>
									<view class="addLineSuccess-big-box-bottom-item" v-if="form.breakReason">
										<view class="flexAlignCenter">
											<view class="redCircle mCircle">
											</view>
											<text class="itemText">脱离原因:</text>
										</view>
										<view class="flexAlignCenter">
											<text class="redText">{{form.breakReason}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="reject-box mt28 commonMb commonBj">
							<view class="reject-box-top just-content-start">
								<image src="../../static/images/car/yunshu.png" mode="widthFix"></image>
								<text class="listTitle">记录查看</text>
							</view>
							<view class="reject-box-bottom pb0">
								<view class="state-icon">
									<view class="flexAlignCenter center">
										<view class="redCircle">
										</view>
										<text class="itemText mr46">记录查看:</text>
										<view class="normal" :class="auditType===1?'success':''" @tap="changeClass">
											<image style="width: 33rpx;height: 33rpx;margin-right: 12rpx;"
												src="../../static/images/cityCar/state2.png" mode="widthFix"></image>
											<text>合规</text>
										</view>
										<view class="normal ml37" :class="auditType===-1?'fail':''" @tap="changeClass">
											<image style="width: 33rpx;height: 33rpx;margin-right: 12rpx;"
												src="../../static/images/cityCar/state1.png" mode="widthFix"></image>
											<text>不合规</text>
										</view>
									</view>
								</view>
								<!-- <view :class="isPass?'border-style mb':'border-style2'"></view> -->
								<view class="state-icon">
									<view class="flexAlignCenter center">
										<view class="redCircle">
										</view>
										<text class="itemText">反馈建议:</text>
									</view>
								</view>
								<u--textarea confirmType="done" class="textareaStyle" height="198rpx" maxlength="500"
									v-model="auditContent" placeholder="请输入反馈建议">
								</u--textarea>
								<!-- <view v-if="!isPass" class="border-style2 mb"></view> -->
							</view>
						</view>
						<u-button @click="submit" class="custom-style mt33 commonMb" shape="circle"
							color="linear-gradient(to top, #F59A02, #FFD334)">确认审批</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		recordDetail,
		recordCheck,
		errorState
	} from "@/api/city/record.js"
	export default {
		// dicts: ['transport_error_state'],
		data() {
			return {
				// 驳回原因
				auditContent: null,

				//通过或者驳回
				// 结束状态的视频
				endStateVideo: [],
				// 开始状态的视频
				startStateVideo: [],
				form: {
					startPoint: '',
					endPoint: '',
					mtRoutePointList: [],
				},
				// 通过样式开关
				auditType: 1,
				xqForm: {},
				endImgList: [],
				startImgList: [],
				startSrcVideo: '',
				endSrcVideo: '',
				auditState: null,
				isInterruptContentObj: {},
				isInterruptContent: null,
				pathData: '',
				isMap: true,
			}
		},
		methods: {
			// 字典翻译
			translate(obj) {
				for (let key in obj) {
					console.log(key);
					if (this.form.isInterrupt == key) {
						this.isInterruptContent = this.isInterruptContentObj[key]
						console.log(this.isInterruptContent);
					}
				}
			},
			async submit() {
				let obj = {}
				obj.id = this.form.id
				obj.auditState = this.auditType
				obj.auditContent = this.auditContent
				const res = await recordCheck(obj)
				console.log(res);
				this.auditContent = null
				this.$tab.navigateBack()
				// uni.showToast({
				// 	title: '已审批'
				// })

			},
			// 切换按钮事件
			changeClass() {
				if (this.form.isInterrupt === 0) {
					if (this.auditType === 1) {
						this.auditType = -1
					} else {
						this.auditType = 1
					}
				} else {
					this.auditType = -1
				}

			},
			select() {
				uni.requireNativePlugin('TX-VideoTool').getVideoThumbnailImage({
					"videoPath": this.startSrcVideo,
					"saveImagePath": plus.io.convertLocalFileSystemURL(
						"_doc/TXVideoTool/"),
					"saveImageName": "testLocal" + new Date().getTime() + ".png",
					"second": 0
				}, result => {
					this.startStateVideo = [{
						cover: result.imagePath,
						url: this.startSrcVideo
					}]
				});
				if (this.endSrcVideo) {
					uni.requireNativePlugin('TX-VideoTool').getVideoThumbnailImage({
						"videoPath": this.endSrcVideo,
						"saveImagePath": plus.io.convertLocalFileSystemURL(
							"_doc/TXVideoTool/"),
						"saveImageName": "testLocal" + new Date().getTime() + ".png",
						"second": 0
					}, result => {
						this.endStateVideo = [{
							cover: result.imagePath,
							url: this.endSrcVideo
						}]
					});
				}
			},
			// 开始状态图片预览
			previewStartImg(current) {
				const urls = []
				urls.push(this.startImgList[current])
				uni.previewImage({
					urls
				})
			},
			// 结束图片状态预览
			previewEndImg(current) {
				const urls = []
				urls.push(this.endImgList[current])
				uni.previewImage({
					urls
				})
			},
			// 获取详情
			async getRecordDetail(id) {
				this.isMap = false;
				const res = await recordDetail(id)
				console.log('详情', res);
				this.pathData = res.data.id;
				this.form = res.data;
				this.isMap = true;
				this.form.startTime = this.form.startTime.replace(/-/g, '/').slice(0, 16)
				this.form.endTime = this.form.endTime.replace(/-/g, '/').slice(0, 16)
				// this.startStateVideo.push(this.form.startVideo[0].url)
				// this.endStateVideo.push(this.form.endVideo[0].url)
				res.data.startImg.forEach(item => {
					this.startImgList.push(item.url)
				})
				if (res.data.endImg.length !== 0) {
					res.data.endImg.forEach(item => {
						this.endImgList.push(item.url)
					})
				}
				console.log('FORM', this.form);
				this.startSrcVideo = this.form.startVideo[0].url
				this.endSrcVideo = res.data.endVideo.length !== 0 ? res.data.endVideo[0].url : ''
				this.startStateVideo = [{
					url: this.startSrcVideo
				}]
				if (this.endSrcVideo) {
					this.endStateVideo = [{
						url: this.endSrcVideo
					}]
				}
				this.select();

			},
			// 获得车辆异常状态字典
			async getErrorState() {
				const res = await errorState()
				console.log('车辆状态', res);
				let obj = {}

				res.data.forEach((item, index) => {
					obj[index + 1] = item.dictLabel
				})
				console.log('obj', obj);
				this.isInterruptContentObj = obj
				this.translate(obj)
			}
		},
		watch: {
			form: {
				handler(newVal) {
					this.getErrorState()
					if (this.form.isInterrupt === 1 || this.form.isInterrupt === 2 || this.form.isInterrupt === 3 || this
						.form.isInterrupt === 4) {
						this.auditType = -1
					}
				},
				deep: true
			},
		},
		onLoad(option) {
			this.getRecordDetail(option.id)
		}
	}
</script>

<style lang="scss" scoped>
	.mr46 {
		margin-right: 46rpx !important;
	}

	.mt28 {
		margin-top: 28rpx;
	}

	.just-content-start {
		justify-content: flex-start !important;
		align-items: center;
	}

	.reject-box-bottom:nth-child(2) {
		padding: 40rpx 40rx 20rpx !important;
	}

	.reject-box {

		.reject-box-top {
			width: 100%;
			height: 69rpx;
			background: #7FB5FF;
			border-radius: 26rpx 26rpx 0px 0px;
			display: flex;
			justify-content: space-between;

			.top-right {
				display: flex;
				justify-content: start;
				align-items: center;
				margin-right: 36rpx;

				uni-image {
					width: 28rpx;
					margin-left: 32rpx;
					vertical-align: middle;
				}

				.state-text {

					margin-left: 13rpx;
					line-height: 69rpx;
				}
			}

			uni-image {
				width: 50rpx;
				margin-left: 32rpx;
				vertical-align: middle;
			}
		}

		.reject-box-bottom {
			padding: 40rpx;

			.state-icon {
				display: flex;
				margin: 40rpx 0;
			}

			.state-icon:nth-child(1) {
				margin: 0 0 40rpx;
			}

			.border-style {
				border-top: 1rpx dashed #F98803;
				width: 90%;
				margin: 0 auto;
			}

			.border-style2 {
				border-top: 1rpx dashed #FB5637;
				width: 90%;
				margin: 0 auto;
			}
		}
	}

	// 审批状态按钮样式
	.normal {
		width: 170rpx;
		height: 58rpx;
		background: rgba(126, 142, 193, 0.6);
		border-radius: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.success {
		background: linear-gradient(90deg, #3FC377 0%, #83D992 100%);
		box-shadow: 0px 2rpx 13rpx 0px rgba(27, 43, 95, 0.25);
	}

	.fail {
		background: linear-gradient(90deg, #FF2D04 0%, #FFA53E 100%);
		box-shadow: 0px 2rpx 13rpx 0px rgba(27, 43, 95, 0.25);
	}

	.ml37 {
		margin-left: 37rpx;
	}

	.center {
		justify-content: center;
		align-items: center;
	}

	.textareaStyle {
		margin-bottom: 56rpx;
		background: rgba(255, 255, 255, 0.1);
		border: 2rpx solid #495B93 !important;
		border-radius: 15rpx;

		/deep/ .input-placeholder {
			color: #7E8EC1 !important;
			font-size: 26rpx;
		}
	}

	.fontGreen {
		color: #007C3C !important;
	}

	.bg-color-green {
		background: #36C372 !important;
	}

	.fontColor {
		color: #FC5536 !important;
	}

	.fontWeight {
		font-weight: bold !important;
	}

	.bg-color-red {
		background: #FB5637 !important;
	}

	.block {
		display: block !important;
	}

	.radius15 {
		border-radius: 15rpx;
	}

	.border {
		border: 1rpx solid #495B93;
	}

	.state-box-size {
		width: 180rpx;
		height: 180rpx;
	}

	.mt30 {
		margin-top: 30rpx;
	}

	.space-between {
		justify-content: space-between;
	}

	.mt33 {
		margin-top: 33rpx;
	}

	.addLineSuccess-big-box {

		.addLineSuccess-big-box-top {
			height: 69rpx;
			background: #7FB5FF;
			border-radius: 28rpx 28rpx 0rpx 0rpx;
			display: flex;
			align-items: center;
			font-size: 26rpx;
			font-weight: bold;
			color: #FFFFFF;
		}

		.addLineSuccess-big-box-bottom {
			padding: 0rpx 39rpx;

			.addLineSuccess-big-box-bottom-item {
				display: flex;
				margin: 36rpx auto;

				.state-icon-left {
					display: flex;
					align-items: center;

					.green-circle {
						width: 15rpx;
						height: 15rpx;
						background: #36C372;
						border-radius: 50%;
						margin-right: 16rpx;
					}

					uni-text {
						font-size: 26rpx;
						font-weight: bold;
						color: #495B93;

					}

				}

				.state-icon-right {
					display: flex;
					align-items: center;

					uni-text {
						font-size: 26rpx;
						font-weight: 400;
						color: #333333;
						margin-left: 14rpx;
					}
				}
			}

			.map {
				height: 339rpx;
				background: #FFFFFF;
				border: 2rpx solid #495B93;
				border-radius: 15rpx;
				margin: 25rpx auto 40rpx;
			}

			// .border-style {
			// 	border-top: 1rpx dashed #F98803;
			// 	margin: 0 auto;
			// }
		}
	}

	/deep/.xfx-image-upload-Item {
		margin-right: 0;
		margin-bottom: 0;
		width: 180rpx;
		height: 180rpx;
	}
</style>
