<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="100px"
        >
          <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></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="12" :xs="24">
              <el-form-item label="开始时间"  prop="start_time">
                <el-date-picker
                  v-model="form.start_time"
                  type="datetime"
                  placeholder="选择开始时间"
                />
              </el-form-item>
            </el-col>

            <el-col :md="12" :sm="12" :xs="24">
              <el-form-item label="结束时间" prop="end_time">
                <el-date-picker
                  v-model="form.end_time"
                  type="datetime"
                  placeholder="选择结束时间"
                />
              </el-form-item>
            </el-col>

            <el-col :md="12" :sm="12" :xs="24">
              <el-form-item label="生产状态" prop="state_work">
                <el-select v-model="form.state_work" placeholder="选择生产状态">
                  <el-option
                    v-for="item in stateoptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24" :xs="24">
              <el-form-item label="作业区域" prop="area">
                <el-select v-model="form.area" placeholder="选择作业区域" @change="areaChange" clearable>
                  <el-option
                    v-for="item in areaoptions"
                    :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="place">
                <el-input v-model="form.place" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
         
            <el-col :md="12" :sm="24" :xs="24">
              <el-form-item label="业务部门" prop="dept_bus">
                <el-cascader
                  placeholder="选择业务部门"
                   getCheckedNodes="true"
                   :props="{
                    expandTrigger: 'hover', // 次级菜单的展开方式
                    label: 'label', //
                    value: 'value', //
                    emitPath: false, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
                    checkStrictly: true                  
                  }"
                  v-model="form.dept_bus"
                  :options="deptoptions"
                  clearable
                />
              </el-form-item>
            </el-col>

            <el-col :md="12" :sm="24" :xs="24">
              <el-form-item label="部门协调员"  prop="coordinator">
                <el-input
              v-model="form.coordinator_name"
              disabled
              style="width:200px"
            ></el-input>
                <ehsUserSelect :multiple="false" @submit="getUser"/>
              </el-form-item>
            </el-col>
               <el-col :md="12" :sm="24" :xs="24">
              <el-form-item label="属地部门" prop="dept_ter">
                <el-cascader
                  placeholder="选择属地部门"
                  getCheckedNodes="true"
                  v-model="form.dept_ter"
                  :options="deptoptions"
                   :props="{
                    expandTrigger: 'hover', // 次级菜单的展开方式
                    label: 'label', //
                    value: 'value', //
                    emitPath: false, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
                    checkStrictly: true
                  }"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24" :xs="24">
              <el-form-item label="监控摄像头"  prop="vchannels">
                <el-select
                  v-model="form.vchannels"
                  :multiple = "true"
                  filterable
                >
                  <el-option
                    v-for="item in vchannelOptions"
                    :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" @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: "请输入作业简介" }],
        start_time: [{ required: true, message: "请输入" }],
        end_time: [{ required: true, message: "请输入" }],
        state_work: [{ required: true, message: "请输入" }],
        area: [{ required: true, message: "请输入" }],
        dept_ter: [{ required: true, message: "请输入" }],
        dept_bus: [{ required: true, message: "请输入" }],
        coordinator: [{ required: true, message: "请输入" }],
      },
      visible: false,
      isSaveing: false,
      selectionFilters: [],
      setFiltersVisible: false,
      stateoptions: [
        { id: 10, name: "运行" },
        { id: 20, name: "停机" },
        { id: 30, name: "检修" },
      ],
      deptoptions: [],
      areaoptions: [],
      coordinatoroptions:[],
      vchannelOptions: []
    };
  },
  mounted() {
    this.getDept();
    this.getArea();
    this.getVchannels();
  },
  methods: {
    //所属部门,属地部门，业务部门
    getDept() {
      this.$API.system.dept.list.req({ page: 0 , type__in: 'dept'}).then((res) => {
        this.deptoptions = genTree(res);
      });
    },

    //作业区域
    getArea() {
      this.$API.am.area.list.req({ page: 0 }).then((res) => {
       
        this.areaoptions = res;
      });
    },
    areaChange(val) {
      this.form.area = val
      this.getVchannels()
    },
    // dept1Change(val) {
    //   // 业务部门变化
    //   this.$API.system.user.list.req({ page: 0, belong_dept: val }).then((res) => {
       
    //     this.coordinatoroptions = res;
    //   });
    // },
    getVchannels(){
      this.$API.third.tdevice.list.req({ type: 60, page: 0, area: this.form.area }).then((res) => {
        this.vchannelOptions = res;
      });
    },
    getUser(data) {
      // 子组件调用父组件的方法并传参
      this.form.coordinator=data.id;
      this.form.coordinator_name=data.name
    },
    //显示
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          try {
            var res;
            if (this.mode == "add") {
               res = await this.$API.opm.operation.create.req(this.form);
               this.form.id = res.id;
            } else if (this.mode == "edit") {
              res = await this.$API.opm.operation.update.req(
                this.form.id,
                this.form
              );
            }
            this.isSaveing = false;
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success("操作成功");
            return res;
          } catch (err) {
            //可以处理校验错误
            this.isSaveing = false;
            return err;
          }
        }
      });
    },
    //表单注入数据
    setData(data) {
      Object.assign(this.form, data);
    },
    //设置过滤项
    setFilters(filters) {
      this.selectionFilters = filters;
      this.setFiltersVisible = true;
    },
  },
};
</script>

<style scoped>
.el-transfer {
  --el-transfer-panel-width: 345px !important;
}
</style>
