<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"
								/><label for="">年</label>
							</view>
						</view>
						<view class="inputItem">
							<text>预购城市：</text>
							<view class="inputContent">
								<select name="" id="">
									<option value="">上海</option>
									<option value="">深圳</option>
								</select>
							</view>
						</view>
						<view class="inputItem">
							<text>预购面积：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								 maxlength="3"
								/><label for="">m²</label>
							</view>
						</view>
						<view class="inputItem">
							<text>预购房产现在市场单价：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								 maxlength="3"
								/><label for="">m²/元</label>
							</view>
						</view>
						<view class="inputItem">
							<text>首付款最低成数：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								 maxlength="3"
								/><label for="">m²</label>
							</view>
						</view>
						<view class="inputItem">
							<text>新房贷款年限：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								 maxlength="3"
								/><label for="">m²</label>
							</view>
						</view>
						<view class="inputItem">
							<text>新房贷款年利率：</text>
							<view class="inputContent">
								<input class="uni-input" type="number" placeholder="请输入" 
								 maxlength="3"
								/><label for="">m²</label>
							</view>
						</view>
						<view class="inputItem">
							<text style="flex: 0 0 30%;">购房用途：</text>
							<view class="btn_wrapper">
								<view class="btn_item ">
									投资
								</view>
								<view class="btn_item selected">
									自助
								</view>
								<view class="btn_item">
									其他
								</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"
								/><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>
					<!--房屋置换-->
					<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">开始计算</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';
	
	export default{
		data(){
			return{
				isDisplace:false,
				myChart:null,
				nyear:null,
				city:null
			}
		},
		components:{
			loanBalance,
			planningParameters,
			head,
			foot
		},
		onLoad(){
			this.echertWidth=300;
			this.sHeight=300;
		},
		methods:{
			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'
					    }
					  ]
			    });
			},
		},
		mounted(){
			this.drawLine();
		}
	}
</script>
<style scoped>
	.houseInfo .title{
		padding-left: 0;
		justify-content: flex-start;
	}
	.houseInfo .title::before{
		width: 0;
	}
	.inputContent label{
		width: 200rpx;
		text-align: right;
	}
	.inputItem .btn_wrapper{
		display: flex;
	}
	.btn_wrapper .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;
	}
	.btn_wrapper .selected{
		color:#FED495;
	}
	.btn_wrapper .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;
	}
	.line{
		border-radius: 10rpx;
		box-shadow: 0 0 5px #969696;
		background: #fff;
		margin: 20rpx 0;
		padding: 0 10rpx 20rpx 10rpx;
	}
	.line .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;
	}
	.content .left,.content .right{
		background: #1349DD;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 48%;
		box-shadow: 0 1px 1px #969696;
	}
	.content .right{
		background: #F07006;
	}
	.content .left .realizable,.content .right .realizable{
		width: 60%;
		background: #fff;
		border-radius: 0 0 10rpx 10rpx;
		text-align: center;
		padding: 10rpx 0;
		margin: 0;
	}
	.content .left .realizable{
		color:#1349DD;
	}
	.content .left view,.content .right view{
		margin: 10rpx 0;
	}
	.content .right .realizable{
		color:#F07006;
	}
	
	.line .line_bottom{
		background: #e9ffe6;
		color: #666;
		width: 98%;
		padding: 10rpx;
	}
	
	.line .line_bottom.fail{
		background: #ffe6e6;
	}
	
</style>