<template>
	<!-- <view v-show="irrFlag == false" > -->
		<view class="qrcodeContainer" v-show="isNeedOfficialAccountQrcode">
			<view class="qrcodeContent">
				<img src="../../static/images/qrcodeBg.png" alt="" srcset="">
			</view>
			
		</view>
		<view class="content" v-show="!isNeedOfficialAccountQrcode">
			<view class="banner">
				<img src="/static/images/policyIrrBanner.png" alt="" srcset="">
			</view>
			<scroll-view scroll-y="true" class="formInfoContainer">
				<view class="tabTitle">
					<text @click="switchTab('1')" :class="{ 'actived': calcuteType==='1' }">增额</text>
					<text @click="switchTab('2')" :class="{ 'actived': calcuteType==='2' }">年金</text>
				</view>
				<form @submit="formSubmit" @reset="formReset">
					<!-- 保单信息 -->
					<view class="policyInfoContent">
						<view class="title">
							<view>保单信息</view>
							<!-- <button class="btn" style="font-size: 12px;margin: 0;padding: 0 30px;"
							@click="calcute(2)"
							>保存</button> -->
						</view>
						<view class="inputItem">
							<text>交费年限：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								v-model="irrAndSimpleCalcuteParam.paymentPeriod"
								/><label for="">年</label>
							</view>
						</view>
						<view class="inputItem">
							<text>年交保费：</text>
							<view class="inputContent">
								<input class="uni-input" type="digit" placeholder="请输入" 
								v-model="irrAndSimpleCalcuteParam.annualPremium"
								/><label for="">元</label>
							</view>
						</view>
						<view class="inputItem" v-show="calcuteType==='2'">
							<text>万能账户首年交费<text style="font-size: 24rpx;">(如有)</text>：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								v-model="irrAndSimpleCalcuteParam.allFirstPayment"
								/><label for="">元</label>
							</view>
						</view>
					</view>
					<!-- 提领信息 -->
					<view class="claimInfomationContent" v-if="!(calcuteType==='2' && irrAndSimpleCalcuteParam.allFirstPayment)">
						<view class="title">
							<text>提领信息</text>
							<view style="display: flex;" @click="changeWithdrawalType()" v-show="calcuteType==='1'">
								<view class="radioButton" :class="{'selected':!withdrawalType}"></view>
								<text style="margin-left: 10rpx;">减保取现</text>
							</view>
						</view>
						<!-- 年金提领信息 -->
						<view class="annuityContent" v-show="calcuteType==='2'">
							<view v-for="item in yearWithdrawalInfos">
								<view class="inputItem">
									<text>从第几个保单年度开始提取：</text>
									<view class="inputContent">
										<input class="uni-input" type="number" placeholder="请输入" 
										v-model="item.withdrawalStart"/><label for="">年</label>
									</view>
								</view>
								<view class="inputItem">
									<text>每年提取金额：</text>
									<view class="inputContent">
										<input class="uni-input" type="number" placeholder="请输入" 
										v-model="item.yearWithdrawalAmount" /><label for="">元</label>
									</view>
								</view>
							</view>
							
						</view>
						<!-- 增额减保取现 -->
						<view class="reduceInsuranceContent" v-show="!withdrawalType && calcuteType==='1'">
							<view class="tableTh">
								<text>起领年度(年初)</text>
								<text>止领年度(年末)</text>
								<text class="withdrawNumber">年提取金额（元）</text>
							</view>
							<view class="tableTd" v-for="(item,idx) in yearWithdrawalInfos">
								<input class="uni-input" type="number" placeholder="请输入" 
								v-model="item.withdrawalStart"/>
								<input class="uni-input" type="number" placeholder="请输入" 
								v-model="item.withdrawalEnd"/>
								<input class="uni-input withdrawNumber" type="number" placeholder="请输入" 
								v-model="item.yearWithdrawalAmount"/>
								<view v-show="yearWithdrawalInfos.length>1">
									<text @click="reduce(idx)">-</text>
								</view>
							</view>
							<text @click="add()" style="position: absolute;right: 0;">+</text>
						</view>
					</view>
					<!-- 现金价值信息 -->
					<view class="cashValueContent" :style="{marginTop:(calcuteType=='1'?'80rpx':'40rpx')}">
						<view class="title">
							<text>现金价值</text>
							<view class="calcTypeOption">
								<button class="mini-btn" type="default" size="mini" @click="initCashValue('1')" :class="{'actived':calcuteMethod=='1'}">单次</button>
								<button class="mini-btn" type="default" size="mini" @click="initCashValue('2')" :class="{'actived':calcuteMethod=='2'}">批量</button>
							</view>
						</view>
						<view class="simpleCalculateContent" v-show="calcuteMethod==='1'">
							<view class="inputItem">
								<text>第：</text>
								<view class="inputContent">
									<input class="uni-input" type="number" placeholder="请输入" min='1'
									v-model="irrAndSimple.nyear"/>
									<label for="">年</label>
								</view>
							</view>
							<view class="inputItem">
								<text>总生存利益<text style="font-size: 14px;">（总领取金额+现金价值）</text>:</text>
								<view class="inputContent">
									<input class="uni-input" type="number" placeholder="请输入" min='1'
									v-model="irrAndSimple.cashValue"/>
									<label for="">元</label>
								</view>
							</view>
						</view>
						<view class="batchCalculateContent" v-show="!resultShowFlag && calcuteMethod==='2'">
							<img src="/static/images/batchFileImport.png" alt="" style="width: 50%;">
							<text>暂无数据</text>
							<text style="font-size: 14px;margin-top: 10rpx;">点击下方按钮输入批量数据</text>
						</view>
					</view>
					<!-- 现金价值单利复利结果展示 -->
					<view class="resultContent">
						<!-- 单次计算显示结果 -->
						<view class="simpleDataResult" v-if="resultShowFlag && calcuteMethod == '1'">
							<view class="inputItem">
								<text class="resultTitle">IRR复利</text>
								<text class="calcNumber">{{irrAndSimpleResInfos.length>0?(irrAndSimpleResInfos[0]['irrValue'] * 100).toFixed(5):null}}%</text>
							</view>
							<view class="inputItem">
								<text class="resultTitle">单利</text>
								<text class="calcNumber">{{irrAndSimpleResInfos.length>0?(irrAndSimpleResInfos[0]['simpleValue'] * 100).toFixed(5):null}}%</text>
							</view>
						</view>
						<!-- 批量计算显示结果 -->
						<view class="batchDataResult" v-if="resultShowFlag && calcuteMethod == '2'">
							<scroll-view scroll-y="true" class="scroll-Y">
								<view class="scroll-view-item">
									<view class="resultTh">
										<text>保单年度</text>
										<text>现金价值</text>
										<text>IRR复利</text>
										<text>单利</text>
									</view>
									<view class="resultTd" v-for="item in resIrrAndSimpleResInfos">
										<text>{{item.nyear}}</text>
										<text>{{item.cashValue}}</text>
										<text class="resultNumber">{{(item.simpleValue*100).toFixed(5)}}%</text>
										<text class="resultNumber">{{(item.irrValue * 100).toFixed(5)}}%</text>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<!-- 操作 -->
					<view class="optionContent">
						<button type="default" plain="true" form-type="reset">清空</button>
						<button type="default" plain="true"
						class="btn" @click="calcute(2)"
						v-show="calcuteMethod==2">输入批量数据</button>
						<button type="default" plain="true" class="btn" 
						@click="calcute(1)" v-show="calcuteMethod==1"
						>开始计算</button>
					</view>
					
				</form>
			
			</scroll-view>
		</view>
	<!-- </view> -->
	<!-- <view v-show="irrFlag == true">
		<dataImport></dataImport>
	</view> -->
</template>

<script>
	import api from "../../api/api";
	import {nanoid} from 'nanoid';
	import dataHandling from "../../util/dataHandling";
	import dataImport from "../dataImport/data-import.vue"

	export default {
		data() {
			return {
				isNeedOfficialAccountQrcode:true,
				calcuteType:'1',   //计算类型(1:增额; 2:年金)
				withdrawalType:'1',        	//提领方式(1:正常提领; 2:减保取现)
				resultShowFlag:false,
				calcuteMethod:'1',         //计算方式(1:单次; 2:批量)
				businessType:1,
				mobile:undefined,
				irrAndSimpleCalcuteParam:{},
				yearWithdrawal:{
					withdrawalType:undefined,
					withdrawalStart:undefined,
					withdrawalEnd:undefined,
					yearWithdrawalAmount:undefined,
				},
				irrAndSimple:{
					nyear:undefined,
					cashValue:undefined
				},
				yearWithdrawalInfos:[],
				irrAndSimpleInfos:[],
				irrAndSimpleResInfos:[] ,// 计算结果
				resIrrAndSimpleResInfos:[],
				irrFlag:Boolean = false
			}
		},
		components:{
		            dataImport
		},
		onLoad() {
			//初始化删除上次批量计算结果
			uni.removeStorageSync('resIrrAndSimpleResInfos');
			if(!uni.getStorageSync('businessNo')){
				uni.setStorageSync('businessNo', nanoid().replace(/\_/g,""));	
			}else{
				this.businessNo = uni.getStorageSync('businessNo');
			}
			if(dataHandling.getQueryString('subscribe')==0){
				this.isNeedOfficialAccountQrcode = true;
			}else{
				this.isNeedOfficialAccountQrcode = false;
			}
			if(dataHandling.getQueryString('openId')) {
				
				uni.setStorageSync('openId',dataHandling.getQueryString('openId'))
			}else if(!uni.getStorageSync('openId')){
				
				api.getWxUserInfo({userApplyType:'1',businessNo:uni.getStorageSync('businessNo')}).then(res=>{
					console.log(res);
					if(res['success']){
						window.location.href =  res.data.paymentForm.action;
					}
				})	
			}
			if(dataHandling.getQueryString('subscribe')==0 || !uni.getStorageSync('openId')){
				this.isNeedOfficialAccountQrcode = true;
			}else{
				this.isNeedOfficialAccountQrcode = false;
			}
			if(this.yearWithdrawal.length>0){
				this.yearWithdrawalInfos.push({...this.yearWithdrawal,withdrawalType:this.withdrawalType?'1':'2'})
			}
		},
		methods: {
			switchTab(e){
				if(this.calcuteType !=e){
					this.calcuteType = e;
					//点年金时初始化1条提领信息
					if(e=='2'){
						this.yearWithdrawalInfos = [].concat([{withdrawalType:'1',
						withdrawalStart:null,
						yearWithdrawalAmount:null}]);
					}
					this.resultShowFlag = false;
				}
				
			},
			// calcuteMethod判断单次还是批量；businessType判断保存还是计算
			calcute(businessType){
				console.log(this.businessType)
				if(this.calcuteMethod==='1'){
					// 计算
					
					this.irrAndSimpleCalte();
				}else if(this.calcuteMethod === '2'){
					//批量
					if(!this.irrAndSimpleCalcuteParam.paymentPeriod || this.irrAndSimpleCalcuteParam.paymentPeriod<1){
						uni.showToast({
						title: '请填写交费年限且交费年限必须大于0',
						duration: 2000,
						icon: 'none'					
					})
						return;
					}
					if(!this.irrAndSimpleCalcuteParam.annualPremium){
						uni.showToast({
						title: '请填写年交保费',
						duration: 2000,
						icon: 'none'					
					
						})
						return;
					}
					// 输入批量数据，缓存当页数据
					const calcuteData = {
						paymentPeriod:this.irrAndSimpleCalcuteParam.paymentPeriod,
						annualPremium:this.irrAndSimpleCalcuteParam.annualPremium,
						allFirstPayment:this.irrAndSimpleCalcuteParam.allFirstPayment,
						yearWithdrawalInfos:this.yearWithdrawalInfos,
						calcuteType:this.calcuteType,
						businessNo:this.businessNo,
						businessType:this.businessType
					}
					uni.setStorageSync('calcuteData',calcuteData)
					uni.navigateTo({
						url: '/pages/dataImport/data-import'
					});
					// this.irrFlag = true;
				}
			},
			//点击单次时初始化数据
			initCashValue(calcuteMethod){
				if(this.calcuteMethod != calcuteMethod){
					this.calcuteMethod = calcuteMethod;
					if(calcuteMethod === '1'){
						this.irrAndSimple = {nyear:null,cashValue:null};
						this.irrAndSimpleInfos = [].concat([{nyear:null,cashValue:null}]);
						console.log(this.irrAndSimple)
					}
					//切换单次还是批量时，清空结果
					this.resultShowFlag = false;
				}
				
			},
			changeWithdrawalType(){
				this.withdrawalType = !this.withdrawalType;
				console.log(this.withdrawalType)
				if(!this.withdrawalType){
					this.yearWithdrawalInfos = [].concat([{withdrawalType:'2',
					withdrawalStart:null,
					withdrawalEnd:null,
					yearWithdrawalAmount:null,}]);
					console.log(this.yearWithdrawalInfos)
				}else{
					this.yearWithdrawalInfos = [];
				}
			},
			//提领信息+
			add(){
				this.yearWithdrawalInfos.push({withdrawalType:undefined,
					withdrawalStart:undefined,
					withdrawalEnd:undefined,
					yearWithdrawalAmount:undefined,
					withdrawalType:this.withdrawalType?'1':'2'
					})
			},
			//提领信息-
			reduce(idx){
				if(this.yearWithdrawalInfos.length>1){
					this.yearWithdrawalInfos.splice(idx,1)
				}
				
			},
			// 计算接口
			irrAndSimpleCalte(){
				if(!this.irrAndSimpleCalcuteParam.paymentPeriod){
					uni.showToast({
					title: '请填写交费年限',
					duration: 2000,
					icon: 'none'					
					})
					return;
				}
				if(!this.irrAndSimpleCalcuteParam.annualPremium){
					uni.showToast({
					title: '请填写年交保费',
					duration: 2000,
					icon: 'none'					
					})
					return;
				}
				if(this.businessType == 2){
					if(!this.mobile){
						uni.showToast({
						title: '保存时手机号必填',
						duration: 2000,
						icon: 'none'					
						})
						return;
					}
				}
				if(this.calcuteMethod == 1){
					if(!this.irrAndSimple.nyear){
						uni.showToast({
						title: '现金价值年度未输入！',
						duration: 2000,
						icon: 'none'					
						})
						return;
					}
					if(!this.irrAndSimple.nyear){
						uni.showToast({
						title: '生存总利益未输入！',
						duration: 2000,
						icon: 'none'					
						})
						return;
					}
				}
				const params = {
					...this.irrAndSimpleCalcuteParam,
					calcuteType:this.calcuteType,
					businessType:this.businessType,
					calcuteMethod:this.calcuteMethod,
					businessNo:uni.getStorageSync('businessNo'),
					mobile: null,
					loginNo: null,
					wechat_openid: uni.getStorageSync('openId') || '',
					yearWithdrawalInfos:this.yearWithdrawalInfos,
					irrAndSimpleInfos:[].concat([this.irrAndSimple]),
					withdrawalType:this.withdrawalType?'1':'2',
					decimal: 5
				};
				api.irrAndSimpleCalcute(params).then(res=>{
					console.log(res)
					if(res.success === true){
						if(res.data.irrAndSimpleResInfos){
							this.irrAndSimpleResInfos = res.data.irrAndSimpleResInfos;
							this.resultShowFlag = true;
						}else{
							this.irrAndSimpleResInfos = [];
						}
					}else{
						this.irrAndSimpleResInfos = [];
						uni.showToast({
						title: res['message'],
						duration: 2000,
						icon: 'none'					
						})
					}
				})
			}
			
		},
		onShow() {
			if(uni.getStorageSync('resIrrAndSimpleResInfos')){
				this.resIrrAndSimpleResInfos = uni.getStorageSync('resIrrAndSimpleResInfos');
				this.calcuteMethod = '2';
				this.resultShowFlag = true;
			}
		}
	}
</script>

<style>
	@import 'index.css';
</style>
