<template>
	<el-Dialog
		:title="titleMap[mode]"
		v-model="visible"
		destroy-on-close
		@closed="closeDrawer"
	>
		<el-form
			ref="dialogForm"
			:model="form"
			:rules="rules"
			:disabled="mode === 'show'"
			label-width="120px"
		>
			<el-row>
				<el-col :md="12" :sm="24">
					<el-form-item label="区域名称" prop="name">
						<el-input
							v-model="form.name"
							placeholder="请输入区域名称"
							clearable
						></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="区域类型" prop="cate">
						<el-select v-model="form.cate" style="width: 100%">
							<el-option
								v-for="item in cateOptions"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="风险等级" prop="level">
						<el-select v-model="form.level" style="width: 100%">
							<el-option
								v-for="item in levelOptions"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="区域编号">
						<el-input
							v-model="form.number"
							placeholder="请输入区域编号"
							clearable
						></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="所属部门">
						<el-cascader
							v-model="form.belong_dept"
							:options="group"
							:props="groupsProps"
							clearable
							:show-all-levels="false"
							style="width: 100%"
						>
						</el-cascader>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="区域负责人">
						<span style="display:flex">
                <el-input readonly v-model="form.manager_name"></el-input>
                <ehsUserSelect :multiple="false" @submit="getManager"/>
                </span>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="最小人员数">
						<el-input
							v-model="form.count_people_min"
							placeholder="最小人员数"
							clearable
						></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="最大人员数">
						<el-input
							v-model="form.count_people_max"
							placeholder="最大人员数"
							clearable
						></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="最短停留时间">
						<el-input
							v-model="form.stay_minute_min"
							placeholder="最短停留时间"
							clearable
						></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="最长停留时间">
						<el-input
							v-model="form.stay_minute_max"
							placeholder="最长停留时间"
							clearable
						></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="当前人数">
						<el-input
							v-model="form.count_people"
							placeholder="当前人数"
							disabled
						></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="准许访客人员">
						<el-switch v-model="visitor_yes"/>
					</el-form-item>
				</el-col>

				<el-col :md="12" :sm="24">
					<el-form-item label="准许相关方人员">
						<el-switch v-model="remployee_yes"/>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="准许全部员工">
						<el-switch v-model="employee_yes"/>
					</el-form-item>
				</el-col>
				<el-col  :md="12" :sm="24">
					<el-form-item label="准许货车司机">
						<el-switch v-model="driver_yes"/>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button type="primary" :loading="isSaveing" @click="submit">
				保存
			</el-button>
			<el-button @click="visible = false">取消</el-button>
		</template>
	</el-Dialog>
</template>

<script>
	import {genTree} from "@/utils/verificate";

	const defaultForm = {
		id: null,
		name: "",
		level: 10,
		number: "",
		access_list:[],
		belong_dept: null,
		count_people_min: 0,
		count_people_max: 1000,
		count_people: 0,
		stay_minute_min: 0,
		stay_minute_max: 0,
		cate: 10,
	};
	export default {
		emits: ["success", "closed"],
		data() {
			return {
				loading: false,
				mode: "add",
				titleMap: {
					add: "新增区域",
					edit: "区域编辑",
				},
				levelOptions: [
					{id: 10, name: "低风险"},
					{id: 20, name: "一般风险"},
					{id: 30, name: "较大风险"},
					{id: 40, name: "重大风险"},
				],
				cateOptions: [
					{id: 10, name: "生活区域"},
					{id: 20, name: "一般区域"},
					{id: 30, name: "重点区域"},
				],
				visible: false,
				isSaveing: false,
				form: defaultForm,
				useroptions: [],
				//验证规则
				rules: {
					name: [{required: true, message: "请输入区域名称"}],
					level: [{required: true, message: " 区域风险等级"}],
					cate: [{required: true, message: "区域分类"}],
				},
				groupsProps: {
					// value: "id",
					multiple: false,
					emitPath: false,
					checkStrictly: true,
				},
				visitor_yes: false,
				remployee_yes: false,
				employee_yes: false,
				driver_yes:false,
				group: [],
				postOptions: [],
				selectionFilters: [],
			};
		},
		mounted() {
			this.getGroup();
		},
		methods: {
			//加载树数据
			async getGroup() {
				let res = await this.$API.system.dept.list.req({page: 0});
				this.group = genTree(res);
			},
			getManager(data){
				this.form.manager=data.id;
      			this.form.manager_name=data.name
			},
			//显示
			open(mode) {
				this.mode = mode;
				this.visible = true;
				return this;
			},
			closeDrawer() {
				this.visible = false;
				this.$emit("closed");
			},
			//表单提交方法
			submit() {
				this.$refs.dialogForm.validate((valid) => {
					if (valid) {
						let arr = [];
						if (this.employee_yes){arr.push('employee')}
						if (this.remployee_yes){arr.push('remployee')}
						if (this.visitor_yes){arr.push('visitor')}
						if (this.driver_yes){arr.push('driver')}
						this.form.access_list = arr;
							this.isSaveing = true;
						if (this.mode === "add") {
							this.$API.am.area.create
								.req(this.form)
								.then((res) => {
									this.isSaveing = false;
									this.visible = false;
									this.$emit("success", this.form, this.mode);
									this.$message.success("操作成功");
									return res;
								})
								.catch((err) => {
									this.isSaveing = false;
									return err;
								});
						} else {
							this.$API.am.area.update
								.req(this.form.id, this.form)
								.then((res) => {
									this.isSaveing = false;
									this.visible = false;
									this.$emit("success", this.form, this.mode);
									this.$message.success("操作成功");
									return res;
								})
								.catch((err) => {
									this.isSaveing = false;
									return err;
								});
						}
					}
				});
			},
			//表单注入数据
			setData(data) {
				debugger;
				Object.assign(this.form, data);
				if (data.access_list.indexOf('employee')> -1) {
					this.employee_yes = true;
				}
				if (data.access_list.indexOf('remployee')>-1) {
					this.remployee_yes = true;
				}
				if (data.access_list.indexOf('visitor')>-1) {
					this.visitor_yes = true;
				}
				if (data.access_list.indexOf('driver')>-1) {
					this.driver_yes = true;
				}
			},
		},
	};
</script>

<style>
</style>
