<template>
	<view class="page">
		 <view class="item item_line"  style="margin-top: 22upx;">
			<view class="itemname redMi">付款金额</view>
			<view class="itemtext">
				<input class="iteminput InputRightMargin"  type="number" placeholder="请输入价格" v-model="purchaseInfo.totalNumber"  @change='dataChange'/>
				<view class="itemunit" >元</view>
			</view>
		 </view>
		 <view class="item item_line">
		 	<view class="itemname redMi">支付对象</view>
		 	<view class="itemtext">
		 		<input class="iteminput" placeholder="请输入支付对象" v-model="purchaseInfo.purchaseUser" @change='dataChange'/>
		 	</view>
		 </view>
		 <view class="item item_line">
		 	<view class="itemname redMi">收款账号</view>
		 	<view class="itemtext">
		 		<input class="iteminput" placeholder="请输入收款账号" v-model="purchaseInfo.blankAccount" @change='dataChange'/>
		 	</view>
		 </view>
		<view class="item " @click="onShowDatePicker()">
			<view class="itemname redMi">支付日期</view>
			<view class="itemtext">
				<view >
					<input class="iteminput InputRightMargin" disabled placeholder="请选择支付日期" :value='purchaseInfo.purchaseDate'/>
					<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="purchaseInfo.purchaseReason" @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("purchaseInfo")'>
			<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="purchaseInfo.approveState==-1||purchaseInfo.approveState==0||purchaseInfo.approveState==2">暂存</button>
				</view>
				<view style="-webkit-flex:1;flex: 1;">
					<button type="primary"  style="width: 90%;"  @click="goAddRepair('tj')" :disabled="purchaseInfo.approveState!=0">确认提交</button>
				</view>
			</view>
		</view>
		<mx-datepicker type="date" :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 {
		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,
				csr:[],
				purchaseInfo:{
					purchaseReason:'',   
					totalNumber:'',  
					purchaseUser:'',
					blankAccount:'',
					purchaseDate:'',
					approveState:-1
				},
				value_time:'',
				id:'',
				targetList: [],
				show_search_user:false,
				search_value_user:[],
			}
		},
		onLoad(option) {
			var _this = this;
			this.id = option.id||'';
			
			//如果是编辑，就根据接口获取数据，
			if(option.id){
				this.$http.request({
					url: '/apis/purchaseApply/detail',
					method:'GET',
					params: {
						id:option.id,
					},
				}).then(res => {
					if (res.data.code == 0) {
						var purchaseInfos = res.data.purchaseApplyDO;
						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.purchaseInfo = {
							totalNumber:purchaseInfos.total_number,
							purchaseReason:purchaseInfos.purchase_reason,
							purchaseUser:purchaseInfos.purchase_user,      
							blankAccount:purchaseInfos.blank_account,
							approveState:purchaseInfos.approveState,
							purchaseDate:purchaseInfos.purchase_date,   
							id:this.id,
							process_instance_id:purchaseInfos.process_instance_id
						}
						uni.setStorage({
						    key: 'purchaseInfo',
						    data: {
								info:this.purchaseInfo,
								imgsrc_list:this.imgsrc_list,
								imgsrc_list_local:this.imgsrc_list_local,
								targetList:this.targetList,
							},
						    success: function () {
						    }
						});
					}
				}).catch(err => {
					uni.showToast({
						title: '获取信息失败',
						icon: 'none',
						duration: 2000
					});
				});
			}else{
				//如果不是，是新增，获取session中的数据。
				uni.getStorage({
					key: 'purchaseInfo',
					success: function (res) {
						_this.purchaseInfo = res.data.info||{},
						_this.targetList = res.data.targetList||[];
						_this.imgsrc_list = res.data.imgsrc_list||[];
						_this.imgsrc_list_local = res.data.imgsrc_list_local||[];
					}
				});
			}
		},
		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 purchaseInfo =  uni.getStorageSync('purchaseInfo');
					if(!purchaseInfo){
						purchaseInfo = {}
					}
					this.targetList=detail
					purchaseInfo.targetList = this.targetList
					uni.setStorage({
					    key: 'purchaseInfo',
					    data: purchaseInfo,
					    success: function () {
					    }
					});
					}
				}
			},
		methods: {
			getDetail(){
				this.$http.request({
					url: '/apis/purchaseApply/detail',
					method:'GET',
					params: {
						id:this.id
					},
				}).then(res => {
					if (res.data.code == 0) {
						var purchaseInfos = res.data.purchaseApplyDO;
						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.purchaseInfo = {
							totalNumber:purchaseInfos.total_number,
							purchaseReason:purchaseInfos.purchase_reason,
							purchaseUser:purchaseInfos.purchase_user,      
							blankAccount:purchaseInfos.blank_account,
							approveState:purchaseInfos.approveState,
							purchaseDate:purchaseInfos.purchase_date,   
							id:this.id,
							process_instance_id:purchaseInfos.process_instance_id
						}
						uni.setStorage({
						    key: 'purchaseInfo',
						    data: {
								info:this.purchaseInfo,
								imgsrc_list:this.imgsrc_list,
								imgsrc_list_local:this.imgsrc_list_local,
								targetList:this.targetList,
							},
						    success: function () {
						    }
						});
					}
				}).catch(err => {
					uni.showToast({
						title: '获取信息失败',
						icon: 'none',
						duration: 2000
					});
				});
			},
			selectPeople(){
				this.show_search_user=true;
				// uni.navigateTo({
				//     url: "selectPeople"
				// });
			},
			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;
				this.value_time=this.purchaseInfo.purchaseDate;
			},
			onSelected(e) { //选择
				this.showPicker = false;
				var _this = this;
				if (e) {
					this.purchaseInfo.purchaseDate= e.value;
					//保存当前修改信息
					var purchaseInfo =  uni.getStorageSync('purchaseInfo');
					if(!purchaseInfo){
						purchaseInfo = {}
					}
					purchaseInfo.info = this.purchaseInfo;
					uni.setStorage({
					    key: 'purchaseInfo',
					    data: purchaseInfo,
					    success: function () {
					    }
					});
				}
			},
			dataChange(){
				//保存当前修改信息
				var purchaseInfo =  uni.getStorageSync('purchaseInfo');
				if(!purchaseInfo){
					purchaseInfo = {}
				}
				purchaseInfo.info = this.purchaseInfo;
				uni.setStorage({
				    key: 'purchaseInfo',
				    data: purchaseInfo,
				    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 purchaseInfo =  uni.getStorageSync('purchaseInfo');
								if(!purchaseInfo){
									purchaseInfo = {}
								}
								purchaseInfo.imgsrc_list = _this.imgsrc_list;;
								purchaseInfo.imgsrc_list_local = _this.imgsrc_list_local;
								uni.setStorage({
								    key: 'purchaseInfo',
								    data: purchaseInfo,
								    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 purchaseInfo =  uni.getStorageSync('purchaseInfo');
								if(!purchaseInfo){
									purchaseInfo = {}
								}
								purchaseInfo.imgsrc_list = _this.imgsrc_list;;
								purchaseInfo.imgsrc_list_local = _this.imgsrc_list_local;
								uni.setStorage({
								    key: 'purchaseInfo',
								    data: purchaseInfo,
								    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 purchaseInfo =  uni.getStorageSync('purchaseInfo');
				if(!purchaseInfo){
					purchaseInfo = {}
				}
				purchaseInfo.imgsrc_list = this.imgsrc_list;
				purchaseInfo.imgsrc_list_local = this.imgsrc_list_local;
				uni.setStorage({
				    key: 'purchaseInfo',
				    data: purchaseInfo,
				    success: function () {

				    }
				});
			},
			//点击暂存和确认提交 需要进行的操作。
			goAddRepair(flag){
				
				var _this = this;
				//在这里是抄送人数据。
				var carbonCopyRecipients = []
				if(this.targetList.length>0){
					this.targetList.forEach((vals,index)=>{
						carbonCopyRecipients.push(vals.user_id);
					});
				}
				if(!(this.purchaseInfo && this.purchaseInfo.totalNumber)){
					uni.showToast({
						    title: '请输入付款金额',
						    duration: 2000,
							icon:"none"
						});
					return false;
				}
				if(!(this.purchaseInfo && this.purchaseInfo.purchaseUser)){
					uni.showToast({
						    title: '请填写支付对象',
						    duration: 2000,
							icon:"none"
						});
					return false;
				}
				if(!(this.purchaseInfo && this.purchaseInfo.blankAccount)){
					uni.showToast({
						    title: '请填写收款账号',
						    duration: 2000,
							icon:"none"
						});
					return false;
				}
				if(!(this.purchaseInfo && this.purchaseInfo.purchaseDate)){
					uni.showToast({
						    title: '请填写支付日期',
						    duration: 2000,
							icon:"none"
						});
					return false;
				}
				if(!(this.purchaseInfo && this.purchaseInfo.purchaseReason)){
					uni.showToast({
						    title: '请填写付款事由',
						    duration: 2000,
							icon:"none"
						});
					return false;
				}
				// if(!(this.targetList && this.targetList.length>0)){
				// 	uni.showToast({
				// 		    title: '请选择发给谁',
				// 		    duration: 2000,
				// 			icon:"none"
				// 		});
				// 	return false;
				// }
				var purchaseInfom  = uni.getStorageSync('purchaseInfo');
				if(flag == 'tj'){
					//提交进行的操作
					var url = '/apis/approveFlow/submitApprove'
					//调取接口进行保存。
					this.$http.request({
					  url: url,
					  data:{
						  dataType: 10,
						  mainId: purchaseInfom.info.id
					  }
					}).then(res=>{
						if(res.data.code == 0){
							uni.removeStorageSync('purchaseInfo');
							uni.showToast({
								title: '操作成功',
								duration: 	1000,
								icon:"none"
							});
							setTimeout( function(){
								uni.redirectTo({
								    url: 'purchaseApply'
								});
							},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/purchaseApply/addAndSaveChange'
					//调取接口进行保存。
					this.$http.request({
					  url: url,
					  params:{
						  totalNumber:this.purchaseInfo.totalNumber,
						  purchaseUser:this.purchaseInfo.purchaseUser,
						  blankAccount:this.purchaseInfo.blankAccount,
						  purchaseDate:this.purchaseInfo.purchaseDate,
						  purchaseReason:this.purchaseInfo.purchaseReason,
						  processInstanceId:purchaseInfom.info.process_instance_id||'',
						  newApproveList:carbonCopyRecipients, 
						  taglocationappearanceImage:this.imgsrc_list,
						  id:this.id||''
					  }
					}).then(res=>{
						if(res.data.code == 0){
							if(this.purchaseInfo.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('purchaseInfo');
			uni.navigateTo({
			    url: 'purchaseApply'
			});
			return true;

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