<template>
	<el-drawer
		:title="titleMap[mode]"
		v-model="visible"
		:size="1000"
		destroy-on-close
		@closed="$emit('closed')"
	>
		<el-container v-loading="loading">
			<el-main style="padding: 0 20px 20px 20px">
				<el-form
					ref="dialogForm"
					:model="form"
					:rules="rules"
					:disabled="mode == 'show'"
					label-width="80px"
				>
					<el-row>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="名称" prop="name">
								<el-input
									v-model="form.name"
									type="text"
									clearable
									:disabled="mode != 'add'"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="项目类型" prop="type">
								<el-select v-model="form.type" style="width: 100%">
									<el-option
										v-for="item in typeOptions"
										:key="item.id"
										:label="item.name"
										:value="item.id"
									/>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="合同编号" prop="contract_number">
								<el-input
									v-model="form.contract_number"
									type="text"
									clearable
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="进厂时间" prop="come_time">
								<el-date-picker
									v-model="form.come_time"
									type="datetime"
									placeholder="选择进厂时间"
								/>
							</el-form-item>
						</el-col>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="离厂时间" prop="leave_time">
								<el-date-picker
									v-model="form.leave_time"
									type="datetime"
									placeholder="选择离厂时间"
								/>
							</el-form-item>
						</el-col>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="所属部门">

								<el-cascader
									v-model="form.belong_dept"
									:options="deptoptions"
									:props="{
										  expandTrigger: 'hover', // 次级菜单的展开方式
										  label: 'label', //
										  value: 'value', //
										  emitPath: false, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
										  checkStrictly: true
									}"
									clearable
									style="width: 100%;">
								</el-cascader>
							</el-form-item>
						</el-col>

						<el-col :md="24" :sm="12" :xs="24" v-if="rparty_show">
							<el-form-item label="相关方" prop="rparty"> 
								<el-select v-model="form.rparty" style="width: 100%">
									<el-option
										v-for="item in rpartyOptions"
										:key="item.id"
										:label="item.name"
										:value="item.id"
									/>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-main>
			<el-footer>
				<el-button type="primary" :loading="isSaveing" :disabled="isSaveing" @click="submit"
				>保存
				</el-button
				>
				<el-button @click="visible = false">取消</el-button>
			</el-footer>
		</el-container>
	</el-drawer>
</template>

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

	export default {
		emits: ["success", "closed"],
		data() {
			return {
				loading: false,
				mode: "add",
				titleMap: {
					add: "新增",
					edit: "编辑",
					show: "查看",
				},
				form: {},
				rules: {
					name: [{required: true, message: "请输入"}],
					type: [{required: true, message: " 请选择"}],
					contract_number: [{required: true, message: "请输入"}],
					come_time: [{required: true, message: "请选择"}],
					leave_time: [{required: true, message: "请选择"}],
				},
				visible: false,
				isSaveing: false,
				selectionFilters: [],
				setFiltersVisible: false,
				rpartyOptions: [],
				deptoptions: [],
				typeOptions: [
					{id: 10, name: "建筑施工"},
					{id: 20, name: "设备设施检维修"},
					{id: 30, name: "保安保洁服务"},
					{id: 40, name: "其他"},
				],
				rparty_show: false
			};
		},
		mounted() {
			this.rpartyShow()
			this.getDept();
		},
		methods: {
			rpartyShow(){
      var userInfo = this.$TOOL.data.get("USER_INFO");
      if(userInfo.type=='employee'){
        this.rparty_show = true
        this.getRpartyOptions();
      }
      
    },
			//显示
			open(mode = "add") {
				this.mode = mode;
				this.visible = true;
				return this;
			},
			//所属部门
			getDept() {
				this.$API.system.dept.list.req({page: 0, type__in: 'dept'}).then((res) => {
					this.deptoptions = genTree(res);
				});
			},

			//相关方
			getRpartyOptions() {
				this.$API.rpm.rparty.list.req({page: 0}).then((res) => {
					this.rpartyOptions = res;
				});
			},
			//表单提交方法
			submit() {
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						try {
							var res;
							if (this.mode == "add") {
								res = await this.$API.rpm.rpj.create.req(this.form);
							} else if (this.mode == "edit") {
								res = await this.$API.rpm.rpj.update.req(this.form.id, this.form);
							}
							this.visible = false;
							this.isSaveing = false;
							this.$emit("success", this.form, this.mode);
							this.$message.success("操作成功");
							return res;
						} catch (err) {
							//可以处理校验错误
							this.isSaveing = false;
							return err;
						}
					}
				});
			},
			//表单注入数据
			setData(data) {
				// this.loading = true
				// const params = {
				// 	id: data.id
				// }
				// setTimeout(async ()=>{
				// 	var res = await this.$API.system.table.info.get(params)
				// 	this.loading = false
				// 	this.form = res.data
				// },400)
				Object.assign(this.form, data);
			},
			//设置过滤项
			setFilters(filters) {
				this.selectionFilters = filters;
				this.setFiltersVisible = true;
			},
		},
	};
</script>

<style>
</style>
