<template>
	<view class="container">
		<uni-navbar title="运输记录"></uni-navbar>
		<view class="box commonMt">
			<view class="commonMb">
				<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">运输名称:</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>
						<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">车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;牌&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</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">车&nbsp;&nbsp;&nbsp;辆&nbsp;&nbsp;司&nbsp;&nbsp;&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="item"
									v-for="item in startImgList" :showLoading="true" :src="item" width="180rpx"
									height="180rpx" @tap="previewStartImg(item)">
								</u--image>
							</view>
							<view class="flexAlignCenter mt33">
								<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="endStateVideo"
										mediaType="video"></xfx-image-upload>
								</view>
								<u--image class=" border radius15" radius="15rpx" :key="item" v-for="item in endImgList"
									:showLoading="true" :src="item" width="180rpx" height="180rpx"
									@tap="previewEndImg(item)">
								</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>
						</view>
					</view>
					<!-- 驳回 -->
					<view v-if="isTongGuo === '-1'">
						<!-- 异常脱离原因 -->
						<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">{{form.breakReason}}</text>
									</view>
								</view>
							</view>
						</view>


						<!-- 审核状态 -->
						<view class="addLineSuccess-big-box mt33  commonRedBj commonMb">
							<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">
									<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>
					<reaee-video-cover-extractor :path="startTempFilePath" @success='startSuccess'
						@error='startError' />
					<reaee-video-cover-extractor :path="endTempFilePath" @success='endSuccess' @error='endError' />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		recordDetail
	} from "@/api/company/record.js"
	import {
		pointData
	} from "@/api/company/path.js"
	export default {
		data() {
			return {
				// 结束状态的视频
				endStateVideo: [],
				// 开始状态的视频
				startStateVideo: [],
				isTongGuo: null,
				form: {
					startPoint: '',
					endPoint: '',
					mtRoutePointList: []
				},
				endImgList: [],
				startImgList: [],
				startTempFilePath: '',
				endTempFilePath: '',
				startSrcVideo: '',
				endSrcVideo: '',
				pathData:'',
			}
		},
		methods: {
			select() {
				this.startTempFilePath = this.startSrcVideo;
				this.endTempFilePath = this.endSrcVideo
			},
			startSuccess(o) {
				console.log('成功了', o);
				this.startStateVideo = [{
					cover: o,
					url: this.startSrcVideo
				}]
				console.log('开始视频', this.startStateVideo);
			},
			endSuccess(o) {
				console.log('成功了', o);
				this.endStateVideo = [{
					cover: o,
					url: this.endSrcVideo
				}]
				console.log('开始视频', this.endStateVideo);
			},
			// 视频封面提取失败
			startError(e) {
				console.log('startError', e);
			},
			endError(e) {
				console.log('enderror', e);
			},
			// 开始状态图片预览
			previewStartImg(current) {
				const urls = this.startImgList.map(item => {
					return item
				})
				uni.previewImage({
					urls
				})
			},
			// 结束图片状态预览
			previewEndImg(current) {
				const urls = this.endImgList.map(item => {
					return item
				})
				uni.previewImage({
					urls
				})
			},
			// 获取详情
			async getRecordDetail(id) {
				const res = await recordDetail(id)
				pointData(res.data.id).then(resData=>{
					console.log('详情', resData);
					if(resData.data.runPoints&&resData.data.runPoints.length>0)
					{
						this.pathData=resData.data.runPoints.join(';')
					}
					this.form = res.data
					this.form.startTime = this.form.startTime.slice(0, 16)
					this.form.endTime = this.form.endTime.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)
					})
					res.data.endImg.forEach(item => {
						this.endImgList.push(item.url)
					})
					this.startSrcVideo = this.form.startVideo[0].url
					this.endSrcVideo = this.form.endVideo[0].url
					this.select();
				})
			}
		},

		onLoad(option) {
			console.log(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>
