<template>
	<view id="warp">
		<view class="content">
			<textarea 
				v-model="orderContent" 
				maxlength=600 
				placeholder="请输入或粘贴您的派工任务信息"
				@blur="onTextOk"
			/>
			<view class="clear_text" @tap="clearText">
				<uni-icons type="trash" size="20"></uni-icons> 清空
			</view>
		</view>
		<view class="cen_list">
			<view v-if="isOpenDispatch" class="t_login_passList" >
				<image class="input_icon" :src="projectName?'/static/images/dispatch/name1.png':'/static/images/dispatch/name.png'"></image>
				<input
					class="input_css5"
					:class="showRed?'color_red':'color_blue'"
					placeholder-style="color:#515151"
					v-model="projectName"
					border="none"
					placeholder="工程名称"
					@blur="onGcOk"
				></input>
				<view class="code5" @tap="onChangeRwInfo(1)">
					<uni-icons type="forward" color="#ccc" size="20"></uni-icons>
				</view>
			</view>
			<view v-if="isOpenRwCar" class="t_login_passList" @tap="onChangeRwInfo(2)">
				<image class="input_icon" :src="vehicleType?'/static/images/dispatch/car1.png':'/static/images/dispatch/car.png'"></image>
				<input
					class="input_css3"
					placeholder-style="color:#515151"
					v-model="vehicleTypeName"
					disabled
					border="none"
					placeholder="任务车型"
				></input>
				<view class="code3">
					<uni-icons type="forward" color="#ccc" size="20"></uni-icons>
				</view>
			</view>
			<view class="t_login_passList">
				<view class="input_css4">
					<picker-time
						style="width: 100%;height: 100%;"
						ref="time"
						placeholder="到场时间"
						:defaultValue="arriveDate"
						fields="minute"
						@change="onChangeTime"
					></picker-time>
				</view>
			</view>
			<view class="t_login_passList" @tap="onChangeAddress">
				<image class="input_icon" :src="address?'/static/images/dispatch/address1.png':'/static/images/dispatch/address.png'"></image>
				<input
					class="input_css3"
					placeholder-style="color:#515151"
					v-model="address"
					disabled
					border="none"
					placeholder="施工地点"
				></input>
				<view class="code3">
					<uni-icons type="forward" color="#ccc" size="20"></uni-icons>
				</view>
			</view>
			<!-- 已指派编辑任务显示 20 30 40 50 -->
			<block v-if="status == 20||status == 30||status == 40||status == 50">
				<view class="t_login_passList" @tap="onChangeRwInfo(3)">
					<image class="input_icon" :src="vehicleCode?'/static/images/dispatch/carCode1.png':'/static/images/dispatch/carCode.png'"></image>
					<input
						class="input_css3"
						placeholder-style="color:#515151"
						v-model="vehicleCode"
						disabled
						border="none"
						placeholder="施工车辆"
					></input>
					<view class="code3">
						<uni-icons type="forward" color="#ccc" size="20"></uni-icons>
					</view>
				</view>
				<view class="t_login_passList" @tap="onChangeRwInfo(4)">
					<image class="input_icon" :src="orderVehiclePerson?'/static/images/dispatch/people1.png':'/static/images/dispatch/people.png'"></image>
					<input
						class="input_css3"
						placeholder-style="color:#515151"
						v-model="orderVehiclePerson"
						disabled
						border="none"
						placeholder="车组人员"
					></input>
					<view class="code3">
						<uni-icons type="forward" color="#ccc" size="20"></uni-icons>
					</view>
				</view>
			</block>
		</view>
		<view class="mar_bot_view"></view>
		<view class="bot_button">
			<view class="btn_css">
				<block v-if="id != 0 && status != 10">
					<view class="now_btn2" @tap="registerOk(2)">保存修改</view>
				</block>
				<block v-if="id == 0 || status == 10">
					<view class="now_btn" @tap="registerOk(0)">保存待派</view>
					<view class="now_btn" @tap="registerOk(1)">一键指派</view>
				</block>
			</view>
		</view>
		<view :class="showHtml?'loading_no3':''"></view>
		<uni-popup ref="popup" type="dialog" style="z-index: 99999;">
		    <uni-popup-dialog 
				mode="base" 
				title="是否使用粘贴板中的信息？"
				:duration="2000" 
				:before-close="true" 
				@close="closePopup" 
				@confirm="confirmPopup"
			>
				<view class="popup_css">
					<view class="popup_css_top">
						{{fzText}}
					</view>
					<view class="popup_css_bot">
						 <label class="radio" @tap="onChangeFz">
							 <radio 
								style="transform:scale(0.8)" 
								color="#007AFF" 
								:checked="isFz" 
							/>下次不在提醒
						</label>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script>
	import {PickerTime} from '@/components/picker-time-dispatch/picker-time-dispatch.vue';
	const {urlList,https} = 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;
	const isGc    = /工程名称(:|：)(.*?)[\s]/g;
	const isGc2   = /工程名称(:|：)/g;
	const isXm    = /项目名称(:|：)(.*?)[\s]/g;
	const isXm2   = /项目名称(:|：)/g;
	const isSgdw  = /施工单位(:|：)(.*?)[\s]/g;
	const isSgdw2 = /施工单位(:|：)/g;
	const clearN  = /\s/g;    //去空格
	export default {
		components:{
			PickerTime
		},
		data() {
			return {
				showRed:false,   //工程名称识别到显示蓝色，没有识别到显示红色
				showHtml:true,
				fzText:'',
				isFz:false,
				isOpenDispatch:true,
				isOpenRwCar:true,
				orderContent:'',
				projectId:0,
				constructionId:0,
				constructionName:'',
				projectName:'',
				arriveDate:'',
				address:'',
				salesmanId:0,
				longitude:'0',
				latitude:'0',
				id:10,
				vehicleId:0,
				vehicleCode:0,
				vehicleType:'',  //任务车型id
				vehicleTypeName:'',//任务车型名称
				orderVehiclePerson:'',   //拼接的车组人员
				orderVehicles:[],
				isOutside:false,
				status:1,
				noShowCopy:true,
				gcList:[],  //工程列表
				sgdwList:[],  //施工单位
				isReplaceOrderVehicle:false,   //默认车组人员和选择的车组人员是否一致
				
				old_projectName_sb:'',
			};
		},
		onLoad(options) {
			const that = this;
			that.id = options.id?options.id:0;
			uni.getStorage({
				key:"userCompany",
				success(res) {
					that.isOpenDispatch = res.data.isOpenDispatch;
					that.isOpenRwCar = res.data.isOpenVehicleType;
				}
			});
			console.log('一键派工options',options)
			that.get_gc_list();
			if(options.id){
				https(urlList.getTaskInfo+'/'+options.id,'GET','','').then(data => {
					console.log('编辑任务',data)
					uni.setNavigationBarTitle({
					　　title:'任务变更'
					});
					that.orderContent = data.data.orderContent;
					that.projectId = data.data.projectId;
					that.projectName = data.data.projectName;
					that.salesmanId = data.data.salesmanId;
					that.arriveDate = data.data.arriveDate;
					that.address = data.data.address;
					that.constructionId = data.data.constructionId;
					that.constructionName = data.data.constructionName;
					that.longitude = data.data.longitude;
					that.latitude = data.data.latitude;
					that.vehicleId = data.data.vehicleId;
					that.vehicleCode=data.data.vehicleCode;
					that.vehicleType = data.data.vehicleType;
					that.vehicleTypeName = data.data.vehicleTypeName;
					that.orderVehiclePerson = data.data.orderVehiclePerson;
					that.orderVehicles = data.data.orderVehicles;
					that.isOutside = data.data.isOutside;
					that.status = data.data.status;
					that.showHtml = false;
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1500
					})
				})
			}else{
				that.showHtml = false
			}
		},
		onShow() {
			const that = this;
			if(that.id == 0&&this.noShowCopy){
				uni.getStorage({
				    key: 'isFz',
				    success: function (ress) {
						console.log('copy缓存',ress)
				        if(!ress.data){
							uni.getClipboardData({
								success: function (res) {
									uni.hideToast();
									if(res.data == ''){
										return;
									}else{
										that.fzText = res.data;
										that.$refs.popup.open()
									}
								}
							});
						}
				    }
				});
			};
		},
		onHide(){
			console.log('页面隐藏')
		},
		methods:{
			registerOk(type){
				const that = this;
				if(that.orderContent == ''){
					uni.showToast({
						title:'请填写派工内容',
						icon:'none',
						duration:1500
					})
					return;
				};
				if(that.isOpenRwCar&&that.vehicleType == ''){
					uni.showToast({
						title:'请选择任务车型',
						icon:'none',
						duration:1500
					})
					return;
				};
				let orderContent = that.orderContent;
				if( !isPhone.test(orderContent) ){
					uni.showToast({
						title:'请填写报单联系人',
						icon:'none',
						duration:1500
					})
					return;
				}else{
					let tel = [];
					orderContent.replace(isPhone,function($,$1) {
						tel.push($);
					});
					console.log('匹配的手机号：',tel)
					if(tel.length > 1){
						uni.showToast({
							title:'派工信息中只能有一个报单联系人',
							icon:'none',
							duration:2000
						})
						return;
					}
				};
				if(that.arriveDate == ''){
					uni.showToast({
						title:'请选择到场时间',
						icon:'none',
						duration:1500
					})
					return;
				};
				that.upDispatch(type,orderContent);
			},
			upDispatch(type,orderContent){
				const that = this;
				let postData = {
					"projectId": that.projectId,
					"constructionId":that.constructionId,
					"constructionName":that.constructionName,
					"projectName": that.projectName,
					"salesmanId":that.salesmanId,
					"arriveDate": that.arriveDate,
					"longitude": that.longitude,
					"latitude": that.latitude,
					"address": that.address,
					"orderContent":orderContent,
					"id":that.id,
					"vehicleId":that.vehicleId,
					"vehicleCode":that.vehicleCode,
					"vehicleType":that.vehicleType?that.vehicleType:0,
					"userId":that.vehicleId,
					"orderVehicles":that.orderVehicles,
					"isOutside":that.isOutside,
					"status":that.status,
				};
				switch (type){
					case 0:
						https(urlList.addTaskList,'POST',postData,'保存中...').then(data => {
							uni.showToast({
								title:'保存成功',
								duration:1500
							});
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/taskList/taskList'
								})
							},1500)
						}).catch(err => {
							uni.showToast({
								title:err,
								icon:'none',
								duration:1500
							})
						})
						break;
					case 1:
						uni.setStorage({
							key:'taskInfo',
							data:postData,
							success() {
								uni.navigateTo({
									url:'/pages/select-car/select-car?status='+that.status+'&isOutside='+that.isOutside
								})
							}
						})
						break;
					case 2:
						postData.isReplaceOrderVehicle = that.isReplaceOrderVehicle;
						postData.orderVehiclePerson = that.orderVehiclePerson;
						postData.orderVehicles = that.orderVehicles;
						https(urlList.addDisPatch,'POST',postData,'正在保存...').then(data => {
							console.log('编辑保存任务',data)
							uni.showToast({
								title:'修改成功',
								icon:'none',
								duration:1500
							})
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/taskList/taskList'
								})
							},1500)
						}).catch(err => {
							uni.showToast({
								title:err,
								icon:'none',
								duration:1500
							})
						})
						break;
				}
			},
			clearText(){
				this.orderContent = '';
			},
			onChangeRwInfo(num){
				const that = this;
				that.noShowCopy = false;
				switch (num){
					case 1:
						uni.navigateTo({
							url:'/pages/engineering/engineering?isSelect=1'
						})
						break;
					case 2:
						uni.navigateTo({
							url:'/pages/taskcar_models/taskcar_models?isSelect=1'
						})
						break;
					case 3:
						console.log('选择车辆')
						uni.navigateTo({
							url:'/pages/select-car/select-car?status='+that.status+'&isOutside='+that.isOutside+'&isChange=true'
						})
						break;
					case 4:
						console.log('选择车组人员')
						uni.navigateTo({
							url:'/pages/vehicle_personnels/vehicle_personnels?isDispatch=1&carID='+this.vehicleId+
								'&carCode='+this.vehicleCode+
								'&selectList='+ JSON.stringify(this.orderVehicles)+
								'&isChange=true'
						});
						break;
				}
			},
			onChangeTime(date) {
				let value = date.f3;
				this.arriveDate = value;
			},
			onChangeAddress(){
				const _that = this;
				_that.noShowCopy = false;
				uni.chooseLocation({
				    success: function (res) {
						let {longitude,latitude} = res;
						https(urlList.getLocationName+'/'+longitude+'/'+latitude,'GET','','').then(data => {
							// console.log('地址名称',data)
							_that.address = data.data;
							_that.longitude = longitude;
							_that.latitude = latitude;
						}).catch(err => {
							uni.showToast({
								title:err,
								icon:'none',
								duration:1500
							})
						})
				    },fail() {
				    	console.log('拒绝')
						// 获取用户当前授权设置
						wx.getSetting({
							success: function(res) {
								var statu = res.authSetting;
								if (!statu['scope.userLocation']) {
									wx.showModal({
										title: '是否授权当前位置',
										content: '需要获取您的地理位置，请确认授权，否则无法选择施工地点',
										success(tip) {
											if (tip.confirm) {
												// 打开用户授权设置
												wx.openSetting({
													success: function(data) {
														if (data.authSetting["scope.userLocation"] === true) {
															wx.showToast({
																title: '授权成功',
																icon: 'success',
																duration: 1000
															})
														}
													}
												})
											} else {
												wx.showToast({
													title: '授权失败',
													icon: 'none',
													duration: 1000
												})
											}
										}
									})
								}
							}
						})
				    }
				});
			},
			onChangeFz(){
				this.isFz = !this.isFz
			},
			closePopup() {
				this.$refs.popup.close()
			},
			// 确认使用粘贴内容
			confirmPopup() {
				this.orderContent = this.fzText;
				uni.setStorage({
					key:'isFz',
					data:this.isFz,
				});
				this.textIncludesGc();
				this.$refs.popup.close();
			},
			// 任务输入框 失去焦点
			onTextOk(){
				console.log('输入任务失去焦点')
				this.textIncludesGc();
			},
			// 工程名称输入框失去焦点
			onGcOk(){
				const that = this;
				const projectName = that.projectName;
				if(projectName != ''){
					const gcList = that.gcList;
					for (let i = 0; i < gcList.length; i++) {
						let list = gcList[i].list;
						for (let j = 0; j < list.length; j++) {
							if(projectName.includes(list[j].projectName)){
								that.projectId = list[j].id;
								that.constructionId = list[j].constructionId;
								that.projectName = list[j].projectName;
								that.address = list[j].address;
								that.longitude = list[j].longitude;
								that.latitude = list[j].latitude;
								that.salesmanId = list[j].salesmanId;
								that.showRed = false;
								console.log('匹配到了工程名称',list[j]);
								return;
							}
						}
					};
					console.log('没有匹配到工程名称');
					that.showRed = true;
					that.projectId = 0;
					that.address = "";
					that.salesmanId = 0;
					that.constructionId = 0;
				}
			},
			// 识别对比
			textIncludesGc(){
				const that = this;
				const text = that.orderContent;
				let new_projectName_sb = '';
				let constructionName_sb = '';
				let gcName = text.match(isGc);
				if(gcName){
					new_projectName_sb = gcName[0].replace(isGc2,"").replace(clearN,"");
					console.log('工程名称----',new_projectName_sb)
				}else{
					let xmName = text.match(isXm);
					if(xmName){
						new_projectName_sb = xmName[0].replace(isXm2,"").replace(clearN,"");
						console.log('项目名称----',new_projectName_sb)
					}
				};
				console.log(that.old_projectName_sb,new_projectName_sb)
				// 判断是否修改了工程名称
				if(new_projectName_sb != that.old_projectName_sb){
					that.old_projectName_sb = new_projectName_sb;
					console.log('俩次输入工程名称不一样，需要重新识别')
					if(new_projectName_sb != ''){
						let sgdwName = text.match(isSgdw);
						if(sgdwName){
							constructionName_sb = sgdwName[0].replace(isSgdw2,"").replace(clearN,"");
							console.log('施工单位----',constructionName_sb)
						};
					};
					that.constructionName = constructionName_sb;
					if(new_projectName_sb != '' && constructionName_sb != ''){
						const gcList = that.gcList;
						for (let i = 0; i < gcList.length; i++) {
							let list = gcList[i].list;
							for (let j = 0; j < list.length; j++) {
								if(new_projectName_sb.includes(list[j].projectName)){
									that.projectId = list[j].id;
									that.constructionId = list[j].constructionId;
									that.projectName = list[j].projectName;
									that.address = list[j].address;
									that.longitude = list[j].longitude;
									that.latitude = list[j].latitude;
									that.salesmanId = list[j].salesmanId;
									that.showRed = false;
									console.log('匹配到了工程名称',list[j]);
									return;
								}
							}
						};
						console.log('没有匹配到工程名称');
						that.showRed = true;
						that.projectName = new_projectName_sb;
						that.projectId = 0;
						that.address = "";
						that.salesmanId = 0;
						that.constructionId = 0;
					}
				}
			},
			// 获取工程列表
			get_gc_list(){
				let url = urlList.getEngineering+'?key=&currentPage=1&pageSize=20&isEnabled=1';
				https(url, 'GET', '', '').then(res => {
					 this.gcList = res.data.projectList.filter(item => {
						 if(item.list.length > 0) return item;
					 })
				}).catch(err => {
					console.log(err)
				})
			},
		}
	}
</script>
<style>
.uni-popup-dialog>.uni-dialog-title>.uni-dialog-title-text{
	color:#555555;
	font-weight: bold;
}
</style>
<style lang="scss" scoped>
	
#warp{
	width: 750rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	.content{
		width: 100%;
		height: 500rpx;
		position: relative;
		box-sizing: border-box;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		textarea{
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding: 20rpx;
			background:#F5F5F5;
			// border: 1rpx solid #dadadaff;
			border-radius: 16rpx;
			font-size: 28rpx;
		}
		.input_placeholder{
			display: flex;
			flex-direction: column;
			line-height: 40rpx;
			// border: 1rpx solid red;
			font-size: 27rpx;
			color:#b6b6b6 ;
			position: absolute;
			left: 50rpx;
			top:50rpx;
		}
		.clear_text{
			padding: 5rpx 15rpx;
			background-color: white;
			color: #414141;
			font-size: 25rpx;
			border-radius: 5rpx;
			position: absolute;
			right: 40rpx;
			bottom:40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			z-index: 99;
		}
	}
	.cen_list{
		.t_login_passList{
			width:690rpx;
			padding: 20rpx 0rpx;
			border-bottom: 1rpx solid #e6e6e6;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			.input_icon{
				width: 70rpx;
				height: 70rpx;
			}
			.input_css3{
				height: 70rpx;
				width: 530rpx;
				color: #3476FE;
			}
			.input_css4{
				height: 70rpx;
				// border: 1rpx solid red;
				width:100%;
			}
			.input_css5{
				height: 70rpx;
				width:510rpx;
			}
			.color_red{
				color: red;
			}
			.color_blue{
				color: #3476FE;
			}
			.input_css{
				height: 70rpx;
				width: 530rpx;
				// border: 1rpx solid red;
				display: flex;
				align-items: center;
				color: #3476FE;
			}
			.code3{
				width: 50rpx;
				// border: 1rpx solid red;
				display: flex;
				justify-content: flex-end;
			}
			.code5{
				width: 70rpx;
				height:60rpx;
				// border-radius: 10rpx;
				// background-color: #007AFF;
				// color: white;
				font-size: 25rpx;
				display: flex;
				justify-content:flex-end;
				align-items: center;
			}
		}
	}
	.mar_bot_view{
		height:160rpx;
		width: 100%;
	}
	.loading_no3{
		height:85rpx;
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 28rpx;
	}
	.bot_button{
		width: 750rpx;
		z-index: 9999;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0rpx;
		border-top: 1rpx solid #e7e7e7;
		background-color: white;
		padding: 10rpx 0rpx 0rpx 0rpx;
		.btn_css{
			width: 650rpx;
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			// z-index: 99999;
			.now_btn{
				display:flex;
				width: 290rpx;
				height: 82rpx;
				border-radius: 16rpx;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				background-color:#1B64F8FF;
				color: #f8f8f8ff;
			}
			.now_btn2{
				display:flex;
				width: 100%;
				height: 82rpx;
				border-radius: 16rpx;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				background-color:#1B64F8FF;
				color: #f8f8f8ff;
			}
		}
	}
	.popup_css{
		width: 600rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.popup_css_top{
			max-height:400rpx;
			width:550rpx;
			overflow-y: auto;
			// border: 1rpx solid red;
			color: #888888;
		}
		.popup_css_bot{
			width: 100%;
			// border: 1rpx solid red;
			margin-top: 20rpx;
			margin-bottom: -30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			color: #626262;
			.radio{
				font-size: 27rpx;
			}
		}
	}
}
</style>