<template>
	<div class="paramsContainer">
		<h5>规划参数<span>(点击参数值即可修改参数)</span></h5>
		<ul>
			<template  v-for="item in editParamLists">
				<li :key="item.id" v-if="item.isShow">
					<div>
						<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 v-model="cityId" :localdata="provinceList" popup-title="请选择城市" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
								  </view>
							</div>
						</div>
					</div>
					<div v-if="item.remark" class="tips">
						<view>
							<text style="font-size: 24rpx;color: #c0c4cc;">{{item.remark}}</text>
						</view>
					</div>
				</li>
			</template>
		</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 {toRefs} from "vue";
	import api from '../../api/api';
	import common from '../../common/common'
	export default{
		props:['cityInfo','planningParams'],
		emits:['getData'],
		data(){
			return {
				cityId:null,
				paramsLists:[
					{id:'01',name:'房价增长率',value:5.32,type:'data-picker',remark:'',alias:'housePriceGrowthRate',isShow:true },
					{id:'02',name:'房屋折旧率',value:2,type:'number',remark:'',alias:'houseDepreciationRate',isShow:true},
					{id:'03',name:'首付款最低成数',value:30,type:'number',remark:'',alias:'downPaymentMin',isShow:true},
					{id:'05',name:'资产投资回报率',value:3.74,type:'number',remark:'',alias:'tnvestmentRate',isShow:true},
					{id:'06',name:'投入资金增长率',value:0,type:'number',remark:'"年末预备投入房产资金"将会按照该设定值进行增长型测算',alias:'incomeRate',isShow:true},
					{id:'07',name:'可接受本金损失',value:10,type:'number',remark:'',alias:'acceptableLossRate',isShow:true}
				],
				editParamLists:[],
				provinceList:[],
			}
			
		},
		name:'planningParameters',
		components:{
			
		},
		onLoad(){
		},
		setup(props,content){
			const cityInfo = props.cityInfo ? props.cityInfo : null;
			const planningParams = props.planningParams ? toRefs(props.planningParams) : null;
			const sendData = (e) =>{
				content.emit('getData',e);
			}
			return {sendData,cityInfo,planningParams}
		},
		methods:{
			onchange(e) {
			        // const value = e.detail.value;
			},
			 onnodeclick(node) {
				 this.cityInfo = {
					...this.cityInfo,
					cityId: node.value,
					provinceId:node.parent_value ? node.parent_value : null,
					cityName:node.parent_value ? node.text : this.cityInfo.cityName,
					provinceName:node.parent_value ? this.cityInfo.provinceName : node.text,
				 }
				 this.queryCommercialHousingPrice()
			 },
			 resetParams(){
				 this.editParamLists = JSON.parse(JSON.stringify(this.paramsLists));
				 this.cityId=null;
				 this.cityInfo = {cityId:null,provinceId:null,cityName:null,provinceName:null};
			 },
			 provCityQry(){
			 	api.provCityQry({insurerId:888}).then((res)=>{
			 		if(res['success']){
			 			this.provinceList = common.action(res['data']['provinces']);
			 		}
			 	})
			 },
			 confirmParams(){
				 for(let i=0;i<this.editParamLists.length;i++){
					 if(this.editParamLists[i].alias==='tnvestmentRate' && this.editParamLists[i].value>2000){
						common.errorDialog(1,`${this.editParamLists[i].name}一般最高不超过2000`) ;
						return false;
					 }
					 if(this.editParamLists[i].value>100){
						common.errorDialog(1,`${this.editParamLists[i].name}最高不应超过100`) ;
						return false;
					 }
				 }
				 const params = {
					 housePriceGrowthRate:(this.editParamLists.filter(item=>item.alias==='housePriceGrowthRate')[0].value / 100).toFixed(4),//房价增长率
					 houseDepreciationRate:(this.editParamLists.filter(item=>item.alias==='houseDepreciationRate')[0].value / 100).toFixed(4),//房屋折旧率
					 downPaymentMin:this.editParamLists.filter(item=>item.alias==='downPaymentMin')[0].value,//首付款最低成数(百分位)
					 tnvestmentRate:(this.editParamLists.filter(item=>item.alias==='tnvestmentRate')[0].value / 100).toFixed(4),//投资回报率
					 incomeRate:(this.editParamLists.filter(item=>item.alias==='incomeRate')[0].value / 100).toFixed(4),//收入增长率
					 acceptableLossRate:(this.editParamLists.filter(item=>item.alias==='acceptableLossRate')[0].value / 100).toFixed(4),//可接受本金损失率,
					 cityId:this.cityInfo.cityId,
					 provinceId:this.cityInfo.provinceId,
					 provinceName:this.cityInfo.provinceName,
					 cityName:this.cityInfo.cityName,
				 }
				this.sendData(params)
			 },
			 // 获取房价增长率
			 queryCommercialHousingPrice(){
				 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));
			if(!(JSON.stringify(this.planningParams) == '{}')){
				const result = this.planningParams;
				this.editParamLists.map(item=>{
					if(result[item.alias] && result[item.value]){
						item.value = result['downPaymentMin'].value;
						// 首付成数不需要换算
						if(item.alias !== 'downPaymentMin'){
							if(result[item.alias].value){
								item.value = result[item.alias].value * 100
							}
						}
					}
				})
			}
			this.provCityQry();
			this.cityId = this.cityInfo.cityId;
			this.queryCommercialHousingPrice()
		}
	}
</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{
	
			padding: 16rpx 0;
			border-bottom: 1px solid #E4E4E4;
			div{
				display: flex;
				align-items: center;
				.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>