<template>
  <el-dialog
    :title="titleMap[mode]"
    v-model="visible"
    destroy-on-close
    @closed="$emit('closed')"
    :draggable="true"
  >
    <el-form
      :model="form"
      :rules="rules"
      :disabled="mode == 'show'"
      ref="dialogForm"
      label-width="100px"
    >
      <el-row>
        <el-col :md="12" :sm="24">
          <el-form-item label="事件" prop="event_cate">
            <el-select v-model="form.event_cate">
              <el-option
                v-for="item in eventcate_options"
                :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="obj_cate">
            <el-select v-model="form.obj_cate" @change="cateChange">
              <el-option
                v-for="item in objcate_options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24" v-show="postshow">
          <el-form-item label="岗位" prop="post">
            <el-select v-model="form.post" style="width: 100%">
              <el-option
                v-for="item in post_options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24" v-show="usershow">
          <el-form-item label="人员" prop="user">
            <el-select v-model="form.user" style="width: 100%">
              <el-option
                v-for="item in user_options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
         <el-col :md="12" :sm="24" v-show="variableshow">
          <el-form-item label="变量" prop="variable">
            <el-select v-model="form.variable" style="width: 100%">
              <el-option
                v-for="item in variable_options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24" v-show="postshow">
          <el-form-item label="提醒人员过滤" prop="filter_recipient">
            <el-select
              v-model="form.filter_recipient"
              clearable
              @clear="
                () => {
                  form.filter_recipient = null;
                }
              "
            >
              <el-option
                v-for="item in filter_recipient_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="区域级别过滤" prop="filter_area_level">
            <el-select
              v-model="form.filter_area_level"
              clearable
              @clear="
                () => {
                  form.filter_area_level = null;
                }
              "
            >
              <el-option
                v-for="item in filter_area_level_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="通知形式">
            <el-checkbox v-model="form.sms_enable" label="短信" size="small" />
            <el-checkbox
              v-model="form.wechat_enable"
              label="微信"
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="可处理" prop="can_handle">
            <el-switch v-model="form.can_handle"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="排序" prop="sort">
            <el-input-number
              v-model="form.sort"
              :min="0"
              :max="2147483647"
              controls-position="right"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        v-if="mode != 'show'"
        type="primary"
        :loading="isSaveing"
        @click="submit()"
        >保 存</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
import { genTree } from "@/utils/verificate";
export default {
  emits: ["success", "closed"],
  data() {
    return {
      mode: "add",
      titleMap: {
        add: "新增",
        edit: "编辑",
        show: "查看",
      },
      visible: false,
      isSaveing: false,
      //表单数据
      form: {
        id: null,
        obj_cate: null,
        can_handle: true,
        wechat_enable: false,
        sms_enable: true,
        filter_recipient: null,
        filter_area_level: null,
      },
      //验证规则
      rules: {
        name: [{ required: true, message: "请输入" }],
      },

      filter_recipient_options: [
        {
          value: 10,
          label: "当事人部门以上",
        },
        {
          value: 30,
          label: "属地部门以上",
        },
      ],
      objcate_options: [
        { id: "post", name: "岗位" },
        { id: "user", name: "用户" },
        { id: "variable", name: "变量" },
      ],
      post_options: [],
      user_options: [],
      variable_options: [
        { id: "self", name: "本人" },
        { id: "area_manager", name: "区域负责人" },
        { id: "visit_receptionist", name: "访客接待人" },
      ],
      filter_area_level_options: [
        {
          value: 10,
          label: "低风险",
        },
        {
          value: 20,
          label: "一般风险",
        },
        {
          value: 30,
          label: "较大风险",
        },
        {
          value: 40,
          label: "重大风险",
        },
      ],
      eventcate_options: [],
      postshow: false,
      usershow: false,
      variableshow: false,
    };
  },
  mounted() {
    this.getPostOptions();
    this.getUserOptions();
    this.getEventCate();
  },
  methods: {
    //显示
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      if (mode == "add") {
        this.form.event_cate = this.$parent.chosen_cate;
      }
      return this;
    },

    //事件列表
    getEventCate() {
      this.$API.ecm.event_cate.list.req({ page: 0 }).then((res) => {
        this.eventcate_options = res;
      });
    },

    //
    cateChange() {
      if (this.form.obj_cate == "post") {
        this.postshow = true;
        this.usershow = false;
        this.variableshow = false;
      } else if (this.form.obj_cate == "user") {
        this.postshow = false;
        this.usershow = true;
        this.variableshow = false;
      } else {
        this.postshow = false;
        this.usershow = false;
        this.variableshow = true;
      }
    },
    //岗位列表
    getPostOptions() {
      this.$API.system.post.list.req({ page: 0 }).then((res) => {
        this.post_options = res;
      });
    },
    //岗位列表
    getUserOptions() {
      this.$API.system.user.list.req({ page: 0 }).then((res) => {
        this.user_options = res;
      });
    },
    //表单提交方法
    async submit() {
      var valid = await this.$refs.dialogForm.validate().catch(() => {});
      if (!valid) {
        return false;
      }
      this.isSaveing = true;
      try {
        var res;
        if (this.mode == "add") {
          res = await this.$API.ecm.notify_setting.create.req(this.form);
        } else if (this.mode == "edit") {
          res = await this.$API.ecm.notify_setting.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);
    },
  },
};
</script>

<style>
</style>
