<template>
	<view class="warp">
		<view class="top_name">
			<view class="name_top">
				<view class="name_lef">
					<block v-if="staskInfo.orderSource == 10">
						<image src="/static/images/dispatch/task_lu.png"></image>
					</block>
					<block v-else>
						<image src="/static/images/dispatch/task_bao.png"></image>
					</block>
					<text class="name_text">{{staskInfo.orderTitle?(staskInfo.orderTitle).replace(/\r\n/g, '').replace(/\n/g, '').replace(/\s/g, '').replace(/\t/g, ''):''}}</text>
				</view>
				<block v-if="staskInfo.status != 10 && !isDriverIndex && !isWZHB">
					<view class="name_phone" @tap="onShowSiJi(staskInfo.orderVehicles)">
						<uni-icons type="phone-filled" color="white"></uni-icons>联系司机
					</view>
					<view class="siji_list" v-if="showSiJi">
						<block v-for="(item,index) in staskInfo.orderVehicles" :key="index">
							<view class="s_l_list" @tap="callPhone(item.userPhone)">
								{{item.userName}}
							</view>
						</block>
					</view>
				</block>
			</view>
			<!-- <view :class="showHtml?'loading_no1':''"></view> -->
			<view class="name_bot">
				<view class="n_b_lef">
					<image src="/static/images/dispatch/time_info.png"></image>
					<text v-if="staskInfo.arriveDate">{{staskInfo.arriveDate.slice(0,16)}}</text>
				</view>
				<block v-if="staskInfo.status != 10 && !isDriverIndex && !isWZHB">
					<view class="n_b_rig" @tap="onLookAddress(staskInfo)">
						<image src="/static/images/dispatch/task_address.png"></image>
						<text>车辆位置</text>
					</view>
				</block>
				<block v-if="staskInfo.status != 10 && isDriverIndex && !isWZHB">
					<view class="n_b_rig2">
						[{{staskInfo.vehicleCode}}] {{staskInfo.orderVehiclePerson}}
					</view>
				</block>
			</view>
			<!-- <view :class="showHtml?'loading_no2':''"></view> -->
		</view>
		<view class="top_name">
			<block v-if="!isWZHB">
				<view class="text_txt">
					<text @tap="linktap(staskInfo.orderContent)">{{staskInfo.orderContent}}</text>
				</view>
			</block>
			<block v-else>
				<text class="text_txt" user-select @tap="setCopy(staskInfo.orderContent)">
					{{staskInfo.orderContent}}
				</text>
			</block>
			<!-- <view :class="showHtml?'loading_no3':''"></view> -->
		</view>
		<view v-if="staskInfo.address != ''" class="taskMap">
			<view class="huizhi_text">施工地址：</view>
			<map
				class="mapSize"
				subkey="WANBZ-6C56D-6P34Y-HWNMG-YHAH7-BJFP5"
				:latitude="defauleMap.latitude"
				:longitude="defauleMap.longitude"
				scale="17"
				:markers="markers" 
				show-location="true"
			></map>
		</view>
		<view class="steps">
			<steps :stepsData="stepsData"></steps>
		</view>
		<block v-if="staskInfo.orderVisas.length > 0">
			<view class="huizhi_css bor">
				<view class="huizhi_text">回执：</view>
				<view class="huizhi_img">
					<block
						v-for="(val,i) in staskInfo.orderVisas"
						:key='i'
					>
						<image class="hz_img" :src="val.picture" @tap="onSizeImg(val.picture)"></image>
					</block>
				</view>
			</view>
		</block>
		<block v-if="!isWZHB">
			<view class="bot_nav_list">
				<block v-if="isDriverIndex">
					<block v-if="isDriver == 'true'">
						<block v-if="staskInfo.status == 20">
							<view class="btn_css2 color5" @tap="isDriverIndexClick(1,staskInfo.id)">立即接单</view>
						</block>
						<block v-if="staskInfo.status != 20">
							<view class="btn2 btn_css color5" @tap="isDriverIndexClick(3,staskInfo)">一键导航</view>
							<view class="btn2 btn_css color5" @tap="isDriverIndexClick(2,staskInfo.id)">完工拍照</view>
							<view class="btn2 btn_css color5" @tap="isDriverIndexClick(4,staskInfo.orderContent)">联系工地</view>
						</block>
					</block>
				</block>
				<block v-else>
					<view v-if="zhipai" class="btn btn_css color5" @tap="onHandleBtn(6,staskInfo.id)">指派</view>
					<!-- /*报单系统来的不允许修改*/ -->
					<view v-if="noBianji" class="btn btn_css color2-1">编辑</view>
					<!-- /*允许修改*/ -->
					<view v-if="bianji" class="btn btn_css color5" @tap="onHandleBtn(1,staskInfo.id)">编辑</view> 
					<view v-if="shanchu" class="btn btn_css color3" @tap="onHandleBtn(2,staskInfo.id)">删除</view>
					<view v-if="cexiao" class="btn btn_css color4" @tap="onHandleBtn(3,staskInfo.id)">撤销</view>
					<view v-if="wangong" class="btn btn_css color5" @tap="onHandleBtn(4,staskInfo.id)">完工</view>
					<view v-if="zaipaiyidan" class="btn2 btn_css color5" @tap="onHandleBtn(7,staskInfo.id)">再派一单</view>
					<view v-if="addhuizhi" class="btn2 btn_css color5" @tap="onHandleBtn(5,staskInfo.id)">修改回执</view>
				</block>
			</view>
			<view v-if="is_query == 1 && addhuizhi" class="bot_nav_list">
				<view class="btn2 btn_css color5" @tap="onHandleBtn(5,staskInfo.id)">修改回执</view>
			</view>
		</block>
	</view>
</template>
<script>
	import {steps} from "@/components/steps/steps.vue"
	// import {MPHtml} from '@/components/mp-html/mp-html.vue'
	const {urlList,https,uploadImg} = require('@/static/api');
	const isPhone = /(^|\s*\+?0?0?86|\D)(1\d{2})[-\s]{0,3}(\d{4})[-\s]{0,3}(\d{4})(?=\D|$)/g
	export default {
		components:{
			steps,
			// MPHtml
		},
		data() {
			return {
				// showHtml:true,   //骨架屏显示状态
				showSiJi:false,
				id:'',
				staskInfo:{
					status:10,
					address:''
				},
				defauleMap:{
					latitude:'39.909',
					longitude:'116.39742',
				},
				markers:[],
				stepsData:[],
				zhipai:false,
				noBianji:false,
				bianji:false,
				shanchu:false,
				cexiao:false,
				wangong:false,
				zaipaiyidan:false,
				addhuizhi:false,
				
				is_query:0,		//是否是回单查询进来的 1.是
				isDriverIndex:false,   //是否是接单端进来的 
				isDriver:false,     //是否是司机查看订单详情  true.是 false.否
				isWZHB:false,       //是否是外租伙伴查看任务详情
			};
		},
		onLoad(options) {
			console.log('任务详情options',options)
			const that = this;
			that.id = options.id;
			if(options.is_query){  //回单查询  1.是
				that.is_query = options.is_query
			};
			if(options.type){
				that.isDriver = options.isDriver;
				if(options.type == 1){
					that.isDriverIndex = true;
				}else{
					that.isDriverIndex = false;
				};
			};
			that.getTaskInfo();
			uni.getStorage({
			    key: 'userinfo',
			    success: function (res) {
			        console.log('userInfo--',res.data);
					if(res.data.roleId == 1010){
						that.isWZHB = true
					}else{
						that.isWZHB = false
					}
			    }
			});
		},
		onShow() {
			uni.hideHomeButton();
		},
		methods:{
			onHandleBtn(type,id){
				const that = this;
				switch (type){
					case 1:
						console.log('编辑')
						uni.navigateTo({
							url:'/pages/dispatch/dispatch?id='+id
						})
						break;
					case 2:
						uni.showModal({
						    title: '提示',
						    content: '确认删除吗？',
							confirmText:'确定',
						    success: function (res) {
						        if (res.confirm) {
						            that.clearTask(id)
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
						break;
					case 3:
						that.backTask(id)
						break;
					case 4:
						that.overTask(id)
						break;
					case 5:
						that.putHuiZhi(id);
						break;
					case 6:
						that.zhiPai(id);
						break;
					case 7:
						uni.navigateTo({
							url:'/pages/dispatch/dispatch'
						})
						break;
					default:
						console.log('出错了！！！！！！！')
						break;
				}
			},
			// 联系电话
			callPhone(phone){
				if(phone){
					uni.makePhoneCall({
						phoneNumber: phone
					});
				}else{
					uni.showToast({
						title:'没有填写联系电话',
						icon:'none',
						duration:1500
					})
				}
			},
			// 任务详情拨打电话
			linktap (e) {
				let tel = '';
				if( isPhone.test(e)){
					e.replace(isPhone,function($,$1) {
						tel = $.replace(/[^\d]/g,"");
					});
				};	
				// const tel = e.innerText;
				uni.makePhoneCall({
				    phoneNumber: tel
				});
			    console.log('打电话事件触发：')
			},
			// 指派
			zhiPai(id){
				uni.setStorage({
					key:'taskInfo',
					data:this.staskInfo,
					success() {
						uni.navigateTo({
							url:'/pages/select-car/select-car'
						})
					}
				})
			},
			// 删除delete
			clearTask(id){
				const that = this;
				https(urlList.clearTask+'/'+id,'DELETE','','正在删除...').then(data => {
					uni.showToast({
						title:'删除成功',
						duration:1500,
					});
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2];  //上一个页面
					//修改前一页数据
					let num = prevPage.$vm.topNavList[0].num-1;
					let taskList = prevPage.$vm.taskList;
					prevPage.$vm.topNavList[0].num = num;
					prevPage.$vm.taskList.splice(taskList.findIndex(item => item.id === id), 1);
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1500
					})
				})
			},
			// 完工
			overTask(id){
				https(urlList.overTask+'/'+id,'GET','','完工中...').then(data => {
					console.log('完工',data)
					uni.showToast({
						title:'完工成功',
						duration:1500,
					})
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2];  //上一个页面
					//修改前一页数据
					let num1 = prevPage.$vm.topNavList[1].num-1;
					let num2 = prevPage.$vm.topNavList[2].num+1;
					let taskList = prevPage.$vm.taskList;
					prevPage.$vm.topNavList[1].num = num1;
					prevPage.$vm.topNavList[2].num = num2;
					prevPage.$vm.taskList.splice(taskList.findIndex(item => item.id === id), 1);
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1500
					})
				})
			},
			// 撤销backTask
			backTask(id){
				https(urlList.backTask+'/'+id,'PUT','','撤销中...').then(data => {
					console.log('撤销',data)
					uni.showToast({
						title:'撤销成功',
						duration:1500,
					})
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2];  //上一个页面
					//修改前一页数据
					let num = prevPage.$vm.topNavList[1].num-1;
					let taskList = prevPage.$vm.taskList;
					prevPage.$vm.topNavList[1].num = num;
					prevPage.$vm.taskList.splice(taskList.findIndex(item => item.id === id), 1);
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1500
					})
				})
			},
			// 显示司机
			onShowSiJi(data){
				if(data	== ""||data == null){
					uni.showToast({
						title:'暂无联系人',
						icon:'none',
						duration:1500
					})
					return;
				}
				this.showSiJi = !this.showSiJi
			},
			// 查看车辆位置
			onLookAddress(item){
				let qiPao = {
					'distance':item.distance,
					'expectArriveDate':item.expectArriveDate,
				}
				uni.navigateTo({
					url:"/map/pages/index/index?type=1010&id="+item.vehicleId+"&qiPao="+JSON.stringify(qiPao)
				})
			},
			// 接单端 进来的
			isDriverIndexClick(type,id){
				const _that = this;
				switch (type){
					case 1:
						https(urlList.orderReceiving+'/'+id,'GET','','接单中...').then(data => {
							console.log('接单端-接单',data)
							uni.showToast({
								title:'接单成功',
								duration:1500
							});
							_that.getTaskInfo();
						}).catch(err => {
							uni.showToast({
								title:err,
								icon:'none',
								duration:1500
							})
						})
						break;
					case 2:
						_that.putHuiZhi(id);
						break;
					case 3:
						console.log('一键导航')
						if(id.address == ''){
							uni.showToast({
								title:'暂无地址',
								icon:'none',
								duration:1500
							})
						}else{
							uni.openLocation({
								latitude:id.latitude,//要去的纬度-地址       
								longitude: id.longitude,//要去的经度-地址
								name: id.address,//地址名称
								success: function () {
									console.log('导航成功');
								},
								fail:function(error){
									console.log(error)
								}
							});
						}
						break;
					case 4:
						console.log('联系工地')
						let tel = '';
						if( isPhone.test(id)){
							id.replace(isPhone,function($,$1) {
								tel = $.replace(/[^\d]/g,"");
							});
						};	
						uni.makePhoneCall({
						    phoneNumber: tel
						});
						break;
				}
			},
			putHuiZhi(id){
				const _that = this;
				uni.chooseImage({
					count:1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res => {
						uni.showLoading({
							title:'正在上传'
						});
						let imgPath = res.tempFilePaths[0];
						// 压缩图片
						uni.compressImage({
							src:imgPath ,
							quality: 10,
							success: ress => {
								let img = ress.tempFilePath;
								let Key = 'dispatching/wx/upload/ordervisa/'+imgPath.substr(imgPath.lastIndexOf('/') + 1);
								uploadImg(Key,img).then(data => {
									// console.log('上传成功111',data)
									let url = data.split('/');
									var targetUrl = url[url.length-1];
									let postData = {
										'orderId':id,
										'picture':targetUrl
									};
									if(_that.staskInfo.status == 60||_that.staskInfo.status == 70||_that.staskInfo.status == 80||_that.staskInfo.status == 90){
										// orderVisa put   更新签证单
										https(urlList.orderVisa,'PUT',postData,'').then(data => {
											console.log('更新签证单',data)
											uni.hideLoading();
											uni.showToast({
												title:'更新成功',
												duration:1200
											});
											setTimeout(()=>{
												_that.getTaskInfo(1);
											},1500)
										}).catch(err => {
											uni.hideLoading();
											uni.showToast({
												title:err,
												icon:'none',
												duration:1500
											})
										})
									}else{
										https(urlList.orderSign,'POST',postData,'').then(data => {
											console.log('完工拍照',data)
											uni.hideLoading();
											uni.showToast({
												title:'上传成功',
												duration:1200
											});
											setTimeout(()=>{
												_that.getTaskInfo(1);
											},1500)
										}).catch(err => {
											uni.hideLoading();
											uni.showToast({
												title:err,
												icon:'none',
												duration:1500
											})
										})
									}
								}).catch(err => {
									uni.showToast({
										title:err,
										icon:'none',
										duration:1500
									})
								});
							}
						})
					}
				});
			},
			getTaskInfo(type){
				const that = this;
				https(urlList.getTaskInfo+'/'+this.id,'GET','','加载中...').then(data => {
					console.log('任务详情',data)
					// status  10=待指派,20=已指派,未接单,30=已接单,40=已出发,50=已到达,60=已完工,70=已签单,80=已离开,90=已评价
					// orderSource 10=录入,20=报单
					let status = data.data.status;
					let orderSource = data.data.orderSource;
					if(orderSource == 20){
						if(status == 10||status == 20||status==30||status == 40){
							that.noBianji = true;
						}else{
							that.noBianji = false;
						}
					}else{
						if(status == 10){
							that.zhipai = true;
							that.shanchu = true;
						};
						if(status == 10||status == 20||status==30||status == 40||status == 50){
							that.bianji = true;
						};
						if(status == 20||status==30||status == 40||status == 50){
							that.cexiao = true;
							that.wangong = true;
						};
						if(status==60||status==70||status == 80||status == 85||status == 90){
							that.zaipaiyidan = true;
							that.addhuizhi = true;
						};
					};
					that.staskInfo = data.data;
					that.defauleMap = {
						latitude: data.data.latitude,
						longitude: data.data.longitude,
					};
					that.markers = [{
						id: 9999,
						latitude: data.data.latitude,
						longitude: data.data.longitude,
						width: '25px',
						height: '35px',
						callout: {
							content: data.data.address,
							width:'50px',
							padding: '3px 5px 3px 5px',
							borderRadius: '5px',
							display: 'ALWAYS'
						}
					}];
					let orderStatusDates = data.data.orderStatusDates;
					if(that.is_query == 1){  //回单查询进来的  隐藏出发，到达，离开
						orderStatusDates.map( item => {
							if(item.key == "出发" || item.key == "到达" || item.key == "离开"){
								item.value = ""
							}
						})
					};
					// that.showHtml = false;
					that.stepsData = orderStatusDates.filter(item => item.value != "");
					if(type){
						setTimeout(() => {
							uni.pageScrollTo({scrollTop: 99999, duration:500});
						},500)
					}
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1500
					})
				})
			},
			onSizeImg(url){
				let imgsArray = [];
				imgsArray[0] = url;
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			setCopy(text){
				uni.setClipboardData({
				    data: text,
				    success: function () {
				        uni.showToast({
				        	title:'复制成功',
							icon:'none'
				        })
				    }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.color_blue{
	color: blue;
}
.warp{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	.top_name{
		width: 650rpx;
		margin: 0 auto;
		padding:0rpx 0rpx 30rpx 0rpx;
		border-bottom: 1rpx solid #E4E4E4FF;
		display: flex;
		flex-direction: column;
		position: relative;
		.name_top{
			width: 100%;
			height:90rpx;
			font-weight: bold;
			color: #353535;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.name_lef{
				width: calc(100% - 200rpx);
				
				display: flex;
				flex-direction: row;
				align-items: center;
				image{
					height: 40rpx;
					width: 40rpx;
				}
				.name_text{
					width: calc(100% - 50rpx);
					overflow: hidden;
					text-overflow:ellipsis ;
					white-space: nowrap;
					// border: 1rpx solid red;
					margin-left: 10rpx;
					color: #353535;
					font-weight: bold;
					font-size:30rpx;
					font-family: PingFangSC-Ultralight,ans-serif;
				}
			}
			.name_phone{
				height: 50rpx;
				width: 170rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color:#1B64F8FF;
				color: #FFFFFFFF;
				font-size: 21rpx;
				border-radius: 28rpx;
			}
		}
		.siji_list{
			position: absolute;
			right: 0rpx;
			top: 85rpx;
			width:170rpx;
			z-index: 99999;
			background-color: white;
			border: 2rpx solid #efefef;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.s_l_list{
				width: 150rpx;
				height:80rpx;
				line-height: 80rpx;
				text-align: center;
				overflow: hidden;
				text-overflow:ellipsis ;
				white-space: nowrap;
				color: #3476FE ;
				font-size: 25rpx;
			}
		}
		.name_bot{
			width:100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			color:#888888;
			.n_b_lef{
				width: calc(100% - 300rpx);
				font-size: 30rpx;
				// border: 1rpx solid red;
				display: flex;
				flex-direction: row;
				align-items: center;
				image{
					height: 35rpx;
					width: 35rpx;
					margin-right: 15rpx;
				}
			}
			.n_b_rig{
				height: 50rpx;
				width: 170rpx;
				display: flex;
				align-items: center;
				// justify-content: center;
				image{
					height:45rpx;
					width: 45rpx;
				}
				text{
					font-size: 26rpx;
					color: #3476FEFF;
					font-weight: bold;
				}
			}
			.n_b_rig2{
				height: 50rpx;
				width: 270rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				font-size: 27rpx;
				color: #4f4f4f;
			}
		}
		.text_txt{
			width:100%;
			font-size: 28rpx;
			color: #555555;
			margin-top: 20rpx;
			// white-space: nowrap;
			// text-overflow: ellipsis;
			// overflow: hidden;
			// word-break: break-all;
		}
		.loading_no1{
			width: 100%;
			height: 80rpx;
			background-color: #f3f3f3;
			position: absolute;
			top: 0;
		}
		.loading_no2{
			width: 100%;
			height: 70rpx;
			background-color: #f3f3f3;
			position: absolute;
			top: 90rpx;
			z-index: 999999;
		}
		.loading_no3{
			width: 100%;
			height:800rpx;
			background-color: #f3f3f3;
			position: absolute;
			top: 10rpx;
			// z-index: 999999;
		}
	}
	.taskMap{
		width: 650rpx;
		padding:20rpx 0rpx 20rpx 0rpx;
		border-bottom: 1rpx solid #E4E4E4FF;
		// border: 1rpx solid red;
		display: flex;
		flex-direction: column;
		.huizhi_text{
			width: 140rpx;
			font-size: 27rpx;
			font-weight: bold;
			color: #888888;
			margin-bottom:20rpx;
		}
		.mapSize{
			width: 100%;
			height:300rpx;
		}
	}
	.steps{
		width: 650rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}
	.bor{
		border-top: 1rpx solid #E4E4E4FF;
	}
	.huizhi_css{
		width: 650rpx;
		// height: 300rpx;
		padding: 40rpx 0rpx;
		margin: 0 auto;
		margin-bottom: 100rpx;
		display: flex;
		flex-direction: row;
		.huizhi_text{
			width: 120rpx;
			// border: 1rpx solid red;
			font-size: 27rpx;
			font-weight: bold;
			color: #888888;
		}
		.huizhi_img{
			width: 500rpx;
			display: flex;
			flex-direction: column;
			.hz_img{
				width: 100%;
				height: 300rpx;
			}
		}
	}
	.bot_nav_list{
		width: 100%;
		height: 100rpx;
		padding-right: 34rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		border-top: 1rpx solid #e8e8e8;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.btn_css{
			height:70rpx;
			font-size: 28rpx;
			color: white;
			border-radius: 10rpx;
			border: 1rpx solid #DCDCDC;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 30rpx;
		}
		.btn_css2{
			width:646rpx;
			height: 70rpx;
			margin-right:38rpx;
			border-radius: 16rpx;
			background-color:#3476FE ;
			color: white;
			text-align: center;
			font-size: 28rpx;
			line-height: 70rpx;
		}
		.btn{
			width: 170rpx;
		}
		.btn2{
			width: 200rpx;
		}
		.color2-1{
			background-color: #C3C3C3;
		}
		.color3{
			background-color: red;
		}
		.color4{
			background-color: #FF7B7B;
		}
		.color5{
			background-color: #1B64F8FF;
		}
	}
}
</style>
