<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">
			<!--需求信息-->
			<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 ">
							投资
						</view>
						<view class="btn selected">
							自助
						</view>
						<view class="btn">
							其他
						</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" style="width: 140rpx;">
							公积金
						</view>
						<view class="btn selected" style="width: 140rpx;">
							商业贷
						</view>
						<view class="btn" style="width: 150rpx;">
							组合贷
						</view>
					</view>
				</view>
				<view class="inputItem">
					<text style="flex: 0 0 35%;">旧房还款方式：</text>
					<view class="btn_wrapper">
						<view class="btn" style="width: 160rpx;">
							等额本金
						</view>
						<view class="btn selected" style="width: 160rpx;">
							等额本息
						</view>
					</view>
				</view>
			</view>
			<!--规划参数-->
			<view class="parametersInfo">
				<view class="title">
					<view>
						规划参数
					</view>
				</view>
			</view>
			<!--底部技术支持组件-->
			<foot></foot>
		</scroll-view>
	</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';
	
	export default{
		data(){
			isDisplace:Boolean
		},
		components:{
			loanBalance,
			planningParameters,
			head,
			foot
		},
		onLoad(){
			
		},
		methods:{
			
		}
	}
</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{
		width: 130rpx;
		padding:5rpx 0;
		border: 1px solid #CEB07D;
		margin-right: 10rpx;
		text-align: center;
		position: relative;
	}
	.btn_wrapper .btn:last-child{
		margin-right: 0;
	}
	.btn_wrapper .selected{
		color:#FED495;
	}
	.btn_wrapper .selected:after{
	    display:block;
	    content:'';
	    border-width:25rpx 25rpx 25rpx 25rpx;
	    border-style:solid;
	    border-color:#FED495 transparent transparent transparent;
	    position:absolute;
		right: -25rpx;
		transform: rotate(-45deg);
		bottom: -25rpx;
	}
	
</style>