<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>
				<!--需求信息-->
					<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"
											@change="onchange" @nodeclick="onnodeclick">
										</uni-data-picker>
						</view>
						<view class="inputItem">
							<text>预购面积：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								  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="请输入" 
								  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="">%</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="">年</label>
							</view>
						</view>
						<view class="inputItem">
							<text>新房贷款年利率：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								 maxlength="3" v-model="housePurchaseInfo.interestRate"
								/><label for="">%</label>
							</view>
						</view>
						<view class="inputItem">
							<text style="flex: 0 0 30%;">购房用途：</text>
							<view class="btn_wrapper">
								<view class="btn_item" :class="{ 'selected': housePurchaseInfo.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="请输入" 
								  v-model="housePurchaseInfo.firstHouseAmount"
								/><label for="">万元</label>
							</view>
						</view>
						<view class="inputItem">
							<text>年预备还房贷资金总额：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								  v-model="housePurchaseInfo.repaymentSpecial"
								/><label for="">万元</label>
							</view>
						</view>
					</view>
					<!--房屋置换-->
					<view class="houseInfo">
						<view class="title">
							<view class="radioButton" :class="{'selected':isDisplace }"
							@click="openLoan()"></view>
							<text style="margin-left: 10rpx;">是否置换旧房{{isDisplace}}</text>
						</view>
						<loanBalance :isShowTab="false" :commercialLoansParams="commercialLoansParams" 
						:accumulationFundParams="accumulationFundParams"></loanBalance>
					</view>
					<!--规划参数-->
					<view class="parametersInfo">
						<view class="title">
							<view>
								规划参数
							</view>
							<view class="view" @click="paramsSelected=dialogIsShow=true">
								查看
							</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.如您想实现{{resultInfos.nyear}}年后在{{resultInfos.provinceName}} {{resultInfos.cityName}}地区购买{{resultInfos.preOrderSize}}㎡的房产，那么您还需要提高首付款到{{resultInfos.pvDownPayment}}元，或您需提高每年预备还房贷资金总额到{{resultInfos.houseSpecialPurpose}}元。 
					</view>
					<view>
						2.根据您的已备首付款和每年预备还房贷资金总额，您在N年后可实现购买房屋单价为XXX元/㎡，总价为XXXX元的房产。
					</view>
				</view>
				<view class="line" v-for="houseItem in housePurchasePrices">
					<view class="line_title">{{getResultTitle(houseItem.priceType)}}
						<img src="../../static/images/can.png" alt="" v-show="houseItem.fvDifference >= 0">
						<img src="../../static/images/cannot.png" alt="" v-show="houseItem.fvDifference < 0">
					</view>
					<view class="content">
						<view class="left">
							<view class="realizable">可实现的</view>
							<view>终值：{{numberConverter(houseItem.fvPriceRealization)}}元</view>
							<view class="now">
								现值：{{numberConverter(houseItem.pvPriceRealization)}}元
							</view>
						</view>
						<img src="../../static/images/vs.png" alt="">
						<view class="right">
							<view class="realizable">你想要的</view>
							<view>终值：{{numberConverter(houseItem.fvPriceDesired)}}元</view>
							<view class="now">
								现值：{{numberConverter(houseItem.pvPriceDesired)}}元
							</view>
						</view>
					</view>
					<view class="line_bottom" v-show="houseItem.fvDifference > 0">
						<text style="font-size: 36rpx;">恭喜您</text>！经过测算，您已超出目标值XXXX,N年后可以达成您的目标.
					</view>
					<view class="line_bottom fail" v-show="houseItem.fvDifference < 0">
						<text style="font-size: 36rpx;">很遗憾！</text>
						经过测算，距离实现您的目标还差XXX。您可以参考我们给出的建议进行调整。
					</view>
				</view>
			</view>
		</scroll-view>
		<!--底部技术支持组件-->
		<foot></foot>
	</view>
	<view class="mask" v-if="dialogIsShow">
		<view class="content">
			<!-- 关闭按钮 -->
			<div class="closeBtn" @click="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>
			<!--旧房贷款余额组件-->
			<loanBalance :sendChildLoanInfo="getChildLoanInfo" v-if="isLoanSelected" :isShowTab="true"></loanBalance>
			<!--规划参数组件-->
			<planningParameters v-if="paramsSelected"></planningParameters>
		</view>
		</view>
</template>

<script>
	import loanBalance from './loanBalance.vue';
	import planningParameters from './planningParameters.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';
	import dataHandling from "../../util/dataHandling";
	
	export default{
		data(){
			return{
				dialogIsShow:false,//弹窗显示与隐藏
				isDisplace:false,
				isLoanSelected:false,
				paramsSelected:false,
				myChart:null,
				provinceList: [],
				housePurchaseInfo:{
					nyear:null,//几年后购房
					provinceCode:null,
					provinceName:null,
					cityCode:null,
					cityName:null,
					preOrderSize:null,//预购面积
					targetPrice:null,//目标价格(现值)
					downPaymentMin:null,//首付款最低成数(百分位)
					newLoanYear:null,//新房贷款年限【必须大于0】
					firstHouseAmount:null,//初期购房资金(单位万)
					housePurchaseType:null,//购房用途
					repaymentSpecial:null,//每年还贷专用款(单位万)
					interestRate:null, //贷款年利率
				},
				housePurchaseTypeList:[{id:1,name:'投资'},{id:2,name:'自住'},{id:3,name:'其他'}],
				houseLoanOldList:[],
				accumulationFundParams:[],
				commercialLoansParams:[],
				downPaymentList:[],
				totalLoanList:[],
				resultInfos:{
					nyear:null,                  //几年后购房
					preOrderSize:null,        //预购面积
					provinceName:null,        //预购省名称
					cityName:null,              //预购城市名称
					pvDownPayment:null,      //提高已备首付款到
					houseSpecialPurpose:null, //提高每年还贷专用款到
				},
				housePurchasePrices:[
            {
                "priceType": "1",
                "fvPriceRealization": 1922788.0,
                "pvPriceRealization": 1744025.0,
                "fvPriceDesired": 1102500.0,
                "pvPriceDesired": 1000000.0,
                "fvDifference": -820288.0,
                "pvDifference": -744025.0
            },
            {
                "priceType": "2",
                "fvPriceRealization": 19228.0,
                "pvPriceRealization": 17440.0,
                "fvPriceDesired": 11025.0,
                "pvPriceDesired": 10000.0,
                "fvDifference": -8203.0,
                "pvDifference": -7440.0
            },
            {
                "priceType": "4",
                "fvPriceRealization": 0.0,
                "pvPriceRealization": -0.0,
                "fvPriceDesired": -820288.0,
                "pvPriceDesired": -758402.0,
                "fvDifference": -820288.0,
                "pvDifference": -758402.0
            },
            {
                "priceType": "3",
                "fvPriceRealization": 1922788.0,
                "pvPriceRealization": 1777726.0,
                "fvPriceDesired": 11025.0,
                "pvPriceDesired": 10193.0,
                "fvDifference": -1911763.0,
                "pvDifference": -1767533.0
            }
        ],
			}
		},
		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'));
				// 绘制图表
				if(this.housePurchasePrices.length){
					const list1 = this.housePurchasePrices.filter((item)=>{
						return item.priceType == 3
					})[0];
					this.downPaymentList = this.downPaymentList.concat(list1.pvPriceRealization,list1.pvPriceDesired,list1.pvDifference)
					const list2 = this.housePurchasePrices.filter((item)=>{
						return item.priceType == 4
					})[0];
					this.totalLoanList = this.totalLoanList.concat(list2.fvPriceRealization,list2.fvPriceDesired,list2.fvDifference)
				}
				this.myChart.setOption({
					legend: {
					           data: ['首付款', '总贷款金额']
					   },
					    grid: {
					       left: '20%', // 调整这个属性
					     },
					  xAxis: {
					    data: ['可实现的', '你想要的', '差额'],
						axisTick:{//坐标轴刻度相关设置。
						    show: false,
						},
					  },
					  yAxis: {},
					  series: [
						{
						    name:'首付款',
						    data: this.downPaymentList,
						    type: 'bar',
						    stack: 'x'
						},
					    {
						  name:'总贷款金额',
					      data: this.totalLoanList,
					      type: 'bar',
					      stack: 'x'
					    }
					  ]
			    });
			},
			provCityQry(){
				api.provCityQry({insurerId:888}).then((res)=>{
					console.log(res)
					if(res['success']){
						this.provinceList = common.action(res['data']['provinces']);
					}
				})
			},
			housePurchase(id){
				this.housePurchaseInfo.housePurchaseType = id;
			},
			startCount(){
				if(!this.housePurchaseInfo.nyear){
					common.errorDialog(1,'请填写几年后购房')
					return false;
				}
				if(!this.housePurchaseInfo.provinceName || !this.housePurchaseInfo.provinceCode || !this.housePurchaseInfo.cityCode || !this.housePurchaseInfo.cityName){
					common.errorDialog(1,'请选择预购城市')
					return false;
				}
				if(!this.housePurchaseInfo.preOrderSize){
					common.errorDialog(1,'请填写预购面积')
					return false;
				}
				if(!this.housePurchaseInfo.targetPrice){
					common.errorDialog(1,'请填写预购房产现在市场单价')
					return false;
				}
				if(!this.housePurchaseInfo.downPaymentMin){
					common.errorDialog(1,'请填写首付款最低成数')
					return false;
				}
				if(!this.housePurchaseInfo.newLoanYear){
					common.errorDialog(1,'请填写新房贷款年限')
					return false;
				}else {
					if(this.housePurchaseInfo.newLoanYear<=0){
						common.errorDialog(2,'新房贷款年限必须大于0')
						return false;
					}
				}
				if(!this.housePurchaseInfo.interestRate){
					common.errorDialog(1,'请填写新房贷款年利率')
					return false;
				}
				if(!this.housePurchaseInfo.housePurchaseType){
					common.errorDialog(1,'请填写购房用途')
					return false;
				}
				if(!this.housePurchaseInfo.firstHouseAmount){
					common.errorDialog(1,'请填写已备首付')
					return false;
				}
				if(!this.housePurchaseInfo.repaymentSpecial){
					common.errorDialog(1,'请填写年预备还房贷资金总额')
					return false;
				}
				const param = {
					...this.housePurchaseInfo,
					houseLoanOldList:this.houseLoanOldList
				}
				// api.housePurchasePlanAnalysis().then((res)=>{
				// 	if(res['success']){
				// 		this.resultInfos = res['data'];
				// 		this.housePurchasePrices = this.resultInfos['housePurchasePrices'];
				// 	}
				// })
			},
			onchange(e) {
					console.log(e)
			        const value = e.detail.value;
					if(value.length>0){
						this.housePurchaseInfo.provinceName = value[0]['text'];
						this.housePurchaseInfo.provinceCode = value[0]['value'];
						this.housePurchaseInfo.cityCode = value[1]['value'];
						this.housePurchaseInfo.cityName = value[1]['text'];
					}else{
						this.housePurchaseInfo.provinceName = this.housePurchaseInfo.provinceCode = 
						this.housePurchaseInfo.cityCode = this.housePurchaseInfo.cityName = null;
					}
			},
			closeBtn(){
				this.isLoanSelected = this.paramsSelected = this.dialogIsShow = false;
			},
			getChildLoanInfo(houseLoanOldList,commercialLoansParams,accumulationFundParams){
				console.log(commercialLoansParams,accumulationFundParams)
				this.commercialLoansParams = commercialLoansParams;
				this.accumulationFundParams = accumulationFundParams;
				//获取旧房贷款信息
				console.log(houseLoanOldList)
				this.houseLoanOldList = houseLoanOldList;
			},
			//打开房屋置换组件
			openLoan(){
				this.isDisplace = !this.isDisplace;
				this.isLoanSelected = this.dialogIsShow = true;
			},
			getResultTitle(priceType){
				if(priceType === '1'){
					return '房屋总价';
				}else if(priceType === '2'){
					return '房屋单价';
				}else if(priceType === '3'){
					return '首付款';
				}else if(priceType === '4'){
					return '贷款金额';
				}
			},
			// 数字千分位处理
			numberConverter(val){
				return dataHandling.numberConverter(val)
			},
		},
		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;
				position: relative;
				.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;
					img{
						position: absolute;
						right: 0;
						max-width: 17%;
						top: 3%;
					}
				}
				.content{
					display: flex;
					color: #fff;
					justify-content: space-around;
					margin: 20rpx 0;
					align-items: center;
					.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;
						}
					}
					img{
						max-width: 15%;
					}
					.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;
				}
			}
		}
	}
	.mask{
		position: fixed;
		left: 0;
		top: 0;
		width:100%;
		height:100%;
		background:rgba(0,0,0,.35);
		z-index: 2;
		.content{
			position: relative;
			width: 95%;
			height: 60vh;
			margin: 10% auto;
			border-radius: 0.3125rem;
			background-color: #fff;
			overflow-y: scroll;
			box-shadow: 0 1px 5px 2px #8b8b8b;
			padding-top: 70rpx;
			.closeBtn{
				position: absolute;
				right: 20rpx;
				top: 20rpx;
			}
		}
		
	}
	
</style>