<template>
	<view class="container">
		  <view class='info_container'>
		<view class="item item_line">
			<view class="itemname redMi">任务主题</view>
			<view class="itemtext">
				<input class="iteminput" placeholder="请输入任务主题"  v-model="taskInfo.title" @change='dataChange'/>
			</view>
		</view>
		<view class="item">
			<view class="itemname redMi">任务类型</view>
			<view class="itemtext">
				<input class="iteminput InputRightMargin" disabled placeholder="请选择"   :value="taskInfo.taskTypeName"/>
				<uni-icons type="arrowright" class="myarrowright" style="right: 0px;"></uni-icons>
				<picker class="picker_"  @change="bindPickerTaskType($event)"  :range="arrayTaskType"> </picker>
			</view>
		</view>
		<view class="item">
			<view class="itemname redMi">任务等级</view>
			<view class="itemtext">
				<input class="iteminput InputRightMargin" disabled placeholder="请选择"  :value="taskInfo.taskLevelName"/>
				<uni-icons type="arrowright" class="myarrowright" style="right: 0px;"></uni-icons>
				<picker class="picker_"  @change="bindPickerTaskLevel($event)"  :range="arrayTaskLevel"> </picker>
			
			</view>
		</view>
		<view class="item item_line" @click="onShowDatePicker">
			<view class="itemname redMi">要求完成时间</view>
			<view class="itemtext">
				<view >
					<input class="iteminput InputRightMargin" disabled placeholder="请选择" :value='taskInfo.expireDate'/>
					<img src="../../static/img/dateIcon.png" class="dateIcon" />
				</view>
			</view>
		</view>
		
		<view class="item item_line item_textarea">
			<view class="itemname">详细描述</view>
			<textarea class="textarea" placeholder="请详细描述" v-model="taskInfo.detail" @change='dataChange'></textarea>
		</view>
		<view class="photo_container item_line">
			<view class="pzqd">照片上传</view>
			<view class="photo_out">
				<view class="imgwrap" v-for="(items,index) in imgsrc_list_local" :key="index">
					<view class="myimgBox" @click="reUpload(index)">
						<view class="img">
							<img class="uploadimg" :src="items" />
							<view class="cxsc">重新上传</view>
						</view>
					</view>
					<img src="../../static/img/delete.png" class="deleteimg" @click="deleteImg(index)" />
				</view>
				<view class="imgwrap" @click="chooseImg()" >
					<view class="myimgBox">
						<view class="img upload_btn">
							<img src="../../static/img/uploadimg.png" />
							<view class="sctp">上传图片</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="itemname redMi">责任人</view>
			<view class="itemtext" @click="selectPeople1()" >
				<input class="iteminput InputRightMargin" disabled placeholder="请选择责任人" :value='taskInfo.heldPersonName'/>
				<img src="../../static/img/personlistIcon.png" class="dateIcon" />
			</view>
		</view>
		<view class="item item_line">
			<view class="itemname">抄送人</view>
			<view class="itemtext" @click="selectPeople2()" >
				<input class="iteminput InputRightMargin" disabled placeholder="请选择抄送人" :value="formatCsrName(targetList)"/>
				<img src="../../static/img/personlistIcon.png" class="dateIcon" />
			</view>
		</view>
		<view class="fixMargin"></view>
		<view class="bottom_btn_container">
			<view class="bottom_btn_out">
				<view class="bottom_btn"  @click="toBack">取消</view>
					<!-- <view class="bottom_btn"  @click="goAddRepair">提交</view> -->
					<button class="bottom_btn"  @click="goAddRepair" :disabled="isDisabled">提交</button>
				</view>
			</view>
		<mx-datepicker type="datetime" :value="taskInfo.expireDate" :show="showPicker" @confirm="onSelected" @cancel="onSelected"></mx-datepicker>
		
		<chooseUserSingle v-if="show_search_user1" @change="getUser"></chooseUserSingle>
		<chooseUserMulti v-if="show_search_user2" @change="getUser2"></chooseUserMulti>
		</view>
	</view>
</template>

<script>
	import {
		config
	} from '../../request/js/config.js'
	import chooseUserSingle from '@/components/system/chooseUserSingle.vue'
	import mxDatepicker from '@/components/mx-datepicker/mx-datepicker.vue'
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import chooseUserMulti from '@/components/system/chooseUserMulti.vue'
	export default {
		components: {
			mxDatepicker, 
			uniIcons,
			chooseUserSingle,chooseUserMulti
		},
		data() {
			return {
				taskType_list:[],
				arrayTaskType:[],
				taskLevel_list:[],
				arrayTaskLevel:[],
				chooseUserVisible: false,
				config:config,
				task_level:[],
				task_type:[],
				imgsrc_list: [],
				imgsrc_list_local: [],
				showPicker: false,
				isDisabled: false,
				deepLength:1,
				taskInfo:{
					title:"",
					expireDate:'',
					detail:'',
					taskTypeName:'',
					taskType:'',
					taskLevelName:'',
					taskLevel:''
				},
				zrr:{},
				csr:[],
				id:'',
				targetList: [],
				show_search_user1:false,
				show_search_user2:false,
			}
		},
		onLoad(option) {
			var _this = this;
			//初始化获取 任务等级数据字典。
			this.$http.request({
				url: '/apis/dict/getDictsByType',
				method: 'post',
				params: {
					type: "task_type"
				},
			}).then(res => {
				if (res) {
					if (res.data.code == 0) {
						this.taskType_list=res.data.datas;
						this.taskType_list.forEach(item=>{
							this.arrayTaskType.push(item.name);
							
						})
					}
				}
			});
			//初始化获取 任务等级数据字典。
			this.$http.request({
			  url: '/apis/dict/getDictsByType',
			  params: {
			    type: 'task_level'
			  },
			}).then(res=>{
				if (res) {
					if (res.data.code == 0) {
						this.taskLevel_list=res.data.datas;
						this.taskLevel_list.forEach(item=>{
							this.arrayTaskLevel.push(item.name);
							
						})
					}
				}
			}).catch(err=>{
				console.log(err);
			});
		},
		watch:{
			
		},
		methods: {
			bindPickerTaskType: function(e) {
				this.taskInfo.taskTypeName=this.arrayTaskType[e.target.value]
				this.taskInfo.taskType=this.taskType_list[e.target.value].id
			      },
			bindPickerTaskLevel: function(e) {
				this.taskInfo.taskLevelName=this.arrayTaskLevel[e.target.value]
				this.taskInfo.taskLevel=this.taskLevel_list[e.target.value].id
			      },
			getUser(val) {
				this.show_search_user1 = false
				if (val) {
					this.$set(this.taskInfo, "heldPerson", val.userId)
					this.$set(this.taskInfo, "heldPersonName", val.NAME)
				}
			},
			getUser2(newv){
				this.show_search_user2 = false
					var detail = [];
					newv.forEach(item=>{
						let obj = {userId: item.userId, name: item.NAME};
						detail.push(obj);
					})
					if(newv.length>0){
						this.targetList=detail
						}
			},
			selectPeople1(){
				this.show_search_user1=true;
			},
			selectPeople2(data){
				this.show_search_user2=true;
			},
			formatCsrName(data){
				var returnName = '';
				for(var i=0;i<data.length;i++){
					if(i == 3){
						returnName += data[i].name+'等等';
						 break;
					}else{
						returnName += data[i].name+','
					}
				}
				returnName = returnName.substring(0,returnName.length-1);
				return returnName;
			},
			onShowDatePicker() { //显示
				this.showPicker = true;
			},
			onSelected(e) { //选择
				this.showPicker = false;
				var _this = this;
				if (e) {
					this.taskInfo.expireDate = e.value+':00';
				}
			},
			dataChange:function(){
			},
			//上传
			chooseImg() {
				this.uploadImg();
			},
			//重新上传
			reUpload(index) {
				this.uploadImg(index);
			},
			uploadImg(indexnum) {
				var _this = this;
				//#ifdef APP-PLUS
				var count_ = 9;
				//#endif
				//#ifndef APP-PLUS
				var count_ = 1;
				//#endif
				if (indexnum != undefined) {
					count_ = 1;
				}
				uni.chooseImage({
					count: count_,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						//#ifdef APP-PLUS
						let imgs = chooseImageRes.tempFilePaths.map((value, index) => {
							return {
								name: "file" + (index + 1), //注意这一行，uni的hello的示例中，这里为key名+index，这样是无法和使用一个固定key名接多个文件的php接口对接上的改为数组下标形式的字符串就解决这个问题了。其效果等同于在html页面上多个同name文件域同时提交表单。  
								uri: value
							}
						});
						uni.uploadFile({
							url: config.baseURL + '/apis/file/uploadMulti', //接口地址
							files: imgs,
							fileType: "image",
							name: 'files',
							success: (uploadFileRes) => {
								var arr = [];
								for (var i = 0; i < JSON.parse(uploadFileRes.data).result.length; i++) {
									arr.push(JSON.parse(uploadFileRes.data).result[i].filePath);
								}
								if (indexnum != undefined) { //是重新上传
									_this.imgsrc_list[indexnum] = arr[0]
									_this.imgsrc_list_local[indexnum] = chooseImageRes.tempFilePaths[0]
								} else {
									_this.imgsrc_list = _this.imgsrc_list.concat(arr);
									_this.imgsrc_list_local = _this.imgsrc_list_local.concat(chooseImageRes.tempFilePaths);

								}
								_this.$forceUpdate();
								taskInfo.imgsrc_list = _this.imgsrc_list;;
								taskInfo.imgsrc_list_local = _this.imgsrc_list_local;
								uni.setStorage({
								    key: 'taskInfo',
								    data: taskInfo,
								    success: function () {

								    }
								});
							},
							fail:function(){
								uni.showToast({
									title:'上传图片失败',
									duration: 2000,
									icon:"none"
								});
							}
						});
						//#endif
						//#ifndef APP-PLUS
						uni.uploadFile({
							url: config.baseURL + '/apis/file/upload', //接口地址
							filePath: tempFilePaths[0],
							fileType: "image",
							name: 'file',
							success: (uploadFileRes) => {
								var arr = [];
								if (indexnum != undefined) { //是重新上传
									_this.imgsrc_list[indexnum] =JSON.parse(uploadFileRes.data).filePath;
									_this.imgsrc_list_local[indexnum] = chooseImageRes.tempFilePaths[0];
								} else {
									_this.imgsrc_list.push(JSON.parse(uploadFileRes.data).filePath)
									_this.imgsrc_list_local.push(chooseImageRes.tempFilePaths)
								}
								_this.$forceUpdate();
								var taskInfo =  uni.getStorageSync('taskInfo');
								if(!taskInfo){
									taskInfo = {}
								}
								taskInfo.imgsrc_list = _this.imgsrc_list;;
								taskInfo.imgsrc_list_local = _this.imgsrc_list_local;
								uni.setStorage({
								    key: 'taskInfo',
								    data: taskInfo,
								    success: function () {

								    }
								});
							},
							fail:function(){
								uni.showToast({
									title:'上传图片失败',
									duration: 2000,
									icon:"none"
								});
							}
							
						});
						//#endif
					}
				});
			},
			//删除图片
			deleteImg(index) {
				this.imgsrc_list.splice(index, 1);
				this.imgsrc_list_local.splice(index, 1);
				this.$forceUpdate();
				var taskInfo =  uni.getStorageSync('taskInfo');
				if(!taskInfo){
					taskInfo = {}
				}
				taskInfo.imgsrc_list = this.imgsrc_list;;
				taskInfo.imgsrc_list_local = this.imgsrc_list_local;
				uni.setStorage({
				    key: 'taskInfo',
				    data: taskInfo,
				    success: function () {

				    }
				});
			},
			//点击暂存和确认提交 需要进行的操作。
			goAddRepair(){
				var url = '/apis/taskMain/save'
				var _this = this;
				//在这里是抄送人数据。
				var carbonCopyRecipients = []
				if(this.targetList.length>0){
					this.targetList.forEach((vals,index)=>{
						carbonCopyRecipients.push(vals.userId);
					});
				}
				if(!(this.taskInfo && this.taskInfo.title)){
					uni.showToast({
						    title: '请填写任务主题',
						    duration: 2000,
							icon:"none"
						});
					return false;
				}
				if(!(this.taskInfo && this.taskInfo.taskType)){
					uni.showToast({
						    title: '请选择任务类型',
						    duration: 2000,
							icon:"none"
						});
					return false;
				}
				if(!(this.taskInfo && this.taskInfo.taskLevel)){
					uni.showToast({
						    title: '请选择任务等级',
						    duration: 2000,
							icon:"none"
						});
					return false;
				}
				if(!(this.taskInfo && this.taskInfo.expireDate)){
					uni.showToast({
						    title: '请选择要求完成时间',
						    duration: 2000,
							icon:"none"
						});
					return false;
				}
				if(!this.taskInfo.heldPerson){
					uni.showToast({
						    title: '请选择责任人',
						    duration: 2000,
							icon:"none"
						});
					return false;
				}
				if(this.isDisabled) {
					return
				  }
				this.isDisabled = true
				//调取接口进行保存。
				this.$http.request({
				  url: url,
				  params:{
					  title:this.taskInfo.title,
					  taskType:this.taskInfo.taskType,
					  taskLevel:this.taskInfo.taskLevel,
					  expireDate:this.taskInfo.expireDate,
					  detail:this.taskInfo.detail,
					  ccList:carbonCopyRecipients, // 逗号隔开。
					  heldPerson:this.taskInfo.heldPerson,
					  taglocationappearanceImage:this.imgsrc_list,
					  id:this.taskInfo.id||''
				  }
				}).then(res=>{
					this.isDisabled = false
					if(res.data.code == 0){
						uni.showToast({
							title: '操作成功',
							duration: 	1000,
							icon:"none"
						});
						setTimeout(function(){
							uni.navigateTo({
								url: "../index/index"
							});
						},500)
					}
				}).catch(err=>{
					uni.showToast({
						title: '操作失败',
						duration: 	2000,
						icon:"none"
					});
				});
			},
			toBack(){
				uni.navigateTo({
					url: "../index/index"
				});
			}
		},
		onBackPress(options) { //取消默认的返回事件.用来返回上一页时重新加载页面，删除本地缓存的巡检操作
			uni.navigateTo({
				url: "../index/index"
			});
			return true;

		},
	}
</script>
<style scoped>
	.container{
		position: relative;
		padding-bottom: 80px;
		    overflow: auto;
		    background-color: #f3f3f3;
		    box-sizing: border-box;
	}
	.info_container{
		position: relative;
		justify-content: center;
		flex-wrap: wrap;
		    width: calc(100% - 40px);
		    margin: auto;
		    font-size: 15px;
	}
	.redMi:before {
	    position: absolute;
	    content: '*';
	    color: #FF0000;
	    left: 0px;
	}
	.redMi{
		padding-left: 15px;
	}
	
		.bottom_btn_container{
			position: fixed;
			bottom:0;
			width:100%;
			left: 0;
			height: 70px;
			background-color: #dadada;
		}
		.bottom_btn_out{
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.bottom_btn{
			position: relative;
			margin: 0 10px;
			/* width: 30%; */
			width: 30%;
			height: 60px;
			line-height: 60px;
			text-align: center;
			font-size: 25px;
			color: #333;
			top:5px;
			letter-spacing: 4px;
			border-radius: 4px;
		}
		.bottom_btn:nth-child(1){
			background-color: #fff;
			border: 2px solid #007AFF;
			color: #007AFF;
			box-sizing: border-box;
			/* box-shadow: 3px 3px 10px rgba(160, 160, 159,0.2) inset,-3px -3px 10px rgba(160, 160, 159,0.2) inset; */
		}
		.bottom_btn:nth-child(2){
			color: #fff;
			background-color: #007AFF;
			/* box-shadow: 3px 3px 10px rgba(16, 36, 177,0.2) inset,-3px -3px 10px rgba(16, 36, 177,0.2) inset; */
		}
		.InputRightMargin {
		    padding-right: 25px;
		}
		.myarrowright {
		    font-size: 16px !important;
		    position: absolute;
		    right: 10px;
		    line-height: 50px !important;
		    top: 0;
		}
		.picker_{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
		}
	/*设备维修填写信息模块 公共样式  开始*/
	.item {
		position: relative;
		overflow: auto;
		width: 100%;
		min-height: 50px;
		background-color: #fff;
		border-bottom: 1px solid #EDEDED;
	}
	
	.item_line {
		margin-bottom: 10px;
		border-bottom: none;
	}
	
	.item_textarea {
		height: 143px;
	}
	
	.itemname {
		position: absolute;
		font-size: 15px;
		left: 15px;
		top: 0;
		height: 50px;
		line-height: 50px;
		color: #333333;
	}
	
	.itemtext {
		position: relative;
		float: right;
		right: 15px;
		width: 50%;
		min-height: 50px;
		line-height: 20px;
		color: #333;
		padding-top: 15px;
		padding-bottom: 15px;
		box-sizing: border-box;
		text-align: right;
	}
	.iteminput{
		width: 100%;
		text-align: right;
		font-size: 13px;
		box-sizing: border-box;
	}
	.InputRightMargin{
		padding-right:25px;
	}
	.timeRightMargin{
		padding-right: 30px;
	}
	.dateIcon {
		position: absolute;
		right: 0px;
		top: 14px;
		width: 20px;
		height: 20px;
	}
	.textarea {
		position: absolute;
		left: 15px;
		right:15px;
		bottom: 15px;
		top: 46px;
		height: auto;
		width: auto;
		font-size: 13px;
	}
	.picke_item{
		right:30px;
		position: absolute;
		line-height: 44px;
		top: 0;
		color: #333;
		font-size: 13px;
	}
	
	
	/*上传图片*/
	.photo_container {
		position: relative;
		margin-top: 10px;
		background-color: #fff;
		overflow: auto;
	}
	
	.pzqd {
		font-size: 16px;
		color: #333;
		padding-left: 15px;
		padding-top: 10px;
		box-sizing: border-box;
	}
	
	.photo_out {
		position: relative;
	}
	
	.imgwrap {
		position: relative;
		background-color: #fff;
		float: left;
		/* width: 27%; */
		width: 148px;
		margin: 3%;
	}
	
	.myimgBox {
		width: 100%;
		padding-bottom: 100%;
		overflow: hidden;
		margin: 0;
		position: relative;
	}
	
	.myimgBox .img {
		position: absolute;
		width: 100%;
		height: 100%;
		/* background-color: red; */
	}
	
	.upload_btn {
		border: 1px solid #dadada;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.upload_btn img {
		display: block;
		width: 32%;
		height: 30%;
		margin: 0 auto 5px auto;
	}
	
	.sctp {
		text-align: center;
		font-size: 15px;
		color: #ababab;
	}
	
	.uploadimg {
		width: 100%;
		height: 100%;
	}
	
	.cxsc {
		position: absolute;
		width: 100%;
		height: 30px;
		background-color: rgba(0, 0, 0, 0.8);
		bottom: 0;
		left: 0;
		text-align: center;
		line-height: 30;
		font-size: 14px;
		color: #fff;
	}
	
	.deleteimg {
		position: absolute;
		width: 18px;
		height: 18px;
		right: -9px;
		top: -9px;
		background-color: #fff;
		border-radius: 18px;
	}
	
	
	
	
	/*设备维修填写信息模块 公共样式  结束*/
	
</style>
