<template>
	<view class="container">
		<view class="form-box">
			<view v-if="step==1">
				<view class="item">
					<view class="label">客户姓名</view>
					<view class="input">
						<u-input :clearable="false" input-align="right" v-model="form.name" placeholder="请输入客户姓名"></u-input>
					</view>
				</view>
				<view class="item">
					<view class="label">客户电话</view>
					<view class="input">
						<u-input :clearable="false" maxlength="11" type="number" input-align="right" v-model="form.tel" placeholder="请输入客户手机号码"></u-input>
					</view>
				</view>
				<view class="item">
					<view class="label">身份证号</view>
					<view class="input">
						<u-input :clearable="false" type="text" input-align="right" v-model="form.idCard" placeholder="请输入客户身份证号"></u-input>
					</view>
				</view>
				<view class="item">
					<view class="label">客户性别</view>
					<view class="input">
						<u-radio-group v-model="form.sex" @change="sexChange">
							<u-radio active-color="#FF6D25" :name="0">先生</u-radio>
							<u-radio active-color="#FF6D25" :name="1">女士</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="item">
					<view class="label">星座</view>
					<view class="input">
						<u-input height="102" disabled input-align="right" v-model="form.xingzuoName"  @click="xingzuoShow = true"  placeholder="请选择星座"></u-input>
						<image class="path" src="/static/path.png" mode="" />
						<u-select confirm-color="#FF6D25" v-model="xingzuoShow" :list="xingzuoList" @confirm="confirmXingzuo"></u-select>
					</view>
				</view>
				<view class="item">
					<view class="label">职业</view>
					<view class="input">
						<u-input height="102" disabled input-align="right" v-model="form.occupationName"  @click="occupationShow = true"  placeholder="请选择职业"></u-input>
						<image class="path" src="/static/path.png" mode="" />
						<u-select confirm-color="#FF6D25" v-model="occupationShow" :list="occupationList" @confirm="confirmOccupation"></u-select>
					</view>
				</view>
				<view class="item">
					<view class="label">爱好</view>
					<view class="input">
						<u-input height="102" disabled input-align="right" v-model="form.hobbyName" @click="hobbyShow = true"  placeholder="请选择爱好"></u-input>
						<image class="path" src="/static/path.png" mode="" />
						<u-select confirm-color="#FF6D25" v-model="hobbyShow" :list="hobbyList" @confirm="confirmHobby"></u-select>
					</view>
				</view>
			</view>
			<view v-if="step==2">
				<view class="item">
					<view class="label">租金</view>
					<view class="input">
						<u-input :clearable="false" input-align="right"  type="number" v-model="form.rent" placeholder="请输入租金"></u-input>
					</view>
				</view>
				<view class="item">
					<view class="label">押金</view>
					<view class="input">
						<u-input :clearable="false" maxlength="11" type="number" input-align="right" v-model="form.deposit" placeholder="请输入押金"></u-input>
					</view>
				</view>
				<view class="item">
					<view class="label">服务费</view>
					<view class="input">
						<u-input :clearable="false" type="number" input-align="right" v-model="form.serviceFee" placeholder="请输入服务费"></u-input>
					</view>
				</view>
				<view class="item">
					<view class="label">居住人数</view>
					<view class="input">
						<u-input :clearable="false" type="number" input-align="right" v-model="form.personNumber" placeholder="请输入居住人数"></u-input>
					</view>
				</view>
				<view class="item">
					<view class="label">支付类型</view>
					<view class="input">
						<u-input height="102" disabled input-align="right" v-model="form.paytypeName" @click="paytypeShow = true"  placeholder="请选择支付类型"></u-input>
						<image class="path" src="/static/path.png" mode="" />
						<u-select confirm-color="#FF6D25" v-model="paytypeShow" :list="paytypeList" @confirm="confirmPaytype"></u-select>
					</view>
				</view>
				<view class="item">
					<view class="label">收款方式</view>
					<view class="input">
						<u-input height="102" disabled input-align="right" v-model="form.paymentMethodName" @click="paymentMethodShow = true"  placeholder="请选择收款方式"></u-input>
						<image class="path" src="/static/path.png" mode="" />
						<u-select confirm-color="#FF6D25" v-model="paymentMethodShow" :list="paymentMethodList" @confirm="confirmPaymentMethod"></u-select>
					</view>
				</view>
				<view class="item">
					<view class="label">租约期限</view>
					<view class="input">
						<u-input height="102" style="width:380rpx" disabled input-align="right" v-model="form.rentDate" @click="calendarShow = true"  placeholder="请选择租约期限"></u-input>
						<image class="calendar" src="/static/kehu/calendar.png" mode="" @click="calendarShow = true" />
						<u-calendar v-model="calendarShow" mode="range" @change="changeDate"></u-calendar>
					</view>
				</view>
				<view class="item">
					<view class="label">成交部门</view>
					<view class="input">
						<u-input height="102" disabled input-align="right" v-model="form.departmentName" @click="departmentShow = true"  placeholder="请选择成交部门"></u-input>
						<image class="path" src="/static/path.png" mode="" />
						<u-select confirm-color="#FF6D25" v-model="departmentShow" :list="departmentList" @confirm="confirmDepartment"></u-select>
					</view>
				</view>
				<view class="item">
					<view class="label">成交人</view>
					<view class="input">
						<u-input height="102" disabled input-align="right" v-model="form.dealPeopleName" @click="dealPeopleShow = true"  placeholder="请选择成交人"></u-input>
						<image class="path" src="/static/path.png" mode="" />
						<u-select confirm-color="#FF6D25" v-model="dealPeopleShow" :list="dealPeopleList" @confirm="confirmDealPeople"></u-select>
					</view>
				</view>
				<view class="item">
					<view class="label">是否拆单</view>
					<view class="input">
						<u-input height="102" disabled input-align="right" v-model="form.splitlistName" @click="splitlistShow = true"  placeholder="请选择是否拆单"></u-input>
						<image class="path" src="/static/path.png" mode="" />
						<u-select confirm-color="#FF6D25" v-model="splitlistShow" :list="splitlistList" @confirm="confirmSplitlist"></u-select>
					</view>
				</view>
			</view>
		</view>
		<view class="step" v-if="step==1" @click="nextStep">下一步</view>
		<view class="step2" v-if="step==2">
			<view class="next-btn btn" v-if="step==2" @click="step=1">上一步</view>
			<view class="submit-btn btn">提交并预览</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				step:1,
				calendarShow: false,
				xingzuoShow: false,
				hobbyShow: false,
				occupationShow: false,
				paytypeShow: false,
				paymentMethodShow: false,
				departmentShow: false,
				dealPeopleShow: false,
				splitlistShow: false,
				form: {
					idCard: '',//身份证号
					name: '',//客户姓名
					sex: 0,//性别
					tel: '',//手机号
					xingzuoName: '',//
					xingzuo: '',//星座
					hobby: '',//
					hobbyName: '',//爱好
					occupation: '',//
					occupationName: '',//职业
					paytypeName:'',//支付类型
					paytype:'',//支付类型
					personNumber: '',//居住人数
					serviceFee: '',//服务费
					deposit: '',//押金
					rent: '',//租金
					paymentMethod: '',//收款方式
					paymentMethodName: '',//收款方式
					departmentName: '',//成交部门
					department: '',//成交部门
					dealPeople: '',//成交人
					dealPeopleName: '',//成交人
					splitlistName: '',//是否拆单
					splitlist: '',//是否拆单
					rentDate: '',//租约期限
				},
				xingzuoList: [
					{
						value: '1',
						label: '射手座'
					},
					{
						value: '2',
						label: '白羊座'
					},
					{
						value: '3',
						label: '巨蟹座'
					},
					{
						value: '4',
						label: '处女座'
					},
				],
				occupationList: [
					{
						value: '1',
						label: '工人'
					},
					{
						value: '2',
						label: '记者'
					},
					{
						value: '3',
						label: '主持人'
					},
					{
						value: '4',
						label: '流浪汉'
					},
				],
				hobbyList: [
					{
						value: '1',
						label: '唱歌'
					},
					{
						value: '2',
						label: '跳舞'
					},
					{
						value: '3',
						label: '读书'
					},
					{
						value: '4',
						label: '运动'
					},
				],
				paymentMethodList: [
					{
						value: '1',
						label: '来电'
					},
					{
						value: '2',
						label: '来访'
					},
					{
						value: '3',
						label: '到访'
					},
					{
						value: '4',
						label: '2来访'
					},
				],
				paytypeList: [
					{
						value: '1',
						label: '现金'
					},
					{
						value: '2',
						label: '支付宝'
					},
					{
						value: '3',
						label: '微信'
					},
					{
						value: '4',
						label: '信用卡'
					},
				],
				departmentList: [
					{
						value: '1',
						label: '行政'
					},
					{
						value: '2',
						label: '运营'
					},
					{
						value: '3',
						label: '到访'
					},
					{
						value: '4',
						label: '访问'
					},
				],
				dealPeopleList: [
					{
						value: '1',
						label: '章三'
					},
					{
						value: '2',
						label: '里斯'
					},
					{
						value: '3',
						label: '王武'
					},
					{
						value: '4',
						label: '赵云'
					},
				],
				splitlistList: [
					{
						value: '1',
						label: '拆单'
					},
					{
						value: '2',
						label: '不拆单'
					}
				]
			};
		},
		onLoad(options) {
		},
		onShow() {
		
		},
		methods: {
			nextStep(){
				this.step = 2
			},
			confirmXingzuo(e){
				console.log(e)
				this.form.xingzuo = e[0].value
				this.form.xingzuoName = e[0].label
			},
			confirmHobby(e){
				console.log(e)
				this.form.hobby = e[0].value
				this.form.hobbyName = e[0].label
			},
			confirmOccupation(e){
				console.log(e)
				this.form.occupation = e[0].value
				this.form.occupationName = e[0].label
			},
			confirmPaytype(e){
				console.log(e)
				this.form.paytype = e[0].value
				this.form.paytypeName = e[0].label
			},
			confirmPaymentMethod(e){
				console.log(e)
				this.form.paymentMethod = e[0].value
				this.form.paymentMethodName = e[0].label
			},
			confirmDealPeople(e){
				console.log(e)
				this.form.dealPeople = e[0].value
				this.form.dealPeopleName = e[0].label
			},
			confirmSplitlist(e){
				console.log(e)
				this.form.splitlist = e[0].value
				this.form.splitlistName = e[0].label
			},
			confirmDepartment(e){
				console.log(e)
				this.form.department = e[0].value
				this.form.departmentName = e[0].label
			},
			submit() {
				
			},
			// 租约期限
			changeDate(e){
				console.log(e)
				this.form.rentDate = e.startDate+ ' ~ ' + e.endDate
			},
			sexChange(){
				console.log(this.form.sex)
			},
		},
	};
</script>

<style lang="scss" scoped>
.container {
	width: 750rpx;
	min-height: 100vh;
	// background: #F8F8F8;
	padding: 20rpx 0 250rpx;
	.form-box{
		// background: #fff;
		padding: 0 30rpx;
		.item{
			height: 102rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			line-height: 102rpx;
			color: #333333;
			border-bottom: 1px solid #e0e0e0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.label{
				width: 120rpx;
				margin-right: 20rpx;
			}
			.input{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.path{
					width: 14rpx;
					height: 30rpx;
					margin-left: 20rpx;
				}
				.contact-btn{
					margin-left: 20rpx;
				}
				.yuan{
					margin-left: 20rpx;
				}
				.calendar{
					width: 40rpx;
					height: 40rpx;
					margin-left: 20rpx;
				}

			}
		}
		.last-item{
			display: flex;
			.label{
				line-height: 102rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-right: 150rpx;
			}

		}
	}
	.step{
		width: 690rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #FF6D25;
		border-radius: 12rpx;
		margin-left: 30rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		position: fixed;
		bottom: 50rpx;
	}
	.step2{
		position: fixed;
		bottom: 50rpx;
		width: 690rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.btn{
			width: 330rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 12rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
		}
		.next-btn{
			color: #FF6D25;
			background: #FFFFFF;
			border: 2rpx solid #FF6D25;
		}
		.submit-btn{
			background: #FF6D25;
			color: #FFFFFF;
		}

	}

}
</style>
