<template>
	<view class="containers">
		<view class="steps">
			<uni-steps :options="steps" :active="stepActive" active-color="#044ed7" />
		</view>
		<uni-forms ref="formdata" :model="form" :rules="rules" labelWidth="100px">
			<view class="formtext">拜访信息</view>
			<uni-forms-item label="到访日期" required name="date">
				<uni-datetime-picker type="date" return-type="string" v-model="form.date" />
			</uni-forms-item>
			<uni-forms-item label="到访时段" required name="visit_time_id">
				<uni-data-checkbox v-model="form.visit_time_id" :localdata="visitTime"
					:map="{text:'vititTimeRange',value:'id'}" />
			</uni-forms-item>
			<uni-forms-item label="前往区域" required name="visit_area_id">
				<uni-data-checkbox v-model="form.visit_area_id" :localdata="visitArea"
					:map="{text:'name',value:'id'}" />
			</uni-forms-item>
			<uni-forms-item label="到访事由" v-if="form.type==1">
				<uni-data-select v-model="form.reason" :localdata="reasonList">
				</uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="施工开始时段" v-if="form.type==2">
				<uni-datetime-picker type="date" return-type="string" v-model="form.work_start_time" />

			</uni-forms-item>
			<uni-forms-item label="施工结束时段" v-if="form.type==2">
				<uni-datetime-picker type="date" return-type="string" v-model="form.work_end_time" />
			</uni-forms-item>
			<uni-forms-item label="车牌号" v-if="form.type==3">
				<uni-easyinput v-model="form.plate" placeholder="请输入车牌号" />
			</uni-forms-item>
			<uni-forms-item label="备注">
				<uni-easyinput type="textarea" v-model="form.remark" placeholder="请输入自我备注" />
			</uni-forms-item>
			<view class="formtext">拜访人信息</view>
			<uni-forms-item label="姓名" required name="name">
				<uni-easyinput v-model="form.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="联系电话" required name="mobile">
				<uni-easyinput v-model="form.mobile" placeholder="请输入联系电话" />
			</uni-forms-item>
			<uni-forms-item label="证件类型">
				<uni-data-select v-model="form.credent" :localdata="credentList">
				</uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="证件号码">
				<uni-easyinput type="idcard" v-model="form.idcard" placeholder="请输入证件号码" />
			</uni-forms-item>
			<uni-forms-item label="单位名称">
				<uni-easyinput v-model="form.company_name" placeholder="请输入单位名称" />
			</uni-forms-item>
			<uni-forms-item label="到访车辆" v-if="form.type!=3">
				<uni-easyinput v-model="form.cars" placeholder="请输入到访车辆" />
			</uni-forms-item>
			<template v-if="form.type!=3">
				<view class="formtext" style="display: flex;justify-content: space-between;">
					<text>随访人员</text>
					<button style="background-color: #044ed7;" type="primary" size="mini"
						@click="$refs.showRight.open(),follw_people_obj={},follow_people_index=-1">新增随访人员</button>
				</view>
				<!-- 随访人员表格 -->
				<template>
					<uni-table ref="table" border emptyText="暂无更多数据">
						<uni-tr>
							<uni-th width="160" align="center">操作</uni-th>
							<uni-th width="120" align="center">姓名</uni-th>
							<uni-th width="120" align="left">联系电话</uni-th>
							<uni-th width="120" align="center">证件类型</uni-th>
							<uni-th width="120" align="left">证件号码</uni-th>
						</uni-tr>
						<uni-tr style="vertical-align: middle;" v-for="(item, index) in form.follw_people" :key="index">
							<uni-td>
								<view class="uni-group">
									<button style="background-color: #044ed7;margin-right:8px"
										@click="editFollwPeople(index)" class="uni-button" size="mini"
										type="primary">修改</button>
									<button class="uni-button" size="mini" type="warn"
										@click="form.follw_people.splice(index,1)">删除</button>
								</view>
							</uni-td>
							<uni-td>{{ item.name }}</uni-td>
							<uni-td>
								<view class="name">{{ item.mobile }}</view>
							</uni-td>
							<uni-td align="center">{{ item.credent==1?'身份证':"护照" }}</uni-td>
							<uni-td align="center">{{ item.idcard }}</uni-td>
						</uni-tr>
					</uni-table>
				</template>
			</template>

			<uni-forms-item label="长访客申请">
				<uni-data-checkbox v-model="form.long_time" :localdata="longList" :map="{text:'value',value:'id'}" />
			</uni-forms-item>
			<template v-if="form.long_time==1">
				<uni-forms-item label="开始日期">
					<uni-datetime-picker type="date" return-type="string" v-model="form.start_date" />
				</uni-forms-item>
				<uni-forms-item label="结束日期">
					<uni-datetime-picker type="date" return-type="string" v-model="form.end_date" />
				</uni-forms-item>
			</template>
			<view class="formtext">被访人信息</view>
			<uni-forms-item label="被访人">
				<uni-data-select v-model="form.accept_admin_id" :localdata="adminList">
				</uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="收货人" v-if="form.type==3">
				<uni-data-select v-model="form.accept_goods_admin_id" :localdata="adminList">
				</uni-data-select>
			</uni-forms-item>
		</uni-forms>
		<button type="primary" style="background-color: #044ed7;" @click="saveFormgoStudy">去学习</button>


		<!-- 随访人员弹出 -->
		<uni-drawer ref="showRight" mode="right" :mask-click="true">
			<uni-forms ref="form" :model="follw_people_obj" labelWidth="80px">
				<uni-forms-item label="姓名">
					<uni-easyinput v-model="follw_people_obj.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="联系电话" required>
					<uni-easyinput v-model="follw_people_obj.mobile" placeholder="请输入联系电话" />
				</uni-forms-item>
				<uni-forms-item label="证件类型">
					<uni-data-select @change="chooseCredent" v-model="follw_people_obj.credent"
						:localdata="credentList">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="证件号码">
					<uni-easyinput type="idcard" v-model="follw_people_obj.idcard" placeholder="请输入证件号码" />
				</uni-forms-item>
			</uni-forms>
			<view class="uni-group" style="text-align: right;">
				<button @click="closeDrawer" size="mini">取消</button>
				<button @click="pushFollowPeople" size="mini" type="primary"
					style="background-color: #044ed7;margin-left:8px">确认</button>
			</view>
		</uni-drawer>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				steps: [{
					title: '填报'
				}, {
					title: '学习'
				}, {
					title: '完成'
				}],
				stepActive: 0,
				form: {
					type: 1,
					date: "",
					visit_time_id: "",
					visit_area_id: "",
					reason: "",
					plate: "",
					remark: "",
					name: "",
					mobile: "",
					credent: 1,
					idcard: "",
					company_name: "",
					cars: "",
					follw_people: [],
					long_time: 0,
					start_date: "",
					end_date: "",
					accpet_department_id: "",
					accept_admin_id: "",
					accept_goods_admin_id: ""
				},
				follw_people_obj: {},
				follow_people_index: -1,
				rules: {
					date: {
						rules: [{
							required: true,
							errorMessage: '请选择到访日期'
						}]
					},
					visit_time_id: {
						rules: [{
							required: true,
							errorMessage: '请选择拜访时段'
						}]
					},
					visit_area_id: {
						rules: [{
							required: true,
							errorMessage: '请选择前往区域'
						}]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					mobile: {
						rules: [{
							required: true,
							errorMessage: '联系电话不能为空'
						}, {
							pattern: '^[1][3-9][\\d]{9}',
							errorMessage: '联系号码格式错误'
						}]
					},
				},
				// 单选数据源
				visitTime: [{
					vititTimeRange: '9-10',
					id: 0
				}, {
					vititTimeRange: '10-11',
					id: 1
				}, {
					vititTimeRange: '11-12',
					id: 2
				}],
				visitArea: [{
					name: '9-10',
					id: 0
				}, {
					name: '10-11',
					id: 1
				}, {
					name: '11-12',
					id: 2
				}],
				reasonList: [{
						value: 0,
						text: "开会"
					},
					{
						value: 1,
						text: "洽谈"
					}
				],
				credentList: [{
						value: 1,
						text: "身份证"
					},
					{
						value: 2,
						text: "护照"
					}
				],
				longList: [{
					id: 0,
					value: '否'
				}, {
					id: 1,
					value: '是'
				}],
				adminList: []

			}
		},
		onLoad(options) {
			this.form.type = options.type
		},
		onReady() {},
		methods: {
			// 获取单选数据
			async getVisitTime() {
				// util.request()
			},
			//
			chooseCredent(e) {
				console.log(e)
			},
			// 随访人员弹出
			editFollwPeople(index) {
				this.follow_people_index = index
				this.follw_people_obj = this.form.follw_people[index]
				this.$refs.showRight.open()
			},
			closeDrawer() {
				this.follw_people_obj = {}
				this.follow_people_index = -1
				this.$refs.showRight.close()
			},
			pushFollowPeople() {
				if (this.follow_people_index > -1) {
					this.form.follw_people[this.follow_people_index] = this.follw_people_obj
				} else {
					this.form.follw_people.push(this.follw_people_obj)
				}
				this.follow_people_index = -1
				this.$refs.showRight.close()
			},
			// 去学习
			saveFormgoStudy() {
				console.log("form", this.form)
				this.$refs['formdata'].validate().then(res => {
					uni.setStorageSync('formdata', this.form)
					uni.navigateTo({
						url: '/pages/visit/study?type=' + this.form.type
					})
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style scoped>
	.containers {
		background-color: #fff;
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: 60rpx;
	}

	.steps {
		margin-bottom: 40rpx
	}

	.formtext {
		margin-bottom: 20rpx
	}

	/deep/ .uni-table-td {
		vertical-align: middle;
	}

	/deep/ .uni-drawer__content {
		padding: 40rpx
	}
</style>
