<template>
	<div class="mortgageCalculatorContainer">
		<view class="tabTitle" v-if="!isReadonly">
			<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 v-if="!isReadonly">公积金</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="请输入" :disabled="isReadonly"/>
							<span>{{item.unit}}</span>
						</div>
						<div v-else-if="item.type==='select'" style="width:55%">
							<view class="btn_wrapper">
								<button class="min-btn" @click="item.value=listItem.value" :class="{actived:item.value==listItem.value}" type="default" plain="true" v-for="listItem of repaymentMethodLists">{{listItem.text}}</button>
							</view>
						</div>
					</li>
				</ul>
			</view>
			
			<!-- 商业贷款 -->
			<view class="commercialLoans" v-if="loanType=='1'|| loanType=='3'">
				<h5 v-if="!isReadonly">商业贷款</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="请输入" :disabled="isReadonly"/>
							<span>{{item.unit}}</span>
						</div>
						<div v-else-if="item.type==='select'" style="width:55%">
							<view class="btn_wrapper">
								<button class="min-btn" @click="item.value=listItem.value" :class="{actived:item.value==listItem.value}" type="default" plain="true" v-for="listItem of repaymentMethodLists">{{listItem.text}}</button>
							</view>
						</div>
					</li>
				</ul>
			</view>
		</view>
		<view class="footer" v-if="!isReadonly">
			<view @click="save()" class="save">保存</view>
			<view @click="clear()" class="clear">清空</view>
		</view>
	</div>
</template>

<script>
	import { ref,toRefs,reactive } from "vue";
	export default{
		props: ['isReadonly','loanType','a','b'],
		emits:['getData'],
		data(){
			return{
				accumulationFundParams:[
					{id:'00',text:'公积金贷款余额',value:null,type:'digit',unit:'万元',alias:'oldHouseLoanBalance'},
					{id:'01',text:'公积金还款方式',value:1,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:1,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}
				],
				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:{
			
		},
		setup(props,content) {
			const a = reactive({value:props.a});
			const b = reactive({value:props.b});
			const loanType = ref(props.loanType);
			const isReadonly = ref(props.isReadonly);
			const sendData = (e) =>{
				content.emit('getData',e);
			}
			return {loanType,sendData,a,b,isReadonly}
		},
		mounted(){
			if(JSON.stringify(this.a.value) != '{}' && JSON.stringify(this.a.value) != '[]'){
				this.accumulationFundParams = this.a.value
			}
			if(JSON.stringify(this.b.value) != '{}' && JSON.stringify(this.b.value) != '[]'){
				this.commercialLoansParams = this.b.value;
			}
			if(!(this.accumulationFundParams.findIndex(item=>item.value==null || item.value == '') >= 0) && !(this.commercialLoansParams.findIndex(item=>item.value==null || item.value == '') >= 0)){
				this.loanType = 3;
			}else if(!(this.accumulationFundParams.findIndex(item=>item.value==null || item.value == '') >= 0)){
				this.loanType = 2;
			}else{
				this.loanType = 1;
			}
		},
		methods:{
			clear(){
				this.accumulationFundParams=[
					{id:'00',text:'公积金贷款余额',value:null,type:'digit',unit:'元',alias:'oldHouseLoanBalance'},
					{id:'01',text:'公积金还款方式',value:1,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'},
				];
				this.commercialLoansParams=[
					{id:'00',text:'商业贷款余额',value:null,type:'digit',unit:'元',alias:'oldHouseLoanBalance'},
					{id:'01',text:'商业还款方式',value:1,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'},
				];
			},
			selectLoanType(e){
				if(this.loanType != e){
					this.loanType = e;
					this.clear();
				}
			},
			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/100;
					houseLoanOldInfo.oldCalcuteType = this.commercialLoansParams.filter(item=>item.alias==='oldCalcuteType').pop().value;
					houseLoanOldInfo.oldHouseNo = 1;
					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/100;
					houseLoanOldInfo.oldCalcuteType = this.accumulationFundParams.filter(item=>item.alias==='oldCalcuteType').pop().value;
					houseLoanOldInfo.oldHouseNo = 1;
					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/100;
					houseLoanOldInfo.oldCalcuteType = this.commercialLoansParams.filter(item=>item.alias==='oldCalcuteType').pop().value;
					houseLoanOldInfo.oldLoanType = 1;
					houseLoanOldInfo.oldHouseNo = 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/100;
					houseLoanOldInfo1.oldCalcuteType = this.accumulationFundParams.filter(item=>item.alias==='oldCalcuteType').pop().value;
					houseLoanOldInfo1.oldLoanType = 2;
					houseLoanOldInfo.oldHouseNo = 1;
					this.houseLoanOldList = [houseLoanOldInfo,houseLoanOldInfo1];
				}
				
				// 旧房贷款信息集合
				const ab = {
					a:this.accumulationFundParams,
					b:this.commercialLoansParams,
					c:this.houseLoanOldList
				}
				this.sendData(ab)
			},
			
		}
	}
</script>

<style lang="scss">
	.mortgageCalculatorContainer{
		padding: 0 20rpx 70rpx;
		position: relative;
		.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;
					}
					.btn_wrapper{
						display: flex;
						width: 100%;
						.min-btn{
							position: relative;
							flex: 1;
							width: 0;
							margin-left: 10rpx;
							line-height: 1.8;
							font-size: 26rpx;
							border-radius: 6rpx;
							border: 1px solid #CEB07D;
							&.actived{
								color: #6B4000;
							}
							&.actived::before{
								display: block;
								content: "";
								position: absolute;
								right: 0;
								bottom: 0;
								width: 0;
								height: 0;
								border: 18rpx solid #fed9a1;
								border-top-color: transparent;
								border-left-color: transparent;
							}
							
						}
					}
					
				}
			}
		}
		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{
			position: relative;
			margin: 20px auto;
			display: flex;
			justify-content: center;
			.save{
				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;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.clear{
				position: absolute;
				right: 0;
				bottom: 0;
				border-bottom: 1px solid #000;
				padding: 0 10rpx;
			}
		}
	
		
	}

</style>