<template>
	<div class="mortgageCalculatorContainer">
		<!-- 关闭按钮 -->
		<div class="closeBtn">
			<svg t="1663922894848" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2545" width="26" height="26"><path d="M557.311759 513.248864l265.280473-263.904314c12.54369-12.480043 12.607338-32.704421 0.127295-45.248112-12.512727-12.576374-32.704421-12.607338-45.248112-0.127295L512.127295 467.904421 249.088241 204.063755c-12.447359-12.480043-32.704421-12.54369-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.280796l262.975407 263.775299-265.151458 263.744335c-12.54369 12.480043-12.607338 32.704421-0.127295 45.248112 6.239161 6.271845 14.463432 9.440452 22.687703 9.440452 8.160624 0 16.319527-3.103239 22.560409-9.311437l265.216826-263.807983 265.440452 266.240344c6.239161 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.311759 513.248864z" p-id="2546"></path></svg>
		</div>
		<view class="tabTitle">
			<view v-for="item of loanTypeLists">
				<text :class="{ actived: item.value===loanType }" @click="selectLoanType(item.value)">{{item.text}}</text>
			</view>
		</view>
		<view>
			<!-- 公积金贷款 -->
			<view class="accumulationFundContainer" v-if="loanType===2 || loanType===3">
				<h5>公积金</h5>
				<ul>
					<li v-for="item of accumulationFundParams" :key="item.id">
						<div>{{item.text}}</div>
						<div v-if="item.type==='number' || item.type==='digit'">
							<input class="uni-input" type="{{item.type}}"  v-model="item.value" placeholder="请输入"/>
							<span>{{item.unit}}</span>
						</div>
						<div v-else-if="item.type==='select'" style="width:30%">
							<uni-data-select v-model="item.value" :localdata="repaymentMethodLists"></uni-data-select>
						</div>
					</li>
				</ul>
			</view>
			
			<!-- 商业贷款 -->
			<view class="commercialLoans" v-if="loanType===1|| loanType===3">
				<h5>商业贷款</h5>
				<ul>
					<li v-for="item of commercialLoansParams" :key="item.id">
						<div>{{item.text}}</div>
						<div v-if="item.type==='number' || item.type==='digit'">
							<input class="uni-input" type="{{item.type}}"  v-model="item.value" placeholder="请输入"/>
							<span>{{item.unit}}</span>
						</div>
						<div v-else-if="item.type==='select'" style="width:30%">
							<uni-data-select v-model="item.value" :localdata="repaymentMethodLists"></uni-data-select>
						</div>
					</li>
				</ul>
			</view>
		</view>
		<view class="footer">
			<view @click="save()">保存</view>
		</view>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				accumulationFundParams:[
					{id:'00',text:'公积金贷款余额',value:null,type:'digit',unit:'元',alias:'oldHouseLoanBalance'},
					{id:'01',text:'公积金还款方式',value:null,type:'select',unit:'',alias:'oldCalcuteType'},
					{id:'02',text:'剩余月份',value:null,type:'number',unit:'月',alias:'oldHouseRepaymentMonth'},
					{id:'03',text:'年利率',value:null,type:'digit',unit:'%',alias:'oldInterestRate'},
				],
				commercialLoansParams:[
					{id:'00',text:'商业贷款余额',value:null,type:'digit',unit:'元',alias:'oldHouseLoanBalance'},
					{id:'01',text:'商业还款方式',value:null,type:'select',unit:'',alias:'oldCalcuteType'},
					{id:'02',text:'剩余月份',value:null,type:'number',unit:'月',alias:'oldHouseRepaymentMonth'},
					{id:'03',text:'年利率',value:null,type:'digit',unit:'%',alias:'oldInterestRate'},
				],
				loanTypeLists:[
					{id:'00',text:'商业贷款',value:1},
					{id:'01',text:'公积金贷款',value:2},
					{id:'02',text:'组合贷款',value:3}
				],
				loanType:1,// 默认选择商业贷款
				repaymentMethodLists:[{id:'00',text:'等额本金',value:1},{id:'01',text:'等额本息',value:2}],
				houseLoanOldList:[],
				loadInfo:{
					oldHouseLoanBalance:null, //旧房贷款余额(单位万)
					oldHouseRepaymentMonth:null, //旧房贷款剩余月份
					oldInterestRate:null,//旧房贷款利率
					oldCalcuteType:1,  //旧房还款计算方式 【1:等额本息】与【2:等额本金】  【必填】
					oldLoanType:null, //旧房贷款计算方式 【1:商业贷款】与【2:公积金贷款】【必填】
					oldIsPortfolioLoan:null //旧房是否组合贷 【1:是】与【2:否】【必填】
				}
				
			}
		},
		name:'loanBalance',
		components:{
			
		},
		onLoad(){
			
		},
		methods:{
			selectLoanType(e){
				this.loanType = e;
			},
			errorDialog(type,content){
				// type 1 必填项校验 2 规则校验
				uni.showModal({
				  title: type===1 ? '必填项校验' : '规则校验',
				  content:content,
				  showCancel:false,
				  success: function (res) {
						  if (res.confirm) {
								  console.log('用户点击确定');
						  } else if (res.cancel) {
								  console.log('用户点击取消');
						  }
				  }
				});
			},
			save(){
				let houseLoanOldInfo = {
					oldLoanType:this.loanType,
					oldIsPortfolioLoan:this.loanType === 3 ? 1 : 2,
					oldHouseLoanBalance:null,
					oldHouseRepaymentMonth:null,
					oldInterestRate:null,
					oldCalcuteType:null
				};
				let houseLoanOldInfo1 = {
					oldLoanType:this.loanType,
					oldIsPortfolioLoan:this.loanType === 3 ? 1 : 2,
					oldHouseLoanBalance:null,
					oldHouseRepaymentMonth:null,
					oldInterestRate:null,
					oldCalcuteType:null
				};
				if(this.loanType===1){
					this.houseLoanOldList = [];
					// 商业贷款
					for(let i=0;i<this.commercialLoansParams.length;i++){
						if(!this.commercialLoansParams[i].value){
							this.errorDialog(1,`${this.commercialLoansParams[i].text}为必填项`);
							return;
						}else if(this.commercialLoansParams[i].value < 0 || isNaN(this.commercialLoansParams[i].value) ){
							this.errorDialog(2,`${this.commercialLoansParams[i].text}必须为大于0的数字`);
							return;
						}else if(this.commercialLoansParams[i].alias==='oldInterestRate'){
							if(this.commercialLoansParams[i].value > 100){
								this.errorDialog(2,`${this.commercialLoansParams[i].text}必须小于100`);
								return;
							}
						}else if(this.commercialLoansParams[i].alias==='oldHouseRepaymentMonth'){
							if(this.commercialLoansParams[i].value > 360){
								this.errorDialog(2,`${this.commercialLoansParams[i].text}必须小于360`);
								return;
							}
						}
					}
					houseLoanOldInfo.oldHouseLoanBalance = this.commercialLoansParams.filter(item=>item.alias==='oldHouseLoanBalance').pop().value;
					houseLoanOldInfo.oldHouseRepaymentMonth= this.commercialLoansParams.filter(item=>item.alias==='oldHouseRepaymentMonth').pop().value;
					houseLoanOldInfo.oldInterestRate= this.commercialLoansParams.filter(item=>item.alias==='oldInterestRate').pop().value;
					houseLoanOldInfo.oldCalcuteType = this.commercialLoansParams.filter(item=>item.alias==='oldCalcuteType').pop().value;
					this.houseLoanOldList = [houseLoanOldInfo];
				}else if(this.loanType===2){
					// 公积金贷款
					for(let i=0;i<this.accumulationFundParams.length;i++){
						this.houseLoanOldList=[];
						if(!this.accumulationFundParams[i].value){
							this.errorDialog(1,`${this.accumulationFundParams[i].text}为必填项`);
							return;
						}else if(this.accumulationFundParams[i].value < 0  || isNaN(this.accumulationFundParams[i].value)){
							this.errorDialog(2,`${this.accumulationFundParams[i].text}必须为大于0的数字`);
							return;
						}else if(this.accumulationFundParams[i].alias==='oldInterestRate'){
							if(this.accumulationFundParams[i].value > 100){
								this.errorDialog(2,`${this.accumulationFundParams[i].text}必须小于100`);
								return;
							}
						}else if(this.accumulationFundParams[i].alias==='oldHouseRepaymentMonth'){
							if(this.accumulationFundParams[i].value > 360){
								this.errorDialog(2,`${this.accumulationFundParams[i].text}必须小于360`);
								return;
							}
						}
					}
					houseLoanOldInfo.oldHouseLoanBalance = this.accumulationFundParams.filter(item=>item.alias==='oldHouseLoanBalance').pop().value;
					houseLoanOldInfo.oldHouseRepaymentMonth= this.accumulationFundParams.filter(item=>item.alias==='oldHouseRepaymentMonth').pop().value;
					houseLoanOldInfo.oldInterestRate= this.accumulationFundParams.filter(item=>item.alias==='oldInterestRate').pop().value;
					houseLoanOldInfo.oldCalcuteType = this.accumulationFundParams.filter(item=>item.alias==='oldCalcuteType').pop().value;
					this.houseLoanOldList = [houseLoanOldInfo];
				}else{
					// 组合贷款
					// 公积金贷款
					for(let i=0;i<this.accumulationFundParams.length;i++){
						if(!this.accumulationFundParams[i].value){
							this.errorDialog(1,`${this.accumulationFundParams[i].text}为必填项`);
							return;
						}else if(this.accumulationFundParams[i].value < 0  || isNaN(this.accumulationFundParams[i].value)){
							this.errorDialog(2,`${this.accumulationFundParams[i].text}必须为大于0的数字`);
							return;
						}else if(this.accumulationFundParams[i].alias==='oldInterestRate'){
							if(this.accumulationFundParams[i].value > 100){
								this.errorDialog(2,`${this.accumulationFundParams[i].text}必须小于100`);
								return;
							}
						}else if(this.accumulationFundParams[i].alias==='oldHouseRepaymentMonth'){
							if(this.accumulationFundParams[i].value > 360){
								this.errorDialog(2,`${this.accumulationFundParams[i].text}必须小于360`);
								return;
							}
						}
					}
					// 商业贷款
					for(let i=0;i<this.commercialLoansParams.length;i++){
						if(!this.commercialLoansParams[i].value){
							this.errorDialog(1,`${this.commercialLoansParams[i].text}为必填项`);
							return;
						}else if(this.commercialLoansParams[i].value < 0 || isNaN(this.commercialLoansParams[i].value)){
							this.errorDialog(2,`${this.commercialLoansParams[i].text}必须为大于0的数字`);
							return;
						}else if(this.commercialLoansParams[i].alias==='oldInterestRate'){
							if(this.commercialLoansParams[i].value > 100){
								this.errorDialog(2,`${this.commercialLoansParams[i].text}必须小于100`);
								return;
							}
						}else if(this.commercialLoansParams[i].alias==='oldHouseRepaymentMonth'){
							if(this.commercialLoansParams[i].value > 360){
								this.errorDialog(2,`${this.commercialLoansParams[i].text}必须小于360`);
								return;
							}
						}
					}
					houseLoanOldInfo.oldHouseLoanBalance = this.commercialLoansParams.filter(item=>item.alias==='oldHouseLoanBalance').pop().value;
					houseLoanOldInfo.oldHouseRepaymentMonth= this.commercialLoansParams.filter(item=>item.alias==='oldHouseRepaymentMonth').pop().value;
					houseLoanOldInfo.oldInterestRate= this.commercialLoansParams.filter(item=>item.alias==='oldInterestRate').pop().value;
					houseLoanOldInfo.oldCalcuteType = this.commercialLoansParams.filter(item=>item.alias==='oldCalcuteType').pop().value;
					houseLoanOldInfo.oldLoanType = 1;
					houseLoanOldInfo1.oldHouseLoanBalance = this.accumulationFundParams.filter(item=>item.alias==='oldHouseLoanBalance').pop().value;
					houseLoanOldInfo1.oldHouseRepaymentMonth= this.accumulationFundParams.filter(item=>item.alias==='oldHouseRepaymentMonth').pop().value;
					houseLoanOldInfo1.oldInterestRate= this.accumulationFundParams.filter(item=>item.alias==='oldInterestRate').pop().value;
					houseLoanOldInfo1.oldCalcuteType = this.accumulationFundParams.filter(item=>item.alias==='oldCalcuteType').pop().value;
					houseLoanOldInfo1.oldLoanType = 2;
					this.houseLoanOldList = [houseLoanOldInfo,houseLoanOldInfo1];
				}
				
				// 旧房贷款信息集合
				console.log(this.houseLoanOldList)
				
			},
		}
	}
</script>

<style lang="scss">
	.mortgageCalculatorContainer{
		padding: 70rpx 20rpx;
		position: relative;
		.closeBtn{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
		.tabTitle{
			display: flex;
			margin-bottom: 30rpx;
			view{
				width: 0;
				flex: 1;
				text-align: center;
				text{
					position: relative;
					&.actived{
						color: #6B4000;
						&::after{
							content:'';
							position:absolute;
							bottom: -2px;
							left: 0;
							width: 100%;
							height: 4rpx;
							background: linear-gradient(125deg, rgba(206, 176, 125, 1), rgba(254, 213, 151, 1));
						}
					}	
				}
	
			}
		}
		ul{
			li{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #E4E4E4;
				height:80rpx;
				>div:last-child{
					display: flex;
					text-align: right;
					span{
						padding-left: 10rpx;
					}
				}
			}
		}
		h5{
			position: relative;
			color: #CEB07D;
			font-size: 32rpx;
			padding-left: 20rpx;
			margin-top: 20rpx;
			&::before{
				content:'';
				position:absolute;
				left: 0;
				top: 50%;
				width: 8rpx;
				height: 20rpx;
				transform: translateY(-50%);
				background: linear-gradient(123deg, #CEB07D 0%, #FED495 100%, #D1B27E 100%);
				border-radius: 8rpx;
				opacity: 1;
			}
		}
		.footer{
			width: 300rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%);
			border-radius: 4px;
			font-size: 36rpx;
			color: #6B4000;
			font-weight: 500;
			margin: 20px auto;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	
		
	}

</style>