<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'">
						<uni-data-picker :localdata="items"
						popup-title="请选择城市"
						 @change="onchange" 
						 @nodeclick="onnodeclick"></uni-data-picker>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				paramsLists:[
					{id:'01',name:'房价增长率',value:6.25,type:'data-picker',remark:''},
					{id:'02',name:'房屋折旧率',value:2,type:'number',remark:''},
					{id:'03',name:'首付款最低成数',value:30,type:'number',remark:''},
					{id:'04',name:'新房贷款年利率',value:4.9,type:'number',remark:''},
					{id:'05',name:'资产投资回报率',value:3.74,type:'number',remark:''},
					{id:'06',name:'收入增长率',value:3,type:'number',remark:'国家统计局2022年第二季度数据显示全国居民人均可支配收入增长率为3.0%'},
					{id:'07',name:'可接受本金损失',value:10,type:'number',remark:''}
				],
				editParamLists:[]
			}
			
		},
		name:'planningParameters',
		components:{
			
		},
		onLoad(){
			
		},
		methods:{
			onchange(e) {
			        const value = e.detail.value
			},
			 onnodeclick(node) {
			 }
		},
		mounted() {
			this.editParamLists = JSON.parse(JSON.stringify(this.paramsLists))
		}
	}
</script>

<style lang="scss">
	.paramsContainer{
		background-color: #fff;
		padding: 44rpx 20rpx;
		h5{
			position: relative;
			color: #CEB07D;
			font-size: 32rpx;
			padding-left: 20rpx;
			margin-bottom: 40rpx;
			span{
				font-size: 26rpx;	
			}
			&::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;
			}
		}
		ul,li{
			list-style: none;
			padding: 0;
			margin: 0;
		}
		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%;
			}
		}
	}
</style>