<template>
	<div class="paramsContainer">
		<!-- 关闭按钮 -->
		<div class="closeBtn">
			<svg t="1663922894848" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2545" width="26" height="26"><path d="M557.311759 513.248864l265.280473-263.904314c12.54369-12.480043 12.607338-32.704421 0.127295-45.248112-12.512727-12.576374-32.704421-12.607338-45.248112-0.127295L512.127295 467.904421 249.088241 204.063755c-12.447359-12.480043-32.704421-12.54369-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.280796l262.975407 263.775299-265.151458 263.744335c-12.54369 12.480043-12.607338 32.704421-0.127295 45.248112 6.239161 6.271845 14.463432 9.440452 22.687703 9.440452 8.160624 0 16.319527-3.103239 22.560409-9.311437l265.216826-263.807983 265.440452 266.240344c6.239161 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.311759 513.248864z" p-id="2546"></path></svg>
		</div>
		<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 class="optionContent">
			<div class="confirm"><span @click="confirmParams()">确定</span></div>
			<div class="reset"><span @click="resetParams()">恢复默认</span></div>
		</div>
	</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) {
			 },
			 resetParams(){
				 this.editParamLists = JSON.parse(JSON.stringify(this.paramsLists))
				 console.log(this.editParamLists)
			 }
		},
		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;
				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;
			}
		}
		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%;
			}
		}
		.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>