<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: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 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:30%">
							<uni-data-select v-model="item.value" :localdata="repaymentMethodLists" :disable="isReadonly"></uni-data-select>
						</div>
					</li>
				</ul>
			</view>
		</view>
		<view class="footer" v-if="!isReadonly">
			<view @click="save()">保存</view>
		</view>
	</div>
</template>

<script>
	import { ref,toRefs } 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: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}
				],
				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) {
			console.log('子组件拿到值了',props);
			const a = toRefs(props.a);
			const b = toRefs(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) != '{}'){
				this.accumulationFundParams = JSON.parse(JSON.stringify(this.a))[0]._object
			}
			if(JSON.stringify(this.b) != '{}'){
				this.commercialLoansParams = JSON.parse(JSON.stringify(this.b))[0]._object;
			}
			if(this.accumulationFundParams){
				this.loanType = 1;
			}else if(this.commercialLoansParams){
				this.loanType = 2;
			}else{
				this.loanType = 3;
			}
		},
		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;
					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;
					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;
					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;
					houseLoanOldInfo1.oldCalcuteType = this.accumulationFundParams.filter(item=>item.alias==='oldCalcuteType').pop().value;
					houseLoanOldInfo1.oldLoanType = 2;
					houseLoanOldInfo.oldHouseNo = 1;
					this.houseLoanOldList = [houseLoanOldInfo,houseLoanOldInfo1];
				}
				
				// 旧房贷款信息集合
				// console.log(this.houseLoanOldList)
				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;
					}
				}
			}
		}
		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>