<template>
	<view class="page">
		<view class="step_num" style="margin-bottom: 22upx;">
			<view class="step step1">完善报销明细</view>
			<view class="step step2">上传报销凭证</view>
		</view>
		<view v-for="(item,index) in itemList" :key="index" class="example-box">
			<view class="item">
				<view class="itemname">报销明细{{index+1}}</view>
				<view class="itemtext" style="color:#007aff;" @click="deleteItem(index)">
					<uni-icons type="trash" class="myarrowright" style="right:56upx; font-size: 36upx;color:#007aff;"></uni-icons>删除
				</view>
			</view>
			 <view class="item">
				<view class="itemname redMi">报销金额</view>
				<view class="itemtext">
					<input class="iteminput InputRightMargin" type="number" placeholder="请输入金额" v-model="item.reiCount"  @change='dataChange'/>
					<view class="itemunit">元</view>
				</view>
			 </view>
			 <view class="item " @click="onShowDatePicker(index)">
				<view class="itemname redMi">日期</view>
				<view class="itemtext">
					<view >
						<input class="iteminput InputRightMargin" disabled placeholder="请选择日期" :value='item.reiDate'/>
						<img src="../../static/img/dateIcon.png" class="dateIcon" />
					</view>
				</view>
			 </view>
			 <view class="item">
				<view class="itemname redMi">报销类别</view>
				<view class="itemtext">
					<input class="iteminput InputRightMargin" disabled placeholder="请选择报销类别"  @click="showSinglePicker(index)" :value="item.typeName"/>
					<uni-icons type="arrowright" class="myarrowright" style="right: 0px;"></uni-icons>
				</view>
			 </view>
			 <view class="item item_line">
				<view class="itemname">报销摘要</view>
				<view class="itemtext">
					<input class="iteminput" placeholder="请输入报销摘要" v-model="item.reiItemDescription" @input='dataChange'/>
				</view>
			 </view>
		</view>
		<view class="fixMargin"></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="addReim">新增报销明细</button>
				</view>
				<view style="-webkit-flex:1;flex: 1;">
					<button type="primary"  style="width: 90%;"  @click="next">下一步</button>
				</view>
			</view>
		</view>
		<mx-datepicker type="date" :value="value_time" :show="showPicker" @confirm="onSelected" @cancel="onSelected"></mx-datepicker>
		<mpvue-picker themeColor="#007AFF" ref="mpvuePicker" mode="selector" :deepLength="deepLength"
		 @onConfirm="pickerConfirm" :pickerValueArray="reim_type"></mpvue-picker>
		 <view class="goHome" @click='goMain("reimInfo")'>
		 	<img src="../../static/img/gohome.png">
		 </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"
	export default {
		components: {
			mxDatepicker, mpvuePicker,
			uniIcons
		},
		data() {
			return {
				config:config,
				showPicker: false,
				csr:[],
				imgsrc_list_local:[],
				imgsrc_list:[],
				deepLength:1,
				itemList:[{
					"reiCount":"",
					"reiDate":"",
					"type":"",
					"typeName":'',
					"reiItemDescription":""}
				],
				value_time:'',
				id:'',
				reim_type:[],
				dateIndex:0,
				pickerIndex:0,
				deletDetailIds:[]
			}
		},
		onLoad(option) {
			var _this = this;
			this.id = option.id||'';
			
			//如果是编辑，就根据接口获取数据，
			if(option.id){
				this.$http.request({
					url: '/apis/reimApply/detail',
					method:'GET',
					params: {
						id:option.id,
					},
				}).then(res => {
					if (res.data.code == 0) {
						var reimInfos = res.data.reimApplyDO;
						res.data.approveList.forEach((vals,index)=>{
							var json = {
								user_id:vals.user_id,
								name:vals.name
							}
							this.csr.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);
						}
						var items = res.data.itemList;
						_this.itemList = [];
						for(var i=0;i<items.length;i++){
							var json = {
								"reiCount":items[i].rei_count,
								"reiDate":items[i].rei_date,
								"type":items[i].type,
								"typeName":items[i].typeName,
								"reiItemDescription":items[i].rei_item_description,
								"id":items[i].id
							}
							_this.itemList.push(json);
						}
						uni.setStorage({
						    key: 'reimInfo',
						    data: {
								info:this.itemList,
								imgsrc_list:this.imgsrc_list,
								imgsrc_list_local:this.imgsrc_list_local,
								targetList:this.csr,
								id:_this.id,
								process_instance_id:reimInfos.process_instance_id,
								approveState:reimInfos.approveState,
								deletDetailIds:_this.deletDetailIds
							},
						    success: function () {
						    }
						});
					}
				}).catch(err => {
					uni.showToast({
						title: '获取信息失败',
						icon: 'none',
						duration: 2000
					});
				});
			}else{
				//如果不是，是新增，获取session中的数据。
				uni.getStorage({
					key: 'reimInfo',
					success: function (res) {
						_this.itemList = res.data.info||[],
						_this.csr = res.data.targetList||[];
						_this.imgsrc_list = res.data.imgsrc_list||[];
						_this.imgsrc_list_local = res.data.imgsrc_list_local||[];
					}
				});
			}
			
			//初始化获取 报销类别
			this.$http.request({
			  url: '/apis/dict/getDictsByType',
			  params: {
			    type: 'reim_apply_type'
			  },
			}).then(res=>{
				if(res.statusCode == '200'){
					var useType = res.data.datas;
					for (let i = 0; i < useType.length; i++) {
					    var myVal=
					    	{
					    		'label': useType[i].name,
					    		'value': useType[i].id
					    	}
					    _this.reim_type.push(myVal);
					}
				}
			}).catch(err=>{
				console.log(err);
			});
		},
		methods: {
			addReim(){
				var myjson = {
					"reiCount":"",
					"reiDate":"",
					"type":"",
					'typeName':'',
					"reiItemDescription":""
				};
				this.itemList.push(myjson);
			},
			next(){
				//在跳转到下一个界面之前，需要判断当前报销内容是否都填写完整。
				if(this.itemList.length >0){
					var items = this.itemList;
					for(var i=0; i<items.length; i++){
						if(!items[i].reiCount || !items[i].reiDate || !items[i].type){
							uni.showToast({
								title: '请填写完整该条报销明细',
								duration: 2000,
								icon:"none",
							});
							return false;
						}
					}
				}else{
					uni.showToast({
						title: '请至少新增一条报销明细',
						duration: 2000,
						icon:"none"
					});
					return false;
				}
				uni.navigateTo({
				    url: "addReimApplyStep"
				});
			},
			deleteItem(index){
				//删除报销的同时，需要保存当前删除的id。
				var thisItem = this.itemList[index];
				if(thisItem && thisItem.id){
					//如果当前存在id就删除，如果不存在，代表是新增的，就不需要保存
					this.deletDetailIds.push(thisItem.id);
				}
				//删除 报销
				this.itemList.splice(index,1);
				
				//保存当前修改信息  保存删除信息
				var reimInfo =  uni.getStorageSync('reimInfo');
				if(!reimInfo){
					reimInfo = {}
				}
				reimInfo.info = this.itemList;
				reimInfo.deletDetailIds = this.deletDetailIds;
				uni.setStorage({
				    key: 'reimInfo',
				    data: reimInfo,
				    success: function () {
				    }
				});
			},
			pickerConfirm(e){
				var n = this.pickerIndex;
				this.itemList[n].typeName = e.label;
				this.itemList[n].type = e.value[0];  //我也不知道为什么这边是数组，可能改picker框架支持多选。
				var reimInfo =  uni.getStorageSync('reimInfo');
				if(!reimInfo){
					reimInfo = {}
				}
				reimInfo.info = this.itemList;
				uni.setStorage({
				    key: 'reimInfo',
				    data: reimInfo,
				    success: function () {
				    }
				});
			},
			showSinglePicker(index) {
				this.pickerIndex = index;
				this.pickerValueDefault = [0]
				this.$refs.mpvuePicker.show()
			},
			onShowDatePicker(n) { //显示
				this.dateIndex = n;
				this.value_time=this.itemList[n].reiDate;
				this.showPicker = true;
			},
			onSelected(e) { //选择
				this.showPicker = false;
				var _this = this;
				if (e) {
					this.itemList[_this.dateIndex].reiDate= e.value
					//保存当前修改信息
					var reimInfo =  uni.getStorageSync('reimInfo');
					if(!reimInfo){
						reimInfo = {}
					}
					reimInfo.info = this.itemList;
					uni.setStorage({
					    key: 'reimInfo',
					    data: reimInfo,
					    success: function () {

					    }
					});
				}
			},
			dataChange(){
				//保存当前修改信息
				var reimInfo =  uni.getStorageSync('reimInfo');
				if(!reimInfo){
					reimInfo = {}
				}
				reimInfo.info = this.itemList;
				uni.setStorage({
				    key: 'reimInfo',
				    data: reimInfo,
				    success: function () {

				    }
				});
			},
			//点击暂存和确认提交 需要进行的操作。
			goAddRepair(flag){
				if(flag == 'tj'){
					//提交进行的操作
					var url = '/apis/payApply/saveSbmitChange'
				}else if(flag == 'zc'){
					//暂存进行的操作。
					var url = '/apis/payApply/addAndSaveChange'
				}
				var _this = this;
			}
		},
		onBackPress(options) { //取消默认的返回事件.用来返回上一页时重新加载页面，删除本地缓存的巡检操作
			uni.removeStorageSync('reimInfo');
			uni.navigateTo({
			    url: 'reimApply'
			});
			return true;

		},
	}
</script>
<style scoped>
	.step_num {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		height: 80upx;
		background-color: #fff;
		padding-right: 48upx;
		box-sizing: border-box;
	}
	
	.step {
		position: relative;
		font-size: 28upx;
		line-height: 80upx;
		padding-left: 30upx;
		float: left;
	}
	
	.step:before {
		position: absolute;
		left: 0px;
		content: '1';
		border: 1px solid #000;
		width: 28upx;
		height: 28upx;
		box-sizing: border-box;
		line-height: 28upx;
		border-radius: 200upx;
		font-size: 20upx;
		text-align: center;
		top: 26upx;
	}
	
	.step:after {
		position: absolute;
		content: '';
		width: 60upx;
		height: 2upx;
		background-color: #000;
		top: 40upx;
		left: 200upx;
	}
	
	.step2 {
		margin-left: 64upx;
		color: #828282;
	}
	
	.step2:before {
		content: '2';
		border: 2upx solid #828282;
	}
	
	.step2:after{
		background-color: transparent;
	}
	.itemunit{
		position: absolute;
		right: 0;
		top: 0;
		height: 92upx;
		line-height: 92upx;
		color: #999;
		font-size: 26upx;
	}
</style>
