<template>
	<view class="qrcodeContainer" v-if="isNeedOfficialAccountQrcode">
		<view class="qrcodeContent">
			<img src="../../static/images/qrcodeBg.png" alt="" srcset="">
		</view>
		
	</view>
	<view class="content" v-if="!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="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[0]['irrValue']).toFixed(5) * 100}}%</text>
						</view>
						<view class="inputItem">
							<text class="resultTitle">单利</text>
							<text class="calcNumber">{{(irrAndSimpleResInfos[0]['simpleValue']).toFixed(5) * 100}}%</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">
									<text>10</text>
									<text>567,789</text>
									<text class="resultNumber">37.125%</text>
									<text class="resultNumber">10.123%</text>
								</view>
								<view class="resultTd">
									<text>10</text>
									<text>567,789</text>
									<text class="resultNumber">37.125%</text>
									<text class="resultNumber">10.123%</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(1)"
					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>
</template>

<script>
	import api from "../../api/api";
	import {nanoid} from 'nanoid';
	import dataHandling from "../../util/dataHandling";
	
	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:[] // 计算结果
			}
		},
		onLoad() {
			if(!uni.getStorageSync('businessNo')){
				uni.setStorageSync('businessNo', nanoid());	
			}
			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(this.yearWithdrawal.length>0){
				this.yearWithdrawalInfos.push({...this.yearWithdrawal,withdrawalType:this.withdrawalType?'1':'2'})
			}
		},
		methods: {
			switchTab(e){
				this.calcuteType = e;
				//点年金时初始化1条提领信息
				if(e=='2'){
					this.yearWithdrawalInfos = [].concat([{withdrawalType:'1',
					withdrawalStart:null,
					yearWithdrawalAmount:null}]);
				}
			},
			// calcuteMethod判断单次还是批量；businessType判断保存还是计算
			calcute(businessType){
				this.businessType = businessType;
				if(this.calcuteMethod==='1'){
					// 计算
					this.irrAndSimpleCalte();
				}else if(this.calcuteMethod === '2'){
					if(!this.irrAndSimpleCalcuteParam.paymentPeriod){
						uni.showToast({
						title: '请填写交费年限',
						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
					}
					uni.setStorageSync('calcuteData',calcuteData)
					uni.navigateTo({
						url: '/pages/dataImport/data-import'
					});
				}
			},
			//点击单次时初始化数据
			initCashValue(calcuteMethod){
				this.calcuteMethod = calcuteMethod;
				if(calcuteMethod === '1'){
					this.irrAndSimple = {nyear:null,cashValue:null};
					this.irrAndSimpleInfos = [].concat([{nyear:null,cashValue:null}]);
					console.log(this.irrAndSimple)
				}
			},
			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;
					}
				}
				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){
						this.irrAndSimpleResInfos = res.data.irrAndSimpleResInfos;
						console.log(this.irrAndSimpleResInfos)
						this.resultShowFlag = true;
					}
				})
			}
		}
	}
</script>

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