<template>
	<view class="batchDataImportContainer">
		<view class="selectStepContainer">
			<view class="selectStepContent">
				<text>我想测算每隔</text>
				<view class="stepContent">
					<picker @change="bindPickerChange" :value="index" :range="stepLists">
						<view class="uni-input">{{stepLists[index]}}</view>					
					</picker>
					<svg t="1661847421137" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1364" width="16" height="16"><path d="M917.4 302.8c-14.2-14.2-37.2-14.2-51.4 0L518.6 650.3c-2.9 2.8-7.5 2.8-10.3 0L160.8 302.8c-14.2-14.2-37.2-14.2-51.4 0-14.2 14.2-14.2 37.2 0 51.4l347.4 347.4c15.6 15.6 36 23.4 56.5 23.4s41-7.8 56.5-23.4l347.4-347.4c14.3-14.2 14.3-37.2 0.2-51.4z" p-id="1365" fill="#666666"></path></svg>
				</view>
				<text>年的单利复利</text>
			</view>
			<!-- 自定义 -->
			<view>
				<button class="mini-btn" type="default" size="mini" @click="selectCustomPolicyYear">自定义</button>
			</view>
		</view>
		<!-- 提示信息-->
		<view class="tips">
			<text>(如需指定任意保单年度，可通过点击右上角<text>“自定义”</text>按钮完成)</text>
		</view>
		<view class="dataOptionContainer">
			<!-- 粘贴数据区域 -->
			<view class="uni-textarea">
				<textarea v-model="pasteData" placeholder-style="color:#999999;font-size:14px;padding-left:9px;padding-top:3px" placeholder="请根据左侧保单年度进行现金价值数据粘贴,如您想直接输入数据,需使用回车键或换行符分隔"/>
				<button class="mini-btn pasteDiscernment" type="default" size="mini" @click="pasteDataDistinguish">粘贴并识别</button>
			</view>
			<!-- 批量数据输入区域 -->
			<view class="batchDataLists">
				<view class="batchDataTh">
					<text>保单年度</text>
					<text>现金价值</text>
				</view>
				<scroll-view scroll-y="true" style="height: 560rpx;">
					<view class="batchDataTd" v-for="item in irrAndSimpleInfos">
						<text>{{item.nyear}}</text>
						<input class="uni-input" style="height: 100%;" type="digit" v-model="item.cashValue" placeholder="请输入纯数字" />
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 操作 -->
		<view class="optionContent">
			<button type="default" plain="true" form-type="reset" @click="clearData">全部清空</button>
			<button type="default" plain="true" @click="calcuteIrr()">{{calcuteMethod=='2' ? '输入批量数据' : '开始计算'}}</button>
		</view>	
		<!-- 保单年度选择弹窗 -->
		<view class="policySelectContainer" v-if="policyYearModalFlag">
			<view class="policyYearContainer">
				<view class="modalTitle">
					<text></text>
					<text>选择保单年度<text>（可多选）</text></text>
					<icon :type="'clear'" size="26" @click="policyYearModalFlag=false"/>
				</view>
				<view class="policyStepContainer">
					<button type="default" plain="true" :class="{'actived': customPolicyYearRange===0 }" @click="selectPolicyYearRange(0)">1~40</button>
					<button type="default" plain="true" :class="{'actived': customPolicyYearRange===1 }" @click="selectPolicyYearRange(1)">41~80</button>
					<button type="default" plain="true" :class="{'actived': customPolicyYearRange===2 }" @click="selectPolicyYearRange(2)">81~105</button>
				</view>
				<view class="policyYearItemContainer">
					<view v-for="item of customPolicyYearRangeCount" @click="selectCustomPolicyYears(item + customPolicyYearRange * customPolicyYearRangeCount)"  :class="{'actived':getActiveStatus(item + customPolicyYearRange * customPolicyYearRangeCount)}">
						<text>{{item + customPolicyYearRange * customPolicyYearRangeCount > this.maxPolicyYear ? '' : item + customPolicyYearRange * customPolicyYearRangeCount}}</text>
					</view>
				</view>
				<view class="confirm">
					<button type="default" plain="true" @click="confirmPolicyYears()">确定</button>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	import api from "../../api/api";
	export default {
	  data() {
		return {
		 index:0,
		 stepLists:[1,5,10,15,20],
		 pasteData:"",
		 irrAndSimpleInfos:[{nyear:1,cashValue:''}],
		 customPolicyYearRange:0,
		 customPolicyYearRangeCount:40,
		 maxPolicyYear:105,
		 policyYearLists:[{nyear:1,isActived:true,cashValue:''}],
		 policyYearModalFlag:false,
		 calcuteData:null
		}
	  },
	  name:'dataImport',
	  onLoad() {
	  	this.bindPickerChange({detail:{value:this.index}});
		this.calcuteData = uni.getStorageSync('calcuteData');
	  },
	  methods:{
		  // 选择间隔
		  bindPickerChange(e){
			this.index = e.detail.value;
			  const m = this.stepLists[this.index]===1 ? 2 : 1;
			  this.policyYearLists = [{nyear:1,isActived:true,cashValue:''}];
			 for(let n=m;n<=this.maxPolicyYear;n++){
				 let calcNumber = this.stepLists[this.index] * n;
				 if(calcNumber <= this.maxPolicyYear){
					 this.policyYearLists = this.policyYearLists.concat([{nyear:calcNumber,cashValue:''}]) ;
				 }else{
					 break;
				 }
			 }
			 this.irrAndSimpleInfos = this.policyYearLists.concat([]);
		  },
		  // 选择自定义
		  selectCustomPolicyYear(){
			this.policyYearModalFlag=true;
			this.irrAndSimpleInfos = this.policyYearLists = [];
			console.log(this.irrAndSimpleInfos)
		  },
		  // 选择保单年度区间
		  selectPolicyYearRange(e){
			  this.customPolicyYearRange = e;
		  },
		  // 选择保单年度（自定义）
		  selectCustomPolicyYears(e){
			  if(this.policyYearLists.filter(item=>item.nyear==e).pop()){
				  this.policyYearLists.filter(item=>item.nyear==e).pop()['isActived'] = !this.policyYearLists.filter(item=>item.nyear==e).pop()['isActived']
			  }else{
				this.policyYearLists.push({nyear:e,isActived:true,cashValue:''})  
			  }
			  
		  },
		  // 获取选中状态
		  getActiveStatus(e){
			  let status = false;
			  if(this.policyYearLists.filter(item=>item.nyear==e).pop()){
				status = this.policyYearLists.filter(item=>item.nyear==e).pop()['isActived']  
			  }
			  return status;
		  },
		  // 确认选择的保单年度
		  confirmPolicyYears(){
			  this.policyYearModalFlag = false;
			 if(this.policyYearLists.length>0){
				 this.policyYearLists.sort((a,b)=>a.nyear - b.nyear)
			 }
			this.irrAndSimpleInfos = JSON.parse(JSON.stringify(this.policyYearLists));
		  },
		  // 粘贴并识别
		  pasteDataDistinguish(){
			  const pasteDataLists = this.pasteData.trim().split('\n');
			  console.log(pasteDataLists)
			  if(pasteDataLists.length<=0 || pasteDataLists.every((item)=>item=='')){
				 uni.showModal({
				 	title: '数据识别结果',
				 	content: '检测到您并没有导入数据，请重新操作',
				 	success: function (res) {
				 		if (res.confirm) {
				 			console.log('用户点击确定');
				 		} else if (res.cancel) {
				 			console.log('用户点击取消');
				 		}
				 	}
				 }); 
			  }else if(pasteDataLists.length !== this.irrAndSimpleInfos.length){
				  uni.showModal({
				  	title: '数据识别结果',
				  	content: '检测到您导入的数据条数和选择的保单年度数量不一致，系统将从上到下依次填入，请确认是否继续',
				  	success: (res)=> {
				  		if (res.confirm) {
				  			console.log('用户点击确定');
							if(this.irrAndSimpleInfos.length>0){
								const minLength = Math.min(pasteDataLists.length,this.irrAndSimpleInfos.length) ;
								console.log(minLength)
								for(let i=0;i<minLength;i++){
									this.irrAndSimpleInfos[i]['cashValue'] = pasteDataLists[i];
								}
							}
				  		} else if (res.cancel) {
				  			console.log('用户点击取消');
				  		}
				  	}
				  }); 
			  }
		  },
		  // 全部清空
		  clearData(){
			 this.pasteData = '';
			 this.irrAndSimpleInfos.forEach(item=>item.cashValue='');
		  },
		  calcuteIrr(){
			  this.policyYearLists = this.irrAndSimpleInfos.filter(item=>item.cashValue!=='')
			  console.log(this.policyYearLists)
			  for(let i=0;i<this.policyYearLists.length;i++){
				  if(this.policyYearLists[i].cashValue<0 || isNaN(this.policyYearLists[i].cashValue)){
					  uni.showModal({
					  	title: '数据格式输入错误',
					  	content: `保单年度为${this.policyYearLists[i].nyear}时,现金价值格式错误,须为大于或等于0的数字类型`,
						showCancel:false,
					  	success: function (res) {
					  		if (res.confirm) {
					  			console.log('用户点击确定');
					  		} else if (res.cancel) {
					  			console.log('用户点击取消');
					  		}
					  	}
					  });
					  return;
				  }
			  }
			  const params = {
			  	...this.calcuteData,
			  	calcuteMethod:2,
				decimal:5,
				irrAndSimpleInfos:this.policyYearLists
			  };
			  api.irrAndSimpleCalcute(params).then(res=>{
			  	if(res.success === true){
			  		this.irrAndSimpleResInfos = res.data.irrAndSimpleResInfos;
			  		// this.resultShowFlag = true;
					//计算成功返回上一页
					uni.setStorageSync('resIrrAndSimpleResInfos',this.irrAndSimpleResInfos);
					uni.navigateBack({
						delta:1,//返回层数，2则上上页
					})
			  	}else{
			  		uni.showToast({
			  		title: res['message'],
			  		duration: 2000,
			  		icon: 'none'					
			  		})
			  	}
			  })
		  }
			
	  }
	}
</script>

<style>
	@import 'data-import.css'
</style>