<template>
	<view class="container">
		<view v-if="canEdit">
			<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.idno" 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="男">先生</u-radio>
								<u-radio active-color="#FF6D25" name="女">女士</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.star"  @click="starShow = true"  placeholder="请选择星座"></u-input>
							<image class="path" src="/static/path.png" mode="" />
							<u-select confirm-color="#FF6D25" v-model="starShow" :list="starList" @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.job"  @click="jobShow = true"  placeholder="请选择职业"></u-input>
							<image class="path" src="/static/path.png" mode="" />
							<u-select confirm-color="#FF6D25" v-model="jobShow" :list="jobList" @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.hobby" @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" disabled input-align="right"  type="number" v-model="form.rentPrice" placeholder="请输入租金"></u-input>
						</view>
					</view>
					<view class="item">
						<view class="label">押金</view>
						<view class="input">
							<u-input :clearable="false" disabled  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.fee" 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.ws_fee" 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.peoples" 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.rent_date_start" @click="calendarShow1 = true"  placeholder="请选择租约期限"></u-input>
							<image class="calendar" src="/static/kehu/calendar.png" mode="" @click="calendarShow1 = true" />
							<u-calendar v-model="calendarShow1" max-date="2099-12-31" mode="date" @change="changeDate1"></u-calendar>
						</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.rent_date_end" @click="calendarShow2 = true"  placeholder="请选择租约期限"></u-input>
							<image class="calendar" src="/static/kehu/calendar.png" mode="" @click="calendarShow2 = true" />
							<u-calendar v-model="calendarShow2" max-date="2099-12-31" mode="date" @change="changeDate2"></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.deptIdName" @click="deptIdShow = true"  placeholder="请选择成交部门"></u-input>
							<image class="path" src="/static/path.png" mode="" />
							<u-select confirm-color="#FF6D25" v-model="deptIdShow" :list="deptIdList" @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="red-item">拆单金额(3010.0)与第一笔合计不等(6001.0),押金、服务费(6009.0)默认第一笔不在计算在内！</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" @click="submit">提交并预览</view>
			</view>
		</view>
		<view v-if="!canEdit" class="errText">{{errText}}</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				mindate: '',
				maxdate: '2099-12-31',
				canEdit: true,
				errText: '',
				step:1,
				calendarShow1: false,
				calendarShow2: false,
				starShow: false,
				hobbyShow: false,
				jobShow: false,
				paytypeShow: false,
				paymentMethodShow: false,
				deptIdShow: false,
				dealPeopleShow: false,
				form: {
					idno: '',//身份证号
					name: '',//客户姓名
					sex: '',//性别
					tel: '',//手机号
					starName: '',//
					star: '',//星座
					hobby: '',//
					job: '',//职业
					paytypeName:'',//支付类型
					paytype:'',//支付类型
					peoples: '',//居住人数
					deposit: '',//押金
					fee: '',//服务费
					ws_fee:'',// 卫生费
					rentPrice: '',//租金
					payment_way: '',//收款方式
					paymentMethodName: '',//收款方式
					deptIdName: '',//成交部门
					deptId: '',//成交部门
					dealPeople: '',//成交人
					dealPeopleName: '',//成交人
					rent_date_start: '',//租约开始期限
					rent_date_end: ''//租约结束期限
				},
				starList: [
					{
						value: '水瓶座',
						label: '水瓶座(01.20-02.18)'
					},
					{
						value: '双鱼座',
						label: '双鱼座(02.19─03.20)'
					},
					{
						value: '白羊座',
						label: '白羊座(03.21─04.20)	'
					},
					{
						value: '金牛座',
						label: '金牛座(04.21─05.20)'
					},
					{
						value: '双子座',
						label: '双子座(05.21─06.21)'
					},
					{
						value: '巨蟹座',
						label: '巨蟹座(06.22─07.22)'
					},
					{
						value: '狮子座',
						label: '狮子座(07.23─08.22)'
					},
					{
						value: '处女座',
						label: '处女座(08.23─09.22)'
					},
					{
						value: '天秤座',
						label: '天秤座(09.23─10.22)'
					},
					{
						value: '天蝎座',
						label: '天蝎座(10.23─11.22)'
					},
					{
						value: '射手座',
						label: '射手座(11.22─12.21)'
					},
					{
						value: '摩羯座',
						label: '摩羯座(12.22─01.19)'
					},
				],
				hobbyList: [
					{
						value: '阅读',
						label: '阅读'
					},
					{
						value: '运动',
						label: '运动'
					},
					{
						value: '餐饮',
						label: '餐饮'
					},
					{
						value: '旅游',
						label: '旅游'
					},
					{
						value: '音乐',
						label: '音乐'
					},
					{
						value: '饮茶',
						label: '饮茶'
					},
					{
						value: '影视',
						label: '影视'
					},
					{
						value: '书记',
						label: '书记'
					},
					{
						value: '其他',
						label: '其他'
					},
				],
				jobList: [
					{
						value: '白领',
						label: '白领'
					},
					{
						value: 'IT',
						label: 'IT'
					},
					{
						value: '商业',
						label: '商业'
					},
					{
						value: '政府',
						label: '政府'
					},
					{
						value: '医疗',
						label: '医疗'
					},
					{
						value: '教育',
						label: '教育'
					},
					{
						value: '军人',
						label: '军人'
					},
					{
						value: '其他',
						label: '其他'
					},
				],
				// 支付类型
				paytypeList: [
					{
						value: '1',
						label: '现金'
					},
					{
						value: '2',
						label: '第三方'
					}
				],
				// 收款方式
				paymentMethodList: [
					{
						value: '1',
						label: '月付'
					},
					{
						value: '3',
						label: '季付'
					},
					{
						value: '6',
						label: '半年付'
					},
					{
						value: '12',
						label: '年付'
					},
				],
				// 部门列表
				deptIdList: [],
				// 人员列表
				dealPeopleList: [],
				contractId: '',//
				electContractInfo: {}
			};
		},
		onLoad(options) {
			if (options.id){
				this.roomId = options.id;
			}else{
				this.electContractInfo = uni.getStorageSync('electContractInfo');
				uni.removeStorageSync('electContractInfo');
				console.log(this.electContractInfo)
				this.roomId = this.electContractInfo.roomId;
				this.form.rent_date_start = this.electContractInfo.rent_date_start
				this.form.rent_date_end = this.electContractInfo.rent_date_end
			}
			if(!this.roomId) return;
			this.oneVerificationContractInfo()
		},
		created() {
			this.getDeptList()
		},
		onShow() {
		},
		methods: {
			// 部门列表
			getDeptList(){
				this.$u.api.getDeptList({body:{}}).then((res)=>{
					if(res.result&&res.result.length){
						this.deptIdList = res.result.map(item=>{
							return{
								label: item.dept_name,
								value: item.id
							}
						})
					}
				})
			},
			// 部门下的员工列表
			getPersonList(){
				this.$u.api.getPersonList({body:{"deptId": this.form.deptId}}).then((res)=>{
					if(res.result&&res.result.length){
						this.dealPeopleList = res.result.map(item=>{
							return{
								label: item.userName,
								value: item.userId 
							}
						})
					}
				})
			},
			// 获取用户信息
			oneVerificationContractInfo(){
				this.$u.api.oneVerificationContractInfo({body:{"roomId": this.roomId}}).then((res)=>{
					if(res.ErrNo=='0000'){
						let data = res.result
						if(!data) return;
						this.contractId  = data.contractId 
						this.form.idno = data.idno
						this.form.name = data.customerName
						this.form.sex = data.sex
						this.form.tel = data.customerTel
						this.form.starName = data.star
						this.form.star = data.star
						this.form.hobby = data.hobby
						this.form.job = data.job
					}else{
						// console.log(res)
						this.canEdit = false
						this.errText = res.ErrMsg
					}
				})
			},
		// 第一步保存
			nextStep(){
				let body = {
					roomId: this.roomId,
					"customerName": this.form.name,
					"customerTel": this.form.tel,
					"idno": this.form.idno,
					"sex": this.form.sex,
					"star": this.form.star,
					"job": this.form.job,
					"hobby": this.form.hobby
				}
				this.$u.api.oneCustomerInfo({body:body}).then((res)=>{
					if(res.ErrNo=='0000'){
						this.form.rentPrice = res.result.rentPrice
						this.form.deposit = res.result.rentPrice
						this.contractId= res.result.contractId
						this.form.rent_date_end = res.result.contractEndDate
						let datetimer = new Date().getTime()
						this.form.rent_date_start = this.$u.timeFormat(datetimer, 'yyyy-mm-dd')
						this.step = 2
					}else{
					}
				})
			},
			getTimer(date){
				if(date){
					return  new Date(date).getTime()
				}
			},
			// 第二部保存
			submit() {
				if(this.form.fee==''){
					this.$refs.uToast.show({
						title: '请输入服务费'
					})
					return ;
				}
				if(this.form.ws_fee==''){
					this.$refs.uToast.show({
						title: '请输入卫生费'
					})
					return ;
				}
				if(this.form.payment_way==''){
					this.$refs.uToast.show({
						title: '请选择收款方式'
					})
					return ;
				}
				if(this.form.paytype==''){
					this.$refs.uToast.show({
						title: '请选择支付类型'
					})
					return ;
				}
				if(this.form.peoples==''){
					this.$refs.uToast.show({
						title: '请输入居住人数'
					})
					return ;
				}
				if(this.form.rent_date_start==''){
					this.$refs.uToast.show({
						title: '请输入租约的开始时间'
					})
					return ;
				}
				if(this.form.rent_date_end==''){
					this.$refs.uToast.show({
						title: '请输入租约的结束时间'
					})
					return ;
				}
				console.log('time')
				console.log(this.getTimer(this.form.rent_date_start))
				console.log(this.getTimer(this.form.rent_date_end))
				if(this.getTimer(this.form.rent_date_end)<this.getTimer(this.form.rent_date_start)){
					this.$refs.uToast.show({
						title: '租约的结束时间不能小于开始时间'
					})
					return ;
				}
				let body = {
					"contractId": this.contractId,
					"oldContractId": this.electContractInfo.proxy_contract_id,//续期合同id
					"rent_date_start": this.form.rent_date_start,
					"rent_date_end": this.form.rent_date_end,
					"fee": this.form.fee,
					"ws_fee": this.form.ws_fee,
					"peoples": this.form.peoples,
					"payment_type": this.form.paytype,
					"dept": this.form.dept,
					"rentPrice": this.form.rentPrice,
					"deposit": this.form.deposit,
					"payment_way": this.form.payment_way,
					"create_person": this.form.dealPeople
				}
				this.$u.api.twoContractInfo({body:body}).then((res)=>{
					if(res.ErrNo=='0000'){
						// this.$refs.uToast.show({
						// 	title: '拆单金额(3010.0)与第一笔合计不等(6001.0),押金、服务费(6009.0)默认第一笔不在计算在内！',
						// })
						this.$refs.uToast.show({
							title: res.ErrMsg,
							icon: 'none',
							type:'success'
						})
						uni.navigateTo({
							url: '/pages/my/contact_check_page?src='+res.result
						})
					}else{
					}
				})
				
			},
			confirmXingzuo(e){
				this.form.star = e[0].value
				this.form.starName = e[0].label
			},
			confirmHobby(e){
				this.form.hobby = e[0].value
			},
			confirmOccupation(e){
				this.form.job = e[0].value
			},
			confirmPaytype(e){
				this.form.paytype = e[0].value
				this.form.paytypeName = e[0].label
			},
			confirmPaymentMethod(e){
				this.form.payment_way = e[0].value
				this.form.paymentMethodName = e[0].label
			},
			confirmDealPeople(e){
				this.form.dealPeople = e[0].value
				this.form.dealPeopleName = e[0].label
			},
			confirmDepartment(e){
				this.form.deptId = e[0].value
				this.form.deptIdName = e[0].label
				this.getPersonList()
			},
			
			// 租约期限
			changeDate1(e){
				this.form.rent_date_start = e.result
				this.mindate = e.result
			},
			// 租约期限
			changeDate2(e){
				this.form.rent_date_end = e.result
				this.maxdate = e.result
			},
			sexChange(){
				console.log(this.form.sex)
			},
		},
	};
</script>

<style lang="scss" scoped>
.container {
	width: 750rpx;
	min-height: 100vh;
	padding: 20rpx 0 250rpx;
	.errText{
		color: #E7483C;
		padding: 0 30rpx;
	}
	.form-box{
		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;
			}

		}
		.red-item{
			width: 690rpx;
			height: 66rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #E7483C;
			line-height: 33rpx;
			margin: 24rpx 30rpx 0;
		}
	}
	.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;
		z-index: 9999;
		bottom: 50rpx;
	}
	.step2{
		position: fixed;
		z-index: 9999;
		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>
