<template>
	<view class="page">
		<mpvue-picker themeColor="#007AFF" ref="mpvuePicker" mode="selector" :deepLength="deepLength" @onConfirm="pickerConfirm"
		 :pickerValueArray="apply_type"></mpvue-picker>
		<view class="item item_line" style="margin-top: 22upx;">
			<view class="itemname redMi">用章类型</view>
			<view class="itemtext">
				<input class="iteminput InputRightMargin" disabled placeholder="请选择用章类型" @click="showSinglePicker" :value="workInfo.chapterTypeName" />
				<uni-icons type="arrowright" class="myarrowright" style="right: 0px;"></uni-icons>
			</view>
		</view>

		<!-- <view class="item ">
		 	<view class="itemname">车号</view>
		 	<view class="itemtext">
		 		<input class="iteminput InputRightMargin"  placeholder="请填写车牌号" v-model="workInfo.carNo"/>
		 	</view>
		 </view>
		 <view class="item ">
		 	<view class="itemname">公里数</view>
		 	<view class="itemtext">
		 		<input class="iteminput InputRightMargin"  placeholder="请填写公里数" v-model="workInfo.distance"/>
		 	</view>
		 </view> -->
		<view class="item " @click="onShowDatePicker(1)">
			<view class="itemname redMi">开始使用时间</view>
			<view class="itemtext">
				<view>
					<input class="iteminput InputRightMargin" placeholder="请选择开始使用时间" :value='workInfo.startTime' />
					<img src="../../static/img/dateIcon.png" class="dateIcon" />
				</view>
			</view>
		</view>
		<view class="item item_line" @click="onShowDatePicker(2)">
			<view class="itemname redMi">结束使用时间</view>
			<view class="itemtext">
				<view>
					<input class="iteminput InputRightMargin" placeholder="请选择结束使用时间" :value='workInfo.endTime' />
					<img src="../../static/img/dateIcon.png" class="dateIcon" />
				</view>
			</view>
		</view>
		<view class="item item_line item_textarea">
			<view class="itemname redMi">用章事由</view>
			<textarea class="textarea" placeholder="请详细描述用章事由" v-model="workInfo.chapterReason" @change='dataChange'></textarea>
		</view>
		<!-- <view class="item item_line item_textarea">
			<view class="itemname">目的地</view>
			<textarea class="textarea" placeholder="请填写目的地" v-model="workInfo.destination" @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 item_line">
			<view class="itemname redMi">发给谁</view>
			<view class="itemtext" @click="selectPeople()">
				<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="goHome" @click='goMain("workInfo")'>
			<img src="../../static/img/gohome.png">
		</view>
		<view class="fixBottom">
			<view class="uni-flex uni-row">
				<view style="-webkit-flex:1;flex: 1;">
					<button type="primary" plain="true" style="width: 90%; background: #fff;" @click="goAddRepair('zc')" v-if="workInfo.approveState==-1||workInfo.approveState==0||workInfo.approveState==2">暂存</button>
				</view>
				<view style="-webkit-flex:1;flex: 1;">
					<button type="primary" style="width: 90%;" @click="goAddRepair('tj')" :disabled="workInfo.approveState!=0">确认提交</button>
				</view>
			</view>
		</view>
		<mx-datepicker type="datetime" :value="value_time" :show="showPicker" @confirm="onSelected" @cancel="onSelected"></mx-datepicker>
		<view class="mysearchlist" style="z-index: 10000;">
			<chooseUserMulti ref="mysearchlist" :showsearch.sync="show_search_user" :itemInfo_.sync="search_value_user">
			</chooseUserMulti>
		</view>
	</view>
</template>

<script>
	import {
		dataToTime
	} from '@/common/tools.js'
	import {
		getCurrentTime
	} from '@/common/tools.js'
	import {
		getCurrentDateTime
	} from '@/common/tools.js'
	import {
		config
	} from '../../request/js/config.js'
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import mxDatepicker from '@/components/mx-datepicker/mx-datepicker.vue'
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import chooseUserMulti from '@/components/xinsoft-search-list/chooseUserMulti.vue'
	export default {
		components: {
			mxDatepicker,
			mpvuePicker,
			uniIcons,
			chooseUserMulti
		},
		data() {
			return {
				config: config,
				imgsrc_list: [],
				imgsrc_list_local: [],
				showPicker: false,
				apply_type: [],
				csr: [],
				workInfo: {
					startTime: '', //开始时间
					endTime: '', //结束时间
					chapterReason: '',
					chapterType: '',
					chapterTypeName: '',
					approveState: -1
				},
				overTimeUser: {},
				value_time: '',
				index: 1,
				id: '',
				targetList: [],
				show_search_user: false,
				search_value_user: [],
			}
		},
		onLoad(option) {
			var _this = this;
			this.id = option.id || '';
			this.getSealType()
			//初始化当前 加班人为默认当前登陆人。
			var userInfo = uni.getStorageSync('userInfo');
			this.overTimeUser = {
				userId: userInfo.userId,
				name: userInfo.name
			}

			//如果是编辑，就根据接口获取数据，
			if (option.id) {
				this.$http.request({
					url: '/apis/sealUse/detail',
					method: 'GET',
					params: {
						id: option.id,
					},
				}).then(res => {
					if (res.data.code == 0) {
						this.workInfo = res.data.sealUseApply;
						for (var i = 0; i < res.data.initFileList.length; i++) {
							this.imgsrc_list.push(res.data.initFileList[i].filePath);
							this.imgsrc_list_local.push(config.imgURL + res.data.initFileList[i].filePath);
						}
						// this.overTimeUser = {
						// 	userId:workInfos.over_time_user,
						// 	name:workInfos.overTimeUserName
						// }
						// res.data.approveList.forEach((vals,index)=>{
						// 	var json = {
						// 		user_id:vals.user_id,
						// 		name:vals.name
						// 	}
						// 	this.targetList.push(json);
						// });
						// for(var i=0;i<res.data.initFileList.length;i++){
						// 	this.imgsrc_list.push(res.data.initFileList[i].filePath);
						// 	this.imgsrc_list_local.push(config.imgURL+res.data.initFileList[i].filePath);
						// }
						// this.workInfo = {
						// 	startTime:workInfos.begin_time,      //开始时间
						// 	endTime:workInfos.end_time,      //结束时间
						// 	timeArea:workInfos.time_area,  //加班时间长
						// 	reason:workInfos.reason,
						// 	id:this.id,
						// 	process_instance_id:workInfos.process_instance_id
						// }
						uni.setStorage({
							key: 'workInfo',
							data: this.workInfo,
							success: function() {

							}
						});
					}
				}).catch(err => {
					uni.showToast({
						title: '获取信息失败',
						icon: 'none',
						duration: 2000
					});
				});
			} else {
				//如果不是，是新增，获取session中的数据。
				uni.getStorage({
					key: 'workInfo',
					success: function(res) {
						_this.workInfo = res.data.info || {};
						// _this.overTimeUser = res.data.overTimeUser||{};
					}
				});
			}
		},
		watch: {
			search_value_user(newv) {
				var detail = [];
				newv.forEach(item => {
					let obj = {
						user_id: item.userId,
						name: item.NAME
					};
					detail.push(obj);
				})
				if (newv.length > 0) {
					var workInfo = uni.getStorageSync('workInfo');
					if (!workInfo) {
						workInfo = {}
					}
					this.targetList = detail
					workInfo.targetList = this.targetList
					uni.setStorage({
						key: 'workInfo',
						data: workInfo,
						success: function() {}
					});
				}
			}
		},
		methods: {
			getDetail() {
				this.$http.request({
					url: '/apis/sealUse/detail',
					method: 'GET',
					params: {
						id: this.id,
					},
				}).then(res => {
					if (res.data.code == 0) {
						this.workInfo = res.data.sealUseApply;
						uni.setStorage({
							key: 'workInfo',
							data: this.workInfo,
							success: function() {

							}
						});
					}
				}).catch(err => {
					uni.showToast({
						title: '获取信息失败',
						icon: 'none',
						duration: 2000
					});
				});
			},
			showSinglePicker() {
				this.pickerValueDefault = [0]
				this.$refs.mpvuePicker.show()
			},
			pickerConfirm(e) {
				this.workInfo.chapterTypeName = e.label;
				this.workInfo.chapterType = e.value[0]; //我也不知道为什么这边是数组，可能改picker框架支持多选。
			},
			selectPeople() {
				this.show_search_user = true;
				// uni.navigateTo({
				//     url: "selectPeople?flag="+flag
				// });
			},
			getSealType() {
				this.$http.request({
					url: "apis/dict/getDictsByType",
					params: {
						type: "chapter_type"
					}
				}).then(res => {
					this.apply_type = res.data.datas
					this.apply_type.forEach(item => {
						item.label = item.name
						item.value = item.id
					})
				})
			},
			// 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(n) { //显示
				this.showPicker = true;
				if (n == 1) {
					this.value_time = this.workInfo.startTime;
				} else if (n == 2) {
					this.value_time = this.workInfo.endTime;
				}
				this.index = n;
			},
			onSelected(e) { //选择
				this.showPicker = false;
				var _this = this;
				if (e) {
					if (this.index == 1) {
						this.workInfo.startTime = e.value + ":00";
					} else if (this.index == 2) {
						this.workInfo.endTime = e.value + ":00";
					}
					//保存当前修改信息
					var workInfo = uni.getStorageSync('workInfo');
					if (!workInfo) {
						workInfo = {}
					}
					workInfo.info = this.workInfo;
					uni.setStorage({
						key: 'workInfo',
						data: workInfo,
						success: function() {}
					});
				}
			},
			dataChange() {
				//保存当前修改信息
				var workInfo = uni.getStorageSync('workInfo');
				if (!workInfo) {
					workInfo = {}
				}
				workInfo.info = this.workInfo;
				uni.setStorage({
					key: 'workInfo',
					data: workInfo,
					success: 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();
								var workInfo = uni.getStorageSync('workInfo');
								if (!workInfo) {
									workInfo = {}
								}
								workInfo.imgsrc_list = _this.imgsrc_list;;
								workInfo.imgsrc_list_local = _this.imgsrc_list_local;
								uni.setStorage({
									key: 'workInfo',
									data: workInfo,
									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 workInfo = uni.getStorageSync('workInfo');
								if (!workInfo) {
									workInfo = {}
								}
								workInfo.imgsrc_list = _this.imgsrc_list;;
								workInfo.imgsrc_list_local = _this.imgsrc_list_local;
								uni.setStorage({
									key: 'workInfo',
									data: workInfo,
									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 workInfo = uni.getStorageSync('workInfo');
				if (!workInfo) {
					workInfo = {}
				}
				workInfo.imgsrc_list = this.imgsrc_list;
				workInfo.imgsrc_list_local = this.imgsrc_list_local;
				uni.setStorage({
					key: 'workInfo',
					data: workInfo,
					success: function() {

					}
				});
			},
			//点击暂存和确认提交 需要进行的操作。
			goAddRepair(flag) {
				console.log(this.workInfo)
				var _this = this;
				if (!(this.workInfo && this.workInfo.startTime)) {
					uni.showToast({
						title: '请选择开始时间',
						duration: 2000,
						icon: "none"
					});
					return false;
				}
				if (!(this.workInfo && this.workInfo.endTime)) {
					uni.showToast({
						title: '请选择结束时间',
						duration: 2000,
						icon: "none"
					});
					return false;
				}
				if (dataToTime(this.workInfo.endTime) <= dataToTime(this.workInfo.startTime)) {
					uni.showToast({
						title: '开始时间不能大于结束时间',
						duration: 2000,
						icon: "none"
					});
					return false;
				}
				if (!(this.workInfo && this.workInfo.chapterReason)) {
					uni.showToast({
						title: '请填写用章事由',
						duration: 2000,
						icon: "none"
					});
					return false;
				}
				if (flag == 'tj') {
					//提交进行的操作
					var url = '/apis/approveFlow/submitApprove'
					this.$http.request({
						url: url,
						data: {
							dataType: 6,
							mainId: this.id,
						}
					}).then(res => {
						if (res.data.code == 0) {
							uni.removeStorageSync('workInfo');
							uni.showToast({
								title: '操作成功',
								duration: 1000,
								icon: "none"
							});
							setTimeout(function() {
								uni.redirectTo({
									url: 'sealUse'
								});
							}, 1000)
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: "none"
							});
						}
					}).catch(err => {
						uni.showToast({
							title: '操作失败',
							duration: 2000,
							icon: "none"
						});
					});
				} else if (flag == 'zc') {
					//暂存进行的操作。
					var url = 'apis/sealUse/saveAddAndChange'

					this.$http.request({
						url: url,
						params: {
							startTime: this.workInfo.startTime,
							endTime: this.workInfo.endTime,
							chapterReason: this.workInfo.chapterReason,
							chapterType: this.workInfo.chapterType,
							taglocationappearanceImage: this.imgsrc_list,
							id: this.id
							// destination:this.workInfo.destination,
							// driver:this.workInfo.driver,
							// carNo:this.workInfo.carNo,
							// distance:this.workInfo.distance,
						}
					}).then(res => {
						if (res.data.code == 0) {
							if (this.workInfo.approveState == -1) {
								this.id = res.data.dataId
							}
							this.getDetail()
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: "none"
							});
						}
					}).catch(err => {
						uni.showToast({
							title: '操作失败',
							duration: 2000,
							icon: "none"
						});
					});
				}
			},
			onBackPress(options) { //取消默认的返回事件.用来返回上一页时重新加载页面，删除本地缓存的巡检操作
				uni.removeStorageSync('workInfo');
				uni.navigateTo({
					url: 'sealUse'
				});
				return true;

			},
		},
	}
</script>
<style scoped>
	.itemunit {
		position: absolute;
		right: 0;
		top: 0;
		height: 92upx;
		line-height: 92upx;
		color: #999;
		font-size: 26upx;
	}
</style>
