<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>
				<!-- <mapImg2></mapImg2> -->
			</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 :pathData='pathData' :startPoint='form.startPoint' :endPoint='form.endPoint'
								:mtRoutePointList='form.mtRoutePointList'>
							</mapImg>
						</view> -->
							<!-- <u-button @click="$tab.navigateTo('/pages/map4/index')">查看地图</u-button> -->
							<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">
										<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">
										<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="isTongGuo=== '1'">
							<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 class="addLineSuccess-big-box-bottom-item" v-if="form.auditContent">
										<view class="flexAlignCenter">
											<view class="greenCircle mCircle">
											</view>
											<text class="itemText">反馈建议:</text>
										</view>
										<view class="flexAlignCenter">
											<text class="greenText">{{form.auditContent}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 驳回 -->
						<view>
							<!-- 异常脱离原因 -->
							<view v-if="form.isInterrupt !== 0" 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">
										<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 class="addLineSuccess-big-box mt33  commonRedBj commonMb"
								v-if="form.auditState === -1">
								<view class="addLineSuccess-big-box-top bg-color-red">
									<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">
										<view class="flexAlignCenter">
											<view class="redCircle mCircle">
											</view>
											<text class="itemText">记录查看:</text>
										</view>
										<view class="flexAlignCenter">
											<u-icon color="#FB5637" name="close-circle-fill"
												style="margin-right: 12rpx;">
											</u-icon>
											<text class="redText">不合规</text>
										</view>
									</view>
									<view class="addLineSuccess-big-box-bottom-item" v-if="form.auditContent">
										<view class="flexAlignCenter">
											<view class="redCircle mCircle">
											</view>
											<text class="itemText">反馈建议:</text>
										</view>
										<view class="flexAlignCenter">
											<text class="redText">{{form.auditContent}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		recordDetail
	} from "@/api/company/record.js"
	import {
		pointData
	} from "@/api/company/path.js"
	import {
		errorState
	} from "@/api/city/record.js"
	export default {
		data() {
			return {
				// 结束状态的视频
				endStateVideo: [],
				// 开始状态的视频
				startStateVideo: [],
				isTongGuo: null,
				form: {
					startPoint: '',
					endPoint: '',
					mtRoutePointList: []
				},
				endImgList: [],
				startImgList: [],
				startSrcVideo: '',
				endSrcVideo: '',
				pathData: '',
				isInterruptContentObj: {},
				isInterruptContent: null,
				isMap: true,
			}
		},
		methods: {
			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
				})
			},
			// 字典翻译
			translate(obj) {
				for (let key in obj) {
					if (this.form.isInterrupt == key) {
						this.isInterruptContent = this.isInterruptContentObj[key]
					}
				}
			},
			// 获得车辆异常状态字典
			async getErrorState() {
				const res = await errorState()
				let obj = {}

				res.data.forEach((item, index) => {
					obj[index + 1] = item.dictLabel
				})
				this.isInterruptContentObj = obj
				this.translate(obj)
			},
			// 获取详情
			async getRecordDetail(id) {
				this.isMap = false;
				const res = await recordDetail(id)
				console.log('详情', res);
				this.form = res.data;
				this.pathData = res.data.id;
				this.isMap = true;
				this.form.startTime = this.form.startTime.replace(/-/g, '/')
				this.form.endTime = this.form.endTime.replace(/-/g, '/')
				res.data.startImg.forEach(item => {
					this.startImgList.push(item.url)
				})
				res.data.endImg.forEach(item => {
					this.endImgList.push(item.url)
				})
				this.startSrcVideo = this.form.startVideo[0].url
				this.endSrcVideo = this.form.endVideo[0] ? this.form.endVideo[0].url : ''
				this.startStateVideo = [{
					url: this.startSrcVideo
				}]
				if (this.endSrcVideo) {
					this.endStateVideo = [{
						url: this.endSrcVideo
					}]
				}
				this.select();
				// pointData(res.data.id).then(resData => {
				// 	if (resData.data.runPoints && resData.data.runPoints.length > 0) {
				// 		this.pathData = resData.data.runPoints.join(',');
				// 		console.log(this.pathData,'this.pathData')
				// 	}
				// })
			},
		},
		watch: {
			form: {
				handler(newVal) {
					this.getErrorState()
				},
				deep: true
			},
		},
		onLoad(option) {
			console.log('option', option);
			this.isTongGuo = option.state
			this.getRecordDetail(option.id)
		},

	}
</script>

<style lang="scss" scoped>
	.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>
