<template>
	<view class="container">
		<uni-navbar title="启动运输"></uni-navbar>
		<view class="box commonMt" style="overflow: hidden;">
			<view class="topMap">
				<map id="mapBig" ref="mapBig" :markers="markers" :polyline="polyline" :scale="scale"
					:latitude="latitude" :longitude="longitude" style="width: 100%;height: 513rpx;"></map>
			</view>
			<view class="box3">
				<view class="commonMt 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 " style="padding-bottom: 20rpx;">
						<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="addLineSuccess-big-box-bottom-item">
							<view class="flexAlignCenter">
								<view class="greenCircle">
								</view>
								<text class="itemText">开始地址:</text>
							</view>
							<view class="flexAlignCenter">
								<text class="infoText">{{form.startName}}</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.endName}}</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.startDate}} 至 {{form.endDate}}</text>
							</view>
						</view>
						<view style="display: flex;">
							<view class="addLineSuccess-big-box-bottom-item" style="width: 50%;margin: 0;">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text class="itemText">开始时间:</text>
								</view>
								<view class="flexAlignCenter">
									<text class="infoText">{{ changeTime(form.applyStartTime) }}</text>
								</view>
							</view>
							<view class="addLineSuccess-big-box-bottom-item" style="width: 50%;margin: 0;">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text class="itemText">结束时间:</text>
								</view>
								<view class="flexAlignCenter">
									<text class="infoText">{{ changeTime(form.applyEndTime) }}</text>
								</view>
							</view>
						</view>
						<view style="display: flex;">
							<view class="addLineSuccess-big-box-bottom-item" style="width: 50%;">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text class="itemText">车&nbsp;&nbsp;牌&nbsp;&nbsp;号:</text>
								</view>
								<view class="flexAlignCenter">
									<text class="infoText">{{form.carNumber}}</text>
								</view>
							</view>
							<view class="addLineSuccess-big-box-bottom-item" style="width: 50%;">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text class="itemText">车辆司机:</text>
								</view>
								<view class="flexAlignCenter">
									<text class="infoText">{{form.driverName}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="addLineSuccess-big-box2 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">
							<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>
					</view>
				</view>

			</view>
			<view class="footer">
				<u-button @click="submit2" class="add-button commonMb" shape="circle"
					color="linear-gradient(to top, #FF2D04, #FFA53E)">脱离运输</u-button>
				<u-button @click="submit" class="add-button commonMb" shape="circle"
					color="linear-gradient(to top, #83D992, #3FC377)">结束运输</u-button>
			</view>

		</view>
		<u-popup :show="show" mode="center" class="modelBox">
			<!-- <cover-view class="coverBox" v-if="show"> -->
			<view class="model">
				<view class="modelTitle">上传车辆结束运输状态<view class="close" @click="show=false" v-show="!isAuto"></view>
				</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-style widthButton" shape="circle" @click="confirm()"
					color="linear-gradient(to top, #F59A02, #FFD334)">
					确定
				</u-button>
			</view>
			<!-- </cover-view> -->
		</u-popup>
		<!-- <cover-view class="coverBox" v-if="show2"> -->
		<u-popup :show="show2" mode="center" class="modelBox">
			<view class="model">
				<view class="modelTitle">脱离运输<view class="close" @click="show2=false"></view>
				</view>
				<view class="textBox colorStyle2">
					<u--form :model="form2" ref="uForm" :rules="rules" labelWidth="0" style='width: 90%;'>
						<u-form-item class="block-box1" prop="breakReason">
							<view class="textBox">
								<view class="redCircle"></view>
								<text class="itemText">脱离原因</text>
							</view>
							<view class="textBox mt29 textareaStyle">
								<u--textarea v-model="form2.breakReason" maxlength="500" placeholder="请输入脱离原因"
									height="180">
								</u--textarea>
							</view>

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

		<u-popup :show="show3" mode="center" class="modelBox">
			<!-- <cover-view class="coverBox" v-if="show3"> -->
			<view class="model">
				<view class="modelTitle">提示<view class="close" @click="closeMusic()"></view>
				</view>
				<view class="textBox colorStyle2">
					<text class="itemText" style="margin-top: 40rpx;margin-bottom: 40rpx;">马上就达到终点了</text>
				</view>
				<u-button class="custom-style widthButton" shape="circle" @click="closeMusic()"
					color="linear-gradient(to top, #F59A02, #FFD334)">
					确定
				</u-button>
			</view>
		</u-popup>
		<!-- </cover-view> -->
		<!-- <tooltipNew :show="isModalShow" type="type6" @close='isModalShow=false'></tooltipNew> -->
		<u-overlay :show="isModalShow">
			<view class="dialog">
				<view class="dialog-top">
					<view class="dialog-title">
					</view>
				</view>
				<view class="dialog-bottom">
					<view class="textBox2">
						<text style="color: #FC5536;">当前运输正在进行中,不可退出此页面</text>
						<text style="color: #FC5536;">请完成本次运输后,点击"结束运输"</text>
						<text style="color: #FC5536;">拍摄上传车辆图片和视频,结束运输</text>
					</view>
				</view>
				<view class="update-close" @tap="isModalShow=false">
					<u-icon size="66" color="#ffffff" name="close-circle"></u-icon>
				</view>
			</view>

		</u-overlay>
	</view>
</template>

<script>
	import {
		selectStopInfo,
		transportProcessEnd,
		insertRedis,
		stopProcess,
		editProcess
	} from "../../api/company/transport.js"
	import config from '@/config.js'
	import {
		getToken
	} from '@/utils/auth'
	const fUN_AmapLocation = uni.requireNativePlugin('FUN-AmapLocation');
	const innerAudioContext = uni.createInnerAudioContext();
	var _this;
	export default {
		data() {
			return {
				map: null,
				markers: [],
				startMarker: [],
				latitude: '39.997761',
				longitude: '116.478928',
				polyline: [{
					points: [],
					color: 'rgba(255, 0, 0, 1)', //线的颜色
					width: 22, //线的宽度
					borderWidth: 2, //线的厚度
					arrowLine: true, //带箭头的线
				}],

				// 开始状态的视频
				startStateVideo: [],
				startSrcVideo: '',
				startImgList: [],
				form: {
					startTime: "00:00:00",
					endTime: "00:00:00",
					// 结束坐标和开始坐标
					endPoint: '',
					startPoint: '',
					mtRoutePointList: [],

				},
				show: false,
				show2: false,
				show3: false,
				drivingLicense: [],
				carVideo: [],
				imgList: [],
				imgListData: [],
				carVideoData: [],
				// 图片上传地址
				urlConfig: config.baseUrl + '/file/upload',
				pointCoordinate: null,
				// 行驶证数据
				form2: {
					truckState: null,
					breakReason: '',
				},
				rules: {
					truckState: [{
						validator: (rule, value, callback) => {
							return this.carVideo.length !== 0 && this.imgList.length === 2
						},
						message: '请上传两张照片与一段视频'
					}, ],
					breakReason: {
						required: true,
						whitespace:true,
						message: '请输入脱离原因',
						trigger: ['blur', 'change']
					},
				},
				// 点击修改传回来的id
				id: '',
				scale: 16,
				srcVideo: '',
				quer: {
					id: "",
					pointCoordinate: "",
					endPoint: "",
					startTime: "",
					"sp": "",
					"ag": "",
					"tm": "",
				},
				//存储60个定位点米数数组，五秒钟一个定位点，五分钟
				timeData: [],
				pointNumber: 0,
				isModalShow: false,
				musicShow: false,
				isGoBack: false,
				//是否是自动运输
				isAuto: false,
				//记时
				timeLong: 0,
				//定时器
				timer: null

			}
		},
		methods: {
			closeMusic() {
				this.show3 = false;
				// if (this.musicShow) {
				// 	console.log('播放')
				// 	innerAudioContext.play()
				// } else {
				console.log('暂停')
				innerAudioContext.pause();
				// this.musicShow = true;
				// }
				// this.musicShow = !this.musicShow;
			},
			palyMusic() {
				this.show3 = true;
				if (this.musicShow) {
					console.log('播放')
					innerAudioContext.play()
				} else {
					innerAudioContext.autoplay = true;
					innerAudioContext.loop = true; //循环播放
					innerAudioContext.src =
						'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
					this.musicShow = true;
				}
			},
			getData(latitude, longitude) {
				let style = {
					color: 'rgba(255, 0, 0, 1)', //线的颜色
					width: 22, //线的宽度
					borderWidth: 2, //线的厚度
					arrowLine: true, //带箭头的线
				};
				console.log('我是进来的');
				// 将新的点结构起来
				let dat = {
					latitude,
					longitude
				};
				// 把原 polyline 的数据复制一份
				let polyline_obj = JSON.parse(JSON.stringify(this.polyline[0]));
				// 然后将新的点放到复制之后的这个对象里面去
				polyline_obj.points.push(dat);
				// 重组对象，让它和原 polyline 的数据结构一样
				let polyline = [polyline_obj];
				// 然后整体再赋值给原 polyline
				this.polyline = polyline;
				// 最后修改中心经纬度
				this.latitude = latitude;
				this.longitude = longitude;
				console.log('this.polyline', this.polyline);

			},
			markeMove(latitude, longitude) {
				// this.$nextTick(() => {
				// this.scale = 20
				this.latitude = latitude;
				this.longitude = longitude;
				console.log('我是中心点经纬度', this.latitude, this.longitude)
				let marker = {
					id: 100,
					width: 110,
					height: 156,
					latitude: latitude,
					longitude: longitude,
					iconPath: "/static/images/transport/1.png",
					anchor: {
						x: 0.5,
						y: 1,
					},
				};
				this.markers = [this.startMarker, marker];
				// 更新Markers点
				// uni.createMapContext("mapBig", this).translateMarker({
				// 	markerId: 100,
				// 	destination: {
				// 		latitude:latitude,
				// 		longitude:longitude
				// 	},
				// });
				// })
			},
			//获取当前位置
			getLocation() {
				console.log('我要定位信息了')
				// fUN_AmapLocation.once({}, result => {
				// 	console.log('====fUN_AmapLocation::8秒后单次定位示例====', JSON.stringify(result));
				// 	// _this.msg = JSON.stringify(result);
				// });
				uni.getLocation({
					// type: 'gcj02',
					success: (res) => {
						console.log(res, 'res');
						this.pointCoordinate = res.longitude + ',' + res.latitude;
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
						this.longitude = res.longitude;
						this.latitude = res.latitude;
						this.startMarker = {
							id: 1,
							width: 110,
							height: 156,
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: "/static/images/transport/2.png",
							anchor: {
								x: 0.5,
								y: 1,
							},
						};
						let marker = {
							id: 100,
							width: 110,
							height: 156,
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: "/static/images/transport/1.png",
							anchor: {
								x: 0.5,
								y: 1,
							},
						};
						this.markers = [this.startMarker, marker];
						this.polyline[0].points.push({
							latitude: res.latitude,
							longitude: res.longitude
						});
						console.log(this.markers, 'this.markers');
						// this.markeMove()
					}
				});
			},
			selectStar() {
				// this.startTempFilePath = this.startSrcVideo;
				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
					}]
				});
			},
			// 开始状态图片预览
			previewStartImg(current) {
				// const urls = this.startImgList.map(item => {
				// 	return item
				// })
				const urls = []
				urls.push(this.startImgList[current])
				console.log(urls);
				uni.previewImage({
					urls
				})
			},
			submit() {
				console.log('开始啦');
				this.clearForm();
				this.show = true;
			},
			submit2() {
				this.clearForm();
				this.show2 = true;
			},
			clearForm() {
				this.carVideo = [];
				this.imgList = [];
				this.imgListData = [];
				this.carVideoData = [];
				// this.form2 = {
				// 	truckState: null,
				// 	breakReason: '',
				// };
				this.form2.breakReason = '';
				this.form2.truckState = '';
			},
			// 结束提示音
			endMusic() {
				var music = null;
				// let that=this;
				music = uni.createInnerAudioContext();
				music.src = '../../static/20221017_091440.m4a';
				music.play();
				music.onEnded(() => {
					music = null;
				})
			},
			// 结束持续定位
			end() {
				let _taht = this;
				fUN_AmapLocation.stop({}, result => {
					_taht.colseWakeLock();
					console.log('====fUN_AmapLocation定位stop====', JSON.stringify(result));
				});
			},
			//关闭屏幕唤醒
			colseWakeLock() {
				let _taht = this;
				fUN_AmapLocation.colseWakeLock(function(result) {
					if (_taht.isAuto) {
						_taht.clearForm();
						_taht.show = true;
					} else {
						_taht.isGoBack = true;
						_taht.$tab.navigateBack()
					}

					// _taht.$tab.redirectTo('/pages/driverStartTransport/index')
					// _taht.$tab.navigateTo('/pages/driverStartTransport/index')
					console.log('====结束被唤醒了====', JSON.stringify(result))
				});
			},

			// 获取权限
			permission() {
				_this = this;
				console.log('获取权限');
				fUN_AmapLocation.permission({}, result => {
					console.log('====fUN_AmapLocation定位====', JSON.stringify(result));
					if (result.code === 0) {
						if (result.flag === true && result.flag_br === true) {
							_this.battery()
						} else {
							uni.showModal({
								title: '提醒',
								showCancel: true,
								content: '请在权限-位置信息中选择始终允许',
								success: function(res) {
									if (res.confirm) {
										_this.settingUp();
									} else if (res.cancel) {
										// alert('用户点击取消');
									}

								}
							})
						}
					}
				});

			},
			//打开应用设置页
			settingUp() {
				fUN_AmapLocation.openSetting(function(result) {

				});
			},
			//开启电池优化
			battery() {
				let _that = this;
				//检测是否忽略电池优化（简单解释：开启电池优化，会干掉应用）
				fUN_AmapLocation.isIgnoringBatteryOptimizations(function(result) { //SDK>=23,否则返回不支持
					if (result.code === 0) {
						if (result.flag === true) {
							console.log('====忽略电池优化====')
							// _that.start();
							_that.openWakeLock();
						} else {
							// 申请忽略电池优化（如果已加入电池优化的白名单 则进入系统电池优化页面，若未加入则弹窗申请。）
							fUN_AmapLocation.requestIgnoreBatteryOptimizations(function(result) {
								console.log(result)
								console.log('====申请电池优化====')
							});
						}
					}
				})
			},
			//打开屏幕唤醒
			openWakeLock() {
				//1台华为[鸿蒙]，2台小米（米6[安卓9]、米11Ultra[安卓11]）使用的10分测试的。
				fUN_AmapLocation.openWakeLock({
					time: 5
				}, function(result) {
					console.log('====被唤醒了====', JSON.stringify(result))
					// if(result.code===0)
					// {

					// }
				});
				//参数    time:间隔时间，单位：分，建议5-10。具体看业务
			},
			// 车辆状态图片上传成功
			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 = []
			},
			// 视频上传失败的回调
			errorTruckVideo(res) {},
			// 获取运输申请详情
			async getDetail(id) {
				const res = await selectStopInfo(id)
				console.log('运输详情', res);
				this.form = res.data;
				res.data.startImg.forEach(item => {
					this.startImgList.push(item.url)
				})
				this.startSrcVideo = this.form.startVideo[0].url;
				console.log(this.startSrcVideo, 'this.startSrcVideo');

				this.startStateVideo = [{
					url: this.startSrcVideo
				}]
				this.form.transportName = this.form.transportName.replace(/-/g, '')
				this.form.startDate = this.form.startDate.replace(/-/g, ' - ')
				this.form.endDate = this.form.endDate.replace(/-/g, ' - ')
				this.selectStar();
				this.quer.startTime = res.data.startTime;
				this.quer.endPoint = res.data.endPoint;
				if (res.data.runPointList && res.data.runPointList.length > 0) {
					let pointData = res.data.runPointList;
					this.longitude = pointData[pointData.length - 1].longitude;
					this.latitude = pointData[pointData.length - 1].latitude;
					this.startMarker = {
						id: 1,
						width: 110,
						height: 156,
						latitude: pointData[0].latitude,
						longitude: pointData[0].longitude,
						iconPath: "/static/images/transport/2.png",
						anchor: {
							x: 0.5,
							y: 1,
						},
					};
					let marker = {
						id: 100,
						width: 110,
						height: 156,
						latitude: pointData[pointData.length - 1].latitude,
						longitude: pointData[pointData.length - 1].longitude,
						iconPath: "/static/images/transport/1.png",
						anchor: {
							x: 0.5,
							y: 1,
						},
					};
					this.markers = [this.startMarker, marker];
					this.polyline[0].points = res.data.runPointList;
					let that = this;
					fUN_AmapLocation.stop({}, result => {
						console.log('====fUN_AmapLocation定位stop====', JSON.stringify(result));
						that.start();
					});
				} else {
					this.getLocation();
					this.start();
				}



			},
			changeTime(time) {
				if (!time) {
					return
				}
				return time.slice(0, 5)
			},
			editProcess(data) {
				console.log('我是传进来的值')
				editProcess(data).then(res => {
					console.log(res, '<-------------res')
					this.isGoBack = true;
					this.isAuto = false;
					this.$tab.navigateBack()
				})
			},
			confirm() {
				this.$refs.uForm.validate().then(res => {
					if (this.isAuto) {
						this.editProcess({
							id: this.quer.id,
							endVideo: this.carVideoData,
							endImg: this.imgListData
						})
					} else {
						this.transportProcessEnd({
							...this.quer,
							breakReason: this.form2.breakReason,
							endVideo: this.carVideoData,
							endImg: this.imgListData
						})
					}

				})
			},
			//开启持续定位
			start() {
				console.log('==fUN_AmapLocation==：开启定位');
				fUN_AmapLocation.start({
						intervalTime: 60000,
						gpsFirst: true,
						isReport: false, //false 以下可以不传
						reportInterval: 1, //每定位几次进行上传
						url: config.baseUrl + '/app/transportProcess/insertRedis', //上传URL
						params: {
							// "id": "{{processId}}",
							// "pointCoordinate": "{{pointCoordinate}}",
							// "endPoint": "{{endPoint}}",
							// "startTime": "{{startTime}}",
						}, //上传的自定义参数，如加入其它数据
						headers: {
							// Authorization: 'Bearer ' + getToken()
						} //request headers 参数 比如加上token
					},
					result => {
						// console.log(result);
						// console.log('====fUN_AmapLocation定位====', JSON.stringify(result));
						if (result.code === 0) {
							this.quer.pointCoordinate = result.longitude + ',' + result.latitude;
							this.quer.sp = result.speed;
							this.quer.ag = result.bearing;
							this.quer.tm = result.time;
							console.log(this.quer, '<--------------角度');
							insertRedis(this.quer).then(res => {
								console.log(res.msg, 'res');
								if (res.code == '200') {
									//后端自动结束 前端结束持续打点
									if (!res.msg && res.msg != '0') {
										this.end();
										return;
									}
									// console.log(result.latitude, 'result.latitude');
									// console.log(result.longitude, 'result.longitude')
									this.markeMove(result.latitude, result.longitude);
									this.getData(result.latitude, result.longitude)
									//五百米内进行打点
									if (parseInt(res.msg) < config.MNumber && !this.timer) {
										let that = this;
										this.timer = setInterval(() => {
											that.pointNumber++;
											console.log(that.pointNumber,'我是定时器的次数')
										}, 60000)
									}
									// console.log(this.pointNumber, '我是打点次数')

									this.timeData.push(res.msg);
									//如果存储20个已经满了就删除一个
									if (this.timeData.length > 20) {
										this.timeData.splice(0, 1);
									}

									let isEnd = 0;
									if (this.timeData.length >= 10) {
										this.timeData.forEach(item => {
											if (parseInt(item) < config.MNumber) {
												isEnd++;
											}
										})
										// 自动结束打点
										if (isEnd >= config.endNumber && this.pointNumber > 9) {
											stopProcess(this.quer).then(resd => {
												console.log(resd, 'resd');
												if (resd.code == '200') {
													console.log(
														'<-------------------自动结束打点----------------->'
														);
													this.isAuto = true;
													this.endMusic();
													this.end();
												}
											})
										}
									}

									// if (parseInt(res.msg) < config.MNumber && this.pointNumber >= 3 && isEnd <
									// 	config.endNumber) {
									// 	// this.ScanAudio();
									// 	this.palyMusic()
									// 	this.pointNumber = 0;
									// 	console.log('我是提醒打点');
									// }
								}

							}).catch(res => {
								console.log(res, 'res');
							})
							// 	_this.count++;
							// 	_this.getData(result.latitude,result.longitude)
						} else {
							// 	_this.errorCount++;
						}
					}
				);
			},
			transportProcessEnd(data) {
				console.log(data, 'data');
				transportProcessEnd(data).then(res => {
					console.log(res, 'res');
					this.end();
				})
			},
			dateFormat(date) {
				// let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				// return year + "-" + month + "-" + day;
			},

		},
		onLoad(option) {
			console.log(option, 'option');
			// if (option.startTime) {
			// 	// this.getDetail('1028956314733137920')
			// 	this.quer.startTime=this.dateFormat(option.startTime)
			// }
			// this.palyMusic();
			if (option.id) {
				this.quer.id = option.id;
			}
		},
		onBackPress(e) {
			console.log(this.isGoBack, 'this.isGoBack');
			if (this.isGoBack) {
				if (this.timer) { //注销定时器
					console.log('注销定时器')
					clearTimeout(this.timer);
					this.timer = null;
				}
				return false;
			}
			if (this.isAuto) {
				return true;
			}
			this.isModalShow = true;
			return true; //返回true阻止默认操作
		},
		mounted() {
			this.getDetail(this.quer.id)
		}
	}
</script>

<style lang="scss" scoped>
	// .block {
	// 	display: block !important;
	// }
	.itemText {
		margin-right: 10px;
	}

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

	.mt30 {
		margin-top: 30rpx;
	}

	.mt33 {
		margin-top: 33rpx;
	}

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

	.addLineSuccess-big-box2 {
		margin-bottom: 150rpx;

		.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 {
			// margin-top: 30rpx;
			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;
			// }
		}
	}

	.custom-style {
		// 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;
	}


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


	.mb {
		margin-bottom: 11rpx !important;
	}

	.mt31 {
		margin-top: 31rpx;
	}

	.mb43 {
		margin-bottom: 43rpx;
	}

	.add-button {
		height: 85rpx;
		width: 324rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		border: 0;
		// margin-top: 27rpx;
		margin-right: 29rpx;
	}

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

	.model {
		// position: absolute;
		// top: 50%;
		// left: 50%;
		// transform: translate(-50%, -50%);
		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;
	}

	.btHeight {
		// 屏幕高度-导航栏高度-状态栏高度-地图高度-按钮的高度
		height: calc(100vh - 44px - 22px - 526rpx - 85rpx);
		overflow-y: auto;
	}

	.footer {
		position: fixed;
		bottom: 0;
		display: flex;
		z-index: 99;
	}

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

		/deep/ .uni-textarea-placeholder {
			font-size: 26rpx;
			font-weight: 400;
			color: #7E8EC1 !important;
		}
	}

	.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/ .modelBox .u-transition .u-popup__content {
		position: fixed;
		top: 700rpx;
	}

	//处理当前组件弹框
	/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);
	}

	.dialog {
		position: fixed;
		width: 575rpx;
		/* height: 462rpx; */
		padding: 0 0 20rpx 0;
		background: rgba(255, 255, 255, 0.75);
		border: 2rpx solid #77A8FF;
		box-shadow: 0rpx 0rpx 24rpx 6rpx rgba(109, 160, 251, 0.6);
		border-radius: 28rpx;
		top: 780rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.dialog-top {
		position: relative;
		height: 241rpx;
		top: -86rpx;
		width: 100%;
		background: url('@/static/images/miniTop.png');
		background-size: 100% 100%;

	}

	.dialog-bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: -85rpx;

	}

	.textBox2 {
		font-size: 30rpx;
		font-weight: bold;
		color: #485B93;
		line-height: 55rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.dialog-button {
		width: 238rpx;
		height: 72rpx;
		margin-top: 12rpx;
		// margin-bottom: 8rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.update-close {
		position: absolute;
		text-align: center;
		left: 50%;
		transform: translate(-50%);
		bottom: -80rpx;
	}
</style>
