<template>
	<view class="wrapper">
		<view class="banner">
			<!--头部技术支持组件-->
			<!-- <commonHead></commonHead> -->
			<image src="../../static/images/banner.png" mode="widthFix"></image>
		</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" v-model="housePurchaseInfo.cityId">
							</uni-data-picker>
						</view>
						<view class="inputItem">
							<text>预购面积：</text>
							<view class="inputContent">
								<input class="uni-input" type="digit" placeholder="请输入" maxlength="6"
								  v-model="housePurchaseInfo.preOrderSize" @blur="queryCommercialHousingPrice()"
								/><label for="">m²</label>
							</view>
						</view>
						<view class="inputItem">
							<text>预购房产现在市场单价：</text>
							<view class="inputContent">
								<input class="uni-input" type="digit" placeholder="请输入" 
								  v-model="housePurchaseInfo.targetPrice" maxlength="12"
								/><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="digit" placeholder="请输入" 
								 maxlength="4" 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="digit" placeholder="请输入" 
								  v-model.trim="housePurchaseInfo.firstHouseAmount"  maxlength="8"
								/><label for="">万元</label>
							</view>
						</view>
						<view class="inputItem" style="position: relative;">
							<view>
								<view>每年投入房产资金：</view>
								<view style="position: absolute;left: 0;bottom: -1px;font-size: 24rpx;color: red;letter-spacing: 1px;">(从今年末开始投入，用于首付和按揭)</view>
							</view>
							<view class="inputContent">
								<input class="uni-input" type="digit" placeholder="请输入" 
								  v-model="housePurchaseInfo.repaymentSpecial"  maxlength="8"
								/><label for="">万元/年</label>
							</view>
						</view>
					</view>
					<!--房屋置换-->
					<view class="houseInfo">
				<!-- 		<view class="title">
							<view style="display: flex;">
								<view class="radioButton" :class="{'selected':isDisplace }"
								@click="openLoan()"></view>
								<text style="margin-left: 10rpx;">是否置换旧房</text>
							</view>
							<view class="editParam" v-if="dataLists" @click="editParams()">修改参数</view>
						</view> -->
						<view v-if="dataLists">
							<loanBalance :isReadonly="true" :a="accumulationFundParams" :b="commercialLoansParams" @getData="getData"></loanBalance>
						</view>
					</view>
					<!--规划参数-->
					<view class="parametersInfo">
						<view class="title">
							<view>
								规划参数
							</view>
							<view class="view" @click="viewPlanningParams()">
								查看
							</view>
						</view>
					</view>
					
					<!-- 操作 -->
					<view class="optionContent">
						<button type="default" plain="true" form-type="reset"
						@click="resetData()" >全部清空</button>
						<button type="default" plain="true"
						class="sfp_btn" @click="startCount()">开始计算</button>
					</view>
			</form>
			<!--测算结果-- v-show="resultFlag"-->
			<view class="result_wrapper" v-if="resultFlag">
			<!-- <view class="result_wrapper"> -->
				<view class="suggestInfo">
					<view class="title">
						<view>
							测算结果及建议
						</view>
					</view>
					<view class="chartsLegend">
						<radio-group @change="radioChange" style="display: flex;width: 100%;justify-content: space-evenly;">
							<label v-for="(item, index) in chartsLegends" :key="item.value" style="display: flex;">
								<view style="display: flex;">
									<radio :value="item.value" :checked="item.value === chartsLegendsCurrent" />
								</view>
								<view style="font-size: 28rpx;">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
					<!-- <view  style="height: 450rpx;width: 500rpx;border: 1rpx solid #c3c1c1;"> -->
						<!-- <view  id="myEcharts"></view> -->
						<l-echart ref="chart" @finished="init"></l-echart>
					<!-- </view> -->
					<!-- <view class="linechart">
						<Echarts ref="echart" :option="option" style="height: 300px;"></Echarts>
					</view> -->
					
					<view style="text-align: center;color: #c3c1c1;font-size: 22rpx;" >
						差额 = 可实现的 - 你想要的
					</view>
					<view class="resultSummaryContent">
						<view v-if="resultInfos.code == 'B001' || resultInfos.code =='B002'" style="display: flex;align-items: center;">
						<!-- <view style="display: flex;align-items: center;"> -->
							<view style="margin-right: 16rpx;">
								<image src="../../static/images/happy.png" mode="widthFix"></image>
							</view>
							<view>
								<view>恭喜您！</view>
								<view>您实现买房自由了哦~</view>
							</view>
						</view>
						<view v-if="resultInfos.code == 'A001' || resultInfos.code =='A002'" style="display: flex;align-items: center;">
						<!-- <view style="display: flex;align-items: center;"> -->
							<view style="margin-right: 16rpx;">
								<image src="../../static/images/sad.png" mode="widthFix"></image>
							</view>
							<view>
								<view>很遗憾！</view>
								<view>您还不能实现目标,请继续加油哦~</view>
							</view>
						</view>
					</view>
					<view style="background: rgba(36,255,0,3%);padding: 6rpx 10rpx;border-radius: 12rpx;line-height: 1.5;">
						<view v-if="resultInfos.code == 'A001' || resultInfos.code =='A002'" style="display: flex;">
							<text class="seriesNo">1</text>
							<view>如您想实现<strong>{{resultInfos.nyear}}</strong>年后在<strong>{{resultInfos.provinceName}}-{{resultInfos.cityName}}</strong>地区购买
							<strong>{{resultInfos.preOrderSize}}</strong>㎡的房产，那么您还需要提高首付款到
							<strong>{{formatFloat(resultInfos.pvDownPayment/10000,2,1)}}</strong>万元，或您需提高每年投入房产资金到
							<strong>{{formatFloat(resultInfos.houseSpecialPurpose/10000)}}</strong>万元。 </view>
						</view>
						<view style="margin-top: 10rpx;display: flex;">
							<text class="seriesNo">{{resultInfos.code == 'A001' || resultInfos.code =='A002'?'2':'1'}}</text>
							<view>根据您的已备首付款和每年投入房产资金测算，您在<strong>{{resultInfos.nyear}}</strong>年后最高可实现购买房屋单价为<strong>{{formatFloat(tipsPrice/10000)}}</strong>万元/㎡，总价为<strong>{{formatFloat(tipsTotalPrice/10000)}}</strong>万元的房产。</view>
						</view>
					</view>
					
				</view>
				<view class="line" v-for="houseItem in housePurchasePrices">
					<view class="line_title">{{getResultTitle(houseItem.priceType)}}
						<image src="../../static/images/can.png" v-show="houseItem.fvDifference <= 0" mode="widthFix"></image>
						<image src="../../static/images/cannot.png" v-show="houseItem.fvDifference > 0" mode="widthFix"></image>
					</view>
					<view class="content">
						<view class="left">
							<view class="realizable">可实现的</view>
							<view>{{housePurchaseInfo.nyear}}年后：{{formatFloat(houseItem.fvPriceRealization/10000)}}万元</view>
							<!-- <view class="now">
								现值：{{numberConverter(houseItem.pvPriceRealization)}}元
							</view> -->
						</view>
						<image src="../../static/images/vs.png" mode="widthFix"></image>
						<view class="right">
							<view class="realizable">你想要的</view>
							<view>{{housePurchaseInfo.nyear}}年后：{{formatFloat(houseItem.fvPriceDesired/10000)}}万元</view>
							<!-- <view class="now">
								现值：{{numberConverter(houseItem.pvPriceDesired)}}元
							</view> -->
						</view>
					</view>
					<view class="line_bottom" v-show="houseItem.fvDifference <= 0">
						<strong style="font-size: 36rpx;">恭喜您!</strong>
						<text>经过测算，</text>
						<text v-if="houseItem.fvDifference < 0">您的{{getResultTitle(houseItem.priceType)}}已超出目标值{{Math.abs(formatFloat(houseItem.fvPriceRealization/10000)-formatFloat((houseItem.fvPriceDesired/10000))).toFixed(2)}}万元，</text>
						<text v-if="houseItem.fvDifference == 0">您的{{getResultTitle(houseItem.priceType)}}在</text>
						<text>{{resultInfos.nyear}}年后{{getResultTitle(houseItem.priceType)}}可以满足您的需求.</text>
					</view>
					<view class="line_bottom fail" v-show="houseItem.fvDifference > 0">
						<strong style="font-size: 36rpx;">很遗憾！</strong>
						经过测算，距离实现您的{{getResultTitle(houseItem.priceType)}}目标还差{{Math.abs(formatFloat(houseItem.fvDifference/10000))}}万元。您可以参考我们给出的建议进行调整。
					</view>
				</view>
			</view>
		</scroll-view>
		<!--底部技术支持组件-->
		<!-- <foot></foot> -->
	</view>
	<view class="mask" v-if="dialogIsShow">
		<view class="content">
			<!-- 关闭按钮 -->
			<view 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>
			</view>
			<!--旧房贷款余额组件-->
			<loanBalance v-if="isLoanSelected" :a="accumulationFundParams" :b="commercialLoansParams" :loanType="1" @getData="getData"></loanBalance>
			<!--规划参数组件-->
			<planningParameters v-if="paramsSelected" :cityInfo="cityInfo" :planningParams="planningParams"  @getData="getPlanParams"></planningParameters>
		</view>
		</view>
</template>

<script>
	import {toRefs,ref} from "vue";
	import loanBalance from './loanBalance.vue';
	import planningParameters from './planningParameters.vue';
	import commonHead 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";
    import { nanoid } from "nanoid";
	// import Echarts from '../../components/echarts/echarts'
	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
	
	export default{
		data(){
			return{
				chartsLegendsCurrent: '1',
				chartsLegends:[{
                    value: '1',
                    name: '总房款(万元)',
                    checked: 'true'
                },
                {
                    value: '3',
                    name: '首付款(万元)'
                },{
                    value: '4',
                    name: '总贷款(万元)'
                }],
				isNeedDis:true,
				isNeedOfficialAccountQrcode:true,
				tipsPrice:null,
				tipsTotalPrice:null,
				cityInfo:{},
				isEditFlag:false,
				dataLists:null,
				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:30,//首付款最低成数(百分位)
					newLoanYear:null,//新房贷款年限【必须大于0】
					firstHouseAmount:null,//初期购房资金(单位万)
					housePurchaseType:2,//购房用途
					repaymentSpecial:null,//每年还贷专用款(单位万)
					interestRate:null, //贷款年利率
				},
				housePurchaseTypeList:[{id:1,name:'投资'},{id:2,name:'自住'},{id:3,name:'其他'}],
				houseLoanOldList:[],
				accumulationFundParams:[],
				commercialLoansParams:[],
				downPaymentList:[],
				totalLoanList:[],
				totalPriceList:[],
				resultInfos:{
					nyear:null,                  //几年后购房
					preOrderSize:null,        //预购面积
					provinceName:null,        //预购省名称
					cityName:null,              //预购城市名称
					pvDownPayment:null,      //提高已备首付款到
					houseSpecialPurpose:null, //提高每年还贷专用款到
				},
				housePurchasePrices:[],
				resultFlag:false,
				planningParams:{},
				option:{}
			}
		},
		components:{
			loanBalance,
			planningParameters,
			foot,
			commonHead,
			// Echarts
			LEchart
		},
		onLoad(){
			this.provCityQry();
		},
		methods:{
			init() {
			    this.$refs.chart.init(echarts, chart => {
			        chart.setOption(this.option);
			    });
			},
			checkToken(){
				api.checkToken().then(res=>{
					if(res['success']){}else{
						api.obtainToken().then(res=>{
							if(res.success){
								uni.setStorageSync('uni-token',res.data['token']);
							}
						})
					}
				})
			},
			radioChange: function(evt) {
			            for (let i = 0; i < this.chartsLegends.length; i++) {
			                if (this.chartsLegends[i].value === evt.detail.value) {
			                    this.chartsLegendsCurrent = evt.detail.value;
								this.drawLine(this.chartsLegendsCurrent)
			                    break;
			                }
			            }
			        },
			/*
			num:源数据
			digitNum:保留几位小数
			type:向上(1)取还是向下(2)取
			*/
			formatFloat(num,digitNum=2,type=1){
				return common.formatFloat(num,digitNum=2,type=1)
			},
			viewPlanningParams(){
				// 查看规划参数
				this.paramsSelected=this.dialogIsShow=true;
				this.isLoanSelected = false;
				this.cityInfo['isNew'] = '1';
				if(this.housePurchaseInfo.preOrderSize <= 90){
					this.cityInfo['area'] = '1'
				}else if(this.housePurchaseInfo.preOrderSize <= 144){
					this.cityInfo['area'] = '2'
				}else{
					this.cityInfo['area'] = '3'	
				}
				this.planningParams = {
					...this.planningParams,
					downPaymentMin: this.housePurchaseInfo.downPaymentMin
				}
			},
			getFollowData(e){
				this.isNeedOfficialAccountQrcode= ref(e);
			},
			getPlanParams(e){
				// console.log('规划参数子组件传过来的====',e)
				this.planningParams = e;
				this.housePurchaseInfo.downPaymentMin = this.planningParams['downPaymentMin'];
				this.housePurchaseInfo.cityCode = this.housePurchaseInfo.cityId = this.planningParams['cityId'];
				this.housePurchaseInfo.provinceCode = this.planningParams['provinceId'];
				this.housePurchaseInfo.provinceName = this.planningParams['provinceName'];
				this.housePurchaseInfo.cityName = this.planningParams['cityName'];
				// 从规划参数弹窗获取数据
				this.closeBtn()
			},
			editParams(){
				this.dialogIsShow = this.isEditFlag = true;
			},
			getData(e){
				this.dataLists = toRefs(e);
				this.accumulationFundParams = this.dataLists.a;
				this.commercialLoansParams = this.dataLists.b;
				this.dialogIsShow = false;
				// console.log('父组件拿到公积金贷款的值了',this.accumulationFundParams);
				// console.log('父组件拿到商业贷款值了',this.commercialLoansParams);
				this.houseLoanOldList = this.dataLists.c;
				// console.log(this.houseLoanOldList)
			},
			onchange(e) {
			    const value = e.detail.value;
				
			},
			onnodeclick(node) {
				this.cityInfo = {
					cityId: node.parent_value ? node.value : null,
					provinceId:node.parent_value ? node.parent_value : node.value,
				}
				this.queryCommercialHousingPrice();
			},
			drawLine(type=1) {
				// 1是总房价
				// 3是首付
				//  4是总贷款
				// 基于准备好的dom，初始化echarts实例
				// this.myChart = echarts.init(document.getElementById('myEcharts'));
				// 绘制图表
				let list1;
				let showLists;
				let dataOption = ['可实现的', '你想要的', '差额'];
				if(this.housePurchasePrices.length){
					if(type){
						list1 = this.housePurchasePrices.filter((item)=>{
							return item.priceType == type
						})[0];	
						this.isNeedDis = list1.pvDifference>0;
						if(list1.pvDifference>0){
							showLists = [].concat(
							this.formatFloat(list1.pvPriceRealization / 10000,2,2),
							this.formatFloat(list1.pvPriceDesired/10000,2,2),
							{value:this.formatFloat(Math.abs(list1.pvDifference)/10000),
							itemStyle:{color:'#ff0000'}})
							
						}else{
							showLists = [].concat(
							this.formatFloat(list1.pvPriceRealization / 10000,2,2),
							this.formatFloat(list1.pvPriceDesired/10000,2,2));
							dataOption = ['可实现的', '你想要的']
						}
					}
				}
				this.option = {
						legend: {},
						grid: {
						   left: '20%', // 调整这个属性
						 },
						  xAxis: {
						    data: dataOption,
							axisTick:{//坐标轴刻度相关设置。
							    show: false,
							},
						  },
						  yAxis: {},
						  series: [
							{
							    name:'',
							    data: showLists,
							    type: 'bar',
								label:{
									show:true,
									position:'inside'
								}
							}
						  ]
				    }
				this.$refs.chart.init(echarts, chart => {
				    chart.setOption(this.option);
				});
				// this.myChart.setOption({
				// 		legend: {},
				// 		grid: {
				// 		   left: '20%', // 调整这个属性
				// 		 },
				// 		  xAxis: {
				// 		    data: dataOption,
				// 			axisTick:{//坐标轴刻度相关设置。
				// 			    show: false,
				// 			},
				// 		  },
				// 		  yAxis: {},
				// 		  series: [
				// 			{
				// 			    name:'',
				// 			    data: showLists,
				// 			    type: 'bar',
				// 				label:{
				// 					show:true,
				// 					position:'inside'
				// 				}
				// 			}
				// 		  ]
				//     });
			},
			provCityQry(){
				api.provCityQry({insurerId:888}).then((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;
				}else{
					 if(this.housePurchaseInfo.nyear <= 0 || this.housePurchaseInfo.nyear >30){
						 common.errorDialog(1,'购房测算建议预估购房年数不超过30')
						 return false;
					 }
				}
				if(!this.housePurchaseInfo.provinceCode || !this.housePurchaseInfo.cityCode){
					common.errorDialog(1,'请选择预购城市')
					return false;
				}
				if(!this.housePurchaseInfo.preOrderSize){
					common.errorDialog(1,'请填写预购面积')
					return false;
				}else{
					if(this.housePurchaseInfo.preOrderSize>1000){
						common.errorDialog(1,'住房面积一般不会超过1000㎡')
						return false;
					}	
				}
				if(!this.housePurchaseInfo.targetPrice){
					common.errorDialog(1,'请填写预购房产现在市场单价')
					return false;
				}
				if(!this.housePurchaseInfo.downPaymentMin){
					common.errorDialog(1,'请填写首付款最低成数')
					return false;
				}else{
					if(this.housePurchaseInfo.downPaymentMin>100 || this.housePurchaseInfo.downPaymentMin < 0){
						common.errorDialog(1,'首付款最低成数不应超过100%，且不应少于0')
						return false;
					}	
				}
				if(!this.housePurchaseInfo.newLoanYear){
					common.errorDialog(1,'请填写新房贷款年限')
					return false;
				}else {
					if(this.housePurchaseInfo.newLoanYear<0 || this.housePurchaseInfo.newLoanYear>30){
						common.errorDialog(2,'新房贷款年限最长不超过30年')
						return false;
					}
				}
				if(!this.housePurchaseInfo.interestRate){
					common.errorDialog(1,'请填写新房贷款年利率')
					return false;
				}else{
					if(this.housePurchaseInfo.interestRate > 24){
						common.errorDialog(1,'新房贷款年利率不应超过24%')
						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 palnningParamsDefault = {
					acceptableLossRate: 0.1,
					downPaymentMin: 30,
					houseDepreciationRate: 0.02,
					housePriceGrowthRate: 0.0532,
					incomeRate: 0,
					tnvestmentRate: 0.0374
				}
				const param = {
					...palnningParamsDefault,
					...this.housePurchaseInfo,
					...this.planningParams,
					interestRate:this.housePurchaseInfo.interestRate / 100,
					houseLoanOldList:this.isDisplace ? this.houseLoanOldList : null,
					businessNo: nanoid(),
					calcuteType:0,
					decimal:4,
					systemType:1,
					userId:uni.getStorageSync('cffp_userId')
				}
				api.housePurchasePlanAnalysis(param).then((res)=>{
					if(res['success']){
						this.resultFlag = true;
						this.resultInfos = res['data'];
						this.housePurchasePrices = res['data']['housePurchasePrices'];
						if(this.housePurchasePrices.length>0){
							this.tipsPrice = this.housePurchasePrices.filter((item)=>{
								return item.priceType == 2;
							})[0]['fvPriceRealization'];
							this.tipsTotalPrice = this.housePurchasePrices.filter((item)=>{
								return item.priceType == 1;
							})[0]['fvPriceRealization'];
						}
						setTimeout(()=>{
							this.drawLine(this.chartsLegendsCurrent)
						});
					}else{
						if(res['data']['code']==='E000'){
							this.isNeedOfficialAccountQrcode = true;
							return false;
						}
						common.errorDialog(2,res['message'])
					}
				})
			},
			onchange(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;
			},
			//打开房屋置换组件
			openLoan(){
				this.isDisplace = !this.isDisplace;
				if(this.isDisplace){
					this.isLoanSelected = this.dialogIsShow = true;
					this.paramsSelected = false;
				}else{
					this.dataLists = null;
				}
			},
			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)
			},
			// 获取房价增长率
			queryCommercialHousingPrice(){
				 if(this.housePurchaseInfo.preOrderSize <= 90){
				 	this.cityInfo['area'] = '1'
				 }else if(this.housePurchaseInfo.preOrderSize <= 144){
				 	this.cityInfo['area'] = '2'
				 }else{
				 	this.cityInfo['area'] = '3'	
				 }
				 this.cityInfo = {
					 ...this.cityInfo,
					 isNew:1,
				 }
				 api.queryCommercialHousingPrice(this.cityInfo).then(res=>{
					 if(res['success']){
						const result = res['data']['priceInfo']['rateB'];
						const power = result.toString().indexOf('.') > -1 ?  result.toString().substring(result.toString().indexOf('.')+1).length : 0;
						this.planningParams.housePriceGrowthRate = (res['data']['priceInfo']['rateB']) * (Math.pow(10,power)) / (Math.pow(10,power+2)) ;
					 }
				 })
			},
			resetData(){
				this.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, //贷款年利率
				};
				this.houseLoanOldList = [];
				this.planningParams = {};
				this.resultFlag = false;
			}
		},
		mounted() {
			// this.$refs.chart.init(echarts, chart => {
			//     chart.setOption(this.option);
			// });
			this.checkToken();
		}
	}
</script>
<style scoped lang="scss">
	@import '../sfpCommon.css';
	.wrapper{
		.houseInfo .title{
			padding-left: 0;
			justify-content: space-between;
			.editParam{
				font-size: 26rpx;
				color: #666;
				border: 1px solid #CEB07D;
				padding: 4rpx 16rpx;
				border-radius: 6rpx;
				font-weight: normal;
			}
		}
		.houseInfo .title::before{
			width: 0;
		}
		.inputItem {
			.inputContent {
				label{
					text-align: right;
					white-space: nowrap;
				}
			}
			.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;
					color: #333;
				}
				.btn_wrapper .btn_item:last-child{
					margin-right: 0;
				}
				.btn_item.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{
			.resultSummaryContent{
				background: #FFDBD4;
				border-radius: 3px;
				padding: 8px 20px;
				box-shadow: 3px 1px 4px 0 rgb(0 0 0 / 25%);
				margin: 20px 0;
				font-size: 18px;
				uni-image{
					width: 68rpx!important;
				}
			}
			.seriesNo{
				width: 0;
				height: 40rpx;
				border-radius: 50%;
				background: #f07006;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 0 0 40rpx;
				margin-right: 10rpx;
				margin-top: 8rpx;
			}
			.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;
					image{
						position: absolute!important;
						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;
						padding-bottom: 20rpx;
						view {
							margin: 10rpx;
						}
					}
					image{
						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;
				}
			}
		}
	}
	.chartsLegend{
		button{
			margin-right: 6rpx;
		}
	}
	.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>