<template>
	<view class="wrapper">
		<view class="banner">
			<!--头部技术支持组件-->
			<head></head>
			<img src="../../static/images/banner.png" alt="banner" srcset="">
		</view>	
		<scroll-view scroll-y="true" class="formInfoContainer" id="formInfoContainer">
			<form @submit="formSubmit" @reset="formReset">
				<!--需求信息-->
					<view class="demandInfo">
						<view class="title">
							<view>
								需求信息
							</view>
						</view>
						<view class="inputItem">
							<text>几年后购房：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								 maxlength="3" v-model="housePurchaseInfo.nyear" />
								 <label for="">年</label>
							</view>
						</view>
						<view class="inputItem">
							<text>预购城市：</text>
							<uni-data-picker placeholder="请选择地区" popup-title="请选择所在地区" :localdata="provinceList" v-model="classes"
											@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
										</uni-data-picker>
						</view>
						<view class="inputItem">
							<text>预购面积：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								 maxlength="3" v-model="housePurchaseInfo.preOrderSize"
								/><label for="">m²</label>
							</view>
						</view>
						<view class="inputItem">
							<text>预购房产现在市场单价：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								 maxlength="3" v-model="housePurchaseInfo.targetPrice"
								/><label for="">m²/元</label>
							</view>
						</view>
						<view class="inputItem">
							<text>首付款最低成数：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								 maxlength="3" v-model="housePurchaseInfo.downPaymentMin"
								/><label for="">m²</label>
							</view>
						</view>
						<view class="inputItem">
							<text>新房贷款年限：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								 maxlength="3" v-model="housePurchaseInfo.newLoanYear"
								/><label for="">m²</label>
							</view>
						</view>
						<view class="inputItem">
							<text>新房贷款年利率：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								 maxlength="3" v-model="housePurchaseInfo.housePriceGrowthRate"
								/><label for="">m²</label>
							</view>
						</view>
						<view class="inputItem">
							<text style="flex: 0 0 30%;">购房用途：</text>
							<view class="btn_wrapper">
								<view class="btn_item" :class="{ 'selected': housePurchaseType==housePurchaseTypeItem.id }"
								v-for="housePurchaseTypeItem in housePurchaseTypeList"
								@click="housePurchase(housePurchaseTypeItem.id)">
									{{housePurchaseTypeItem.name}}
								</view>
							</view>
						</view>
					</view>
					<!--资源信息-->
					<view class="sourcesInfo">
						<view class="title">
							<view>
								资源信息
							</view>
						</view>
						<view class="inputItem">
							<text>已备首付：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								 maxlength="3" v-model="housePurchaseInfo.firstHouseAmount"
								/><label for="">万元</label>
							</view>
						</view>
						<view class="inputItem">
							<text>年预备还房贷资金总额：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								 maxlength="3" v-model="housePurchaseInfo.repaymentSpecial"
								/><label for="">万元</label>
							</view>
						</view>
					</view>
					<!--房屋置换-->
					<view class="houseInfo">
						<view class="title">
							<view class="radioButton" :class="{'selected':!isDisplace }"></view>
							<text style="margin-left: 10rpx;">是否置换旧房</text>
						</view>
						<view class="inputItem">
							<text>旧房贷款余额：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								 maxlength="3"
								/><label for="">万元</label>
							</view>
						</view>
						<view class="inputItem">
							<text>旧房贷款剩余月份：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								maxlength="3"
								/><label for="">月</label>
							</view>
						</view>
						<view class="inputItem">
						<text>旧房贷款利率：</text>
						<view class="inputContent">
							<input class="uni-input" type="number" placeholder="请输入" 
							 maxlength="3"
							/><label for="">%</label>
						</view>
						</view>
						<view class="inputItem">
							<text style="flex: 0 0 35%;">旧房贷款方式：</text>
							<view class="btn_wrapper">
								<view class="btn_item" style="width: 120rpx;">
									公积金
								</view>
								<view class="btn_item selected" style="width: 120rpx;">
									商业贷
								</view>
								<view class="btn_item" style="width: 120rpx;">
									组合贷
								</view>
							</view>
						</view>
						<view class="inputItem">
							<text style="flex: 0 0 35%;">旧房还款方式：</text>
							<view class="btn_wrapper">
								<view class="btn_item" style="width: 140rpx;">
									等额本金
								</view>
								<view class="btn_item selected" style="width: 140rpx;">
									等额本息
								</view>
							</view>
						</view>
					</view>
					<!--规划参数-->
					<view class="parametersInfo">
						<view class="title">
							<view>
								规划参数
							</view>
							<view class="view">
								查看
							</view>
						</view>
						
					</view>
					
					<!-- 操作 -->
					<view class="optionContent">
						<button type="default" plain="true" form-type="reset"
						>全部清空</button>
						<button type="default" plain="true"
						class="btn" @click="startCount()">开始计算</button>
					</view>
			</form>
			<!--测算结果-->
			<view class="result_wrapper">
				<view class="suggestInfo">
					<view class="title">
						<view>
							测算结果及建议
						</view>
					</view>
					<view id="myEcharts" style="height: 500rpx;"></view>
					<view>
						1.如您想实现N年后在XX地区购买XXX㎡的房产，那么您还需要提高首付款到XXXX元，或您需提高每年预备还房贷资金总额到XXXX元。 
					</view>
					<view>
						2.根据您的已备首付款和每年预备还房贷资金总额，您在N年后可实现购买房屋单价为XXX元/㎡，总价为XXXX元的房产。
					</view>
				</view>
				<view class="line">
					<view class="line_title">房屋总价</view>
					<view class="content">
						<view class="left">
							<view class="realizable">可实现的</view>
							<view>终值：1,233,930元</view>
							<view class="now">
								现值：1,233,930元
							</view>
						</view>
						<view class="right">
							<view class="realizable">你想要的</view>
							<view>终值：1,233,930元</view>
							<view class="now">
								现值：1,233,930元
							</view>
						</view>
					</view>
					<view class="line_bottom">
						恭喜您！经过测算，您已超出目标值XXXX,N年后可以达成您的目标.
					</view>
				</view>
				<view class="line">
					<view class="line_title">房屋单价</view>
					<view class="content">
						<view class="left">
							<view class="realizable">可实现的</view>
							<view>终值：1,233,930元</view>
							<view class="now">
								现值：1,233,930元
							</view>
						</view>
						<view class="right">
							<view class="realizable">你想要的</view>
							<view>终值：1,233,930元</view>
							<view class="now">
								现值：1,233,930元
							</view>
						</view>
					</view>
					<view class="line_bottom fail">
						很遗憾！经过测算，距离实现您的目标还差XXX。您可以参考我们给出的建议进行调整。
					</view>
				</view>
				<view class="line">
					<view class="line_title">首付款</view>
				</view>
				<view class="line">
					<view class="line_title">贷款金额</view>
				</view>
			</view>
		</scroll-view>
		<!--底部技术支持组件-->
		<foot></foot>
	</view>
	<!--旧房贷款余额组件-->
	<!-- <loanBalance></loanBalance> -->
	<!--规划参数组件-->
	<planningParameters></planningParameters>
</template>

<script>
	import loanBalance from './loanBalance.vue';
	import planningParameters from './loanBalance.vue';
	import head from '../header/header.vue';
	import foot from '../footer/footer.vue';
	import * as echarts from 'echarts';
	import api from '../../api/api';
	import common from '../../common/common';
	
	export default{
		data(){
			return{
				isDisplace:false,
				myChart:null,
				housePurchaseInfo:{
					nyear:null,//几年后购房
					provinceList: [],
					provinceCode:null,
					provinceName:null,
					cityCode:null,
					cityName:null,
					preOrderSize:null,//预购面积
					targetPrice:null,//目标价格(现值)
					downPaymentMin:null,//首付款最低成数(百分位)
					newLoanYear:null,//新房贷款年限【必须大于0】
					firstHouseAmount:null,//初期购房资金(单位万)
					housePurchaseType:null,//购房用途
					repaymentSpecial:null,//每年还贷专用款(单位万)
				},
				housePurchaseTypeList:[{id:1,name:'投资'},{id:2,name:'自住'},{id:3,name:'其他'}]
			}
		},
		components:{
			loanBalance,
			planningParameters,
			head,
			foot
		},
		onLoad(){
			this.provCityQry();
		},
		methods:{
			onchange(e) {
			    const value = e.detail.value
			},
			onnodeclick(node) {},
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				this.myChart = echarts.init(document.getElementById('myEcharts'));
				// 绘制图表
				this.myChart.setOption({
					  xAxis: {
					    data: ['A', 'B', 'C', 'D', 'E']
					  },
					  yAxis: {},
					  series: [
					    {
					      data: [10, 22, 28, 43, 49],
					      type: 'bar',
					      stack: 'x',
					    },
					    {
					      data: [5, 4, 3, 5, 10],
					      type: 'bar',
					      stack: 'x'
					    }
					  ]
			    });
			},
			provCityQry(){
				api.provCityQry({insurerId:888}).then((res)=>{
					console.log(res)
					if(res['success']){
						this.provinceList = common.action(res['data']['provinces']);
						console.log(this.provinceList)
						
					}
				})
			},
			housePurchase(id){
				this.housePurchaseType = id;
			},
			startCount(){
				const param = {
					...this.housePurchaseInfo,
				}
				// api.housePurchasePlanAnalysis().then((res)=>{
					
				// })
			},
			onchange(e) {
			        const value = e.detail.value;
					console.log(e)
			      },
			      onnodeclick(node) {
					  console.log(node)
			      }
		},
		mounted(){
			this.drawLine();
		}
	}
</script>
<style scoped lang="scss">
	.wrapper{
		.houseInfo .title{
			padding-left: 0;
			justify-content: flex-start;
		}
		.houseInfo .title::before{
			width: 0;
		}
		.inputItem {
			.inputContent {
				label{
					width: 200rpx;
					text-align: right;
				}
			}
			.btn_wrapper{
				display: flex;
				.btn_item{
					width: 100rpx;
					padding:5rpx 0;
					border: 1px solid #CEB07D;
					margin-right: 10rpx;
					text-align: center;
					position: relative;
					font-size: 26rpx;
				}
				.btn_wrapper .btn_item:last-child{
					margin-right: 0;
				}
				.selected{
					color:#FED495;
				}
				.selected:after{
				    display:block;
				    content:'';
				    border-width:20rpx 20rpx 20rpx 20rpx;
				    border-style:solid;
				    border-color:#FED495 transparent transparent transparent;
				    position:absolute;
					right: -20rpx;
					transform: rotate(-45deg);
					bottom: -11.5px;
				}
			}
		}	
		.title .view{
			color: #666;
			border: 1px #FED495 solid;
			font-weight: normal;
			padding:8rpx 20rpx;
			font-size: 28rpx;
			width: 110rpx;
			text-align: center;
		}
		.result_wrapper{
			.line{
				border-radius: 10rpx;
				box-shadow: 0 0 5px #969696;
				background: #fff;
				margin: 20rpx 0;
				padding: 0 10rpx 20rpx 10rpx;
				.line_title{
					background: linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%);
					color: #fff;
					width: 40%;
					border-radius: 10rpx 0 10rpx 0;
					text-align: center;
					padding: 10rpx 0;
					margin-left: -10rpx;
				}
				.content{
					display: flex;
					color: #fff;
					justify-content: space-around;
					margin: 20rpx 0;
					.left,.right{
						background: #1349DD;
						border-radius: 8rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 48%;
						box-shadow: 0 1px 1px #969696;
						view {
							margin: 10rpx 0;
						}
					}
					.right{
						background: #F07006;
					}
					.left .realizable,.right .realizable{
						width: 60%;
						background: #fff;
						border-radius: 0 0 10rpx 10rpx;
						text-align: center;
						padding: 10rpx 0;
						margin: 0;
					}
					.left .realizable{
						color:#1349DD;
					}
					.right .realizable{
						color:#F07006;
					}
				}
				.line_bottom{
					background: #e9ffe6;
					color: #666;
					width: 98%;
					padding: 10rpx;
				}
				.line_bottom.fail{
					background: #ffe6e6;
				}
			}
		}
	}
	
</style>