<template>
	<div class="paramsContainer">
		<h5>规划参数<span>(点击参数值即可修改参数)</span></h5>
		<ul>
			<li v-for="item in editParamLists" :key="item.id">
				<div class="paramName">{{item.name}}</div>
				<div class="paramValue">
					<input class="uni-input" type="digit" min='1' maxlength="17" placeholder="" v-model.trim="item.value"/>
					<span>%</span>
				</div>
				<div class="dataSelect">
					<div v-if="item.type==='data-picker'">
						  <view>
						    <uni-data-picker :localdata="provinceList" popup-title="请选择城市" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
						  </view>
					</div>
				</div>
			</li>
		</ul>
		<div class="optionContent">
			<div class="confirm"><span @click="confirmParams()">确定</span></div>
			<div class="reset"><span @click="resetParams()">恢复默认</span></div>
		</div>
	</div>
</template>

<script>
	import api from '../../api/api';
	import common from '../../common/common'
	export default{
		emits:['getData'],
		data(){
			return {
				paramsLists:[
					{id:'01',name:'房价增长率',value:6.25,type:'data-picker',remark:'',alias:'housePriceGrowthRate' },
					{id:'02',name:'房屋折旧率',value:2,type:'number',remark:'',alias:'houseDepreciationRate'},
					{id:'03',name:'首付款最低成数',value:30,type:'number',remark:'',alias:'downPaymentMin'},
					{id:'04',name:'贷款年利率',value:4.9,type:'number',remark:'',alias:'interestRate'},
					{id:'05',name:'资产投资回报率',value:3.74,type:'number',remark:'',alias:'tnvestmentRate'},
					{id:'06',name:'收入增长率',value:3,type:'number',remark:'国家统计局2022年第二季度数据显示全国居民人均可支配收入增长率为3.0%',alias:'incomeRate'},
					{id:'07',name:'可接受本金损失',value:10,type:'number',remark:'',alias:'acceptableLossRate'}
				],
				editParamLists:[],
				provinceList:[],
				cityInfo:null
			}
			
		},
		name:'planningParameters',
		components:{
			
		},
		onLoad(){
			
		},
		setup(props,content){
			const sendData = (e) =>{
				content.emit('getData',e);
			}
			return {sendData}
		},
		methods:{
			onchange(e) {
			        // const value = e.detail.value;
			},
			 onnodeclick(node) {
				 // console.log(node);
				 this.cityInfo = {
				 		provinceId: node.value,
				 		cityId:node.parent_value ? node.parent_value : null,
				 		area:1,
				 		isNew:1
				 }
				 this.queryCommercialHousingPrice(this.cityInfo)
			 },
			 resetParams(){
				 this.editParamLists = JSON.parse(JSON.stringify(this.paramsLists))
			 },
			 provCityQry(){
			 	api.provCityQry({insurerId:888}).then((res)=>{
			 		if(res['success']){
			 			this.provinceList = common.action(res['data']['provinces']);
			 		}
			 	})
			 },
			 confirmParams(){
				 const params = {
					 housePriceGrowthRate:this.editParamLists.filter(item=>item.alias==='housePriceGrowthRate')[0].value,//房价增长率
					 houseDepreciationRate:this.editParamLists.filter(item=>item.alias==='houseDepreciationRate')[0].value,//房屋折旧率
					 downPaymentMin:this.editParamLists.filter(item=>item.alias==='downPaymentMin')[0].value,//首付款最低成数(百分位)
					 interestRate:this.editParamLists.filter(item=>item.alias==='interestRate')[0].value, //贷款年利率
					 tnvestmentRate:this.editParamLists.filter(item=>item.alias==='tnvestmentRate')[0].value,//投资回报率
					 incomeRate:this.editParamLists.filter(item=>item.alias==='incomeRate')[0].value,//收入增长率
					 acceptableLossRate:this.editParamLists.filter(item=>item.alias==='acceptableLossRate')[0].value,//可接受本金损失率
				 }
				this.sendData(params)
			 },
			 // 获取房价增长率
			 queryCommercialHousingPrice(provinceId,cityId){
				 api.queryCommercialHousingPrice(this.cityInfo).then(res=>{
					 if(res['success']){
						this.editParamLists.find(item=>item.alias==='housePriceGrowthRate')['value'] = res['data']['priceInfo']['rateB'];
					 }
				 })
			 }
		},
		mounted() {
			this.editParamLists = JSON.parse(JSON.stringify(this.paramsLists));
			this.provCityQry();
		}
	}
</script>

<style lang="scss">
	.paramsContainer{
		background-color: #fff;
		padding: 0 20rpx 44rpx;
		h5{
			position: relative;
			color: #CEB07D;
			font-size: 32rpx;
			padding-left: 20rpx;
			margin-bottom: 40rpx;
			span{
				font-size: 26rpx;
				font-weight: normal;
			}
			&::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;
			}
		}
		li{
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 20rpx 0;
			border-bottom: 1px solid #E4E4E4;
			.paramName{
				color: #6B4000;
				font-size: 30rpx;
				font-weight: bold;
				width: 0;
				flex: 0 0 35%;
				letter-spacing: 1px;
			}
			.paramValue{
				color: #CEB07D;
				font-size: 0.8125rem;
				font-weight: bold;
				display: flex;
				width: 0;
				flex: 0 0 20%;
				align-items: center;
				text-align: right;
			}
			.dataSelect{
				width: 0;
				flex: 0 0 40%;
			}
		}
		.optionContent{
			height: 94rpx;
			line-height: 94rpx;
			position: relative;
			margin-top: 40rpx;
			div{
				&.confirm{
					padding: 0 50px;
					box-shadow: 0px 2px 2px 1px rgb(0 0 0 / 35%);
					background:linear-gradient(to bottom right,#CEB07D,#FED597);
				}
				span{
					font-size: 36rpx;
					font-weight: bold;
					color: #6B4000;
					letter-spacing: 2px;
				}
				&.reset{
					position: absolute;
					right: 0;
					bottom: 0;
					span{
						color: #CEB07D;
						background-image:linear-gradient(to bottom right,#CEB07D,#FED597);
						background-clip:text;
						color:transparent;
						font-size:26rpx;
						border-bottom: 1px solid #CEB07D;
					}
				}
			}
		}
		.closeBtn{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
	}
</style>