<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="60%"
    center
    @close="close"
  >
    <el-form
      :disabled="formDisabled"
      :model="form"
      :rules="rules"
      ref="formRef"
      label-width="150px"
    >
      <el-form-item label="人员角色" prop="roleId">
        <el-select
          :disabled="itemDisabled"
          v-model="form.roleId"
          placeholder="请选择"
          class="w100"
        >
          <el-option
            v-for="item in roleList"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="服务商预警类型" prop="warnType">
        <el-select
          :disabled="itemDisabled"
          v-model="form.warnType"
          placeholder="请选择"
          class="w100"
        >
          <el-option
            v-for="item in roleSupWarnRuleTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="预警规则" prop="warnLogic">
        <el-select v-model="form.warnLogic" placeholder="请选择" class="w100">
          <el-option
            v-for="item in roleSupWarnRuleLogic"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="风险临界值" prop="value">
        <el-input
          v-model="form.value"
          type="text"
          oninput="value=value.replace(/[^\d.]/g,'')"
        />
      </el-form-item>
      <el-form-item label="风险信息模板" prop="template">
        <el-input type="textarea" v-model="form.template" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer" v-if="title !== '详情'">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" :loading="btnloading" @click="submitFn"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import {
  supervisionWarnRuleCreateApi,
  supervisionWarnRuleUpdateApi
} from "@/api/riskEventWarningSettings.js";
import { roleExcludeList } from "@/api/admin/role";
import { getDictType } from "@/api/common";
export default {
  data() {
    return {
      title: "新增",
      dialogVisible: false,
      formDisabled: false,
      itemDisabled: false,
      btnloading: false,
      form: {
        ruleId: "",
        roleId: "",
        warnType: "",
        warnLogic: "",
        value: "",
        template: ""
      },
      rules: {
        roleId: [
          { required: true, message: "请选择人员角色", trigger: "change" }
        ],
        warnType: [
          { required: true, message: "请选择服务商预警类型", trigger: "change" }
        ],
        warnLogic: [
          { required: true, message: "请输入风险临界值", trigger: "change" }
        ],
        value: [
          { required: true, message: "请输入风险临界值", trigger: "blur" }
        ],
        template: [
          { required: true, message: "请输入风险信息模板", trigger: "blur" }
        ]
      },
      roleList: [],
      roleSupWarnRuleTypeList: [],
      roleSupWarnRuleLogic: []
    };
  },
  created() {
    this.getRoleList();
    this.getDict();
  },
  methods: {
    add() {
      this.title = "新增";
      this.dialogVisible = true;
    },
    detail(row) {
      this.title = "详情";
      this.initForm(row);
      this.formDisabled = true;
      this.dialogVisible = true;
    },
    update(row) {
      this.title = "编辑";
      this.initForm(row);
      this.form.ruleId = row.ruleId;
      this.itemDisabled = true;
      this.dialogVisible = true;
    },
    initForm(row) {
      this.form.roleId = row.roleId;
      this.form.warnType = row.warnType;
      this.form.warnLogic = row.warnLogic;
      this.form.value = row.value;
      this.form.template = row.template;
    },
    async getRoleList() {
      const res = await roleExcludeList();
      this.roleList = res.data.data;
    },
    getDict() {
      getDictType({ type: "role_sup_warn_rule_type" }).then(
        res => (this.roleSupWarnRuleTypeList = res.data.data)
      );
      getDictType({ type: "role_sup_warn_rule_logic" }).then(
        res => (this.roleSupWarnRuleLogic = res.data.data)
      );
    },
    submitFn() {
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          this.btnloading = true;
          let res;
          let txt;

          if (this.title === "新增") {
            res = await supervisionWarnRuleCreateApi(this.form);
            txt = "创建成功";
          } else {
            res = await supervisionWarnRuleUpdateApi(this.form);
            txt = "更新成功";
          }
          if (res.data.data) {
            this.$message.success(txt);
            this.$emit("success");
            this.btnloading = false;
            this.close();
          }
        }
      });
    },
    close() {
      this.$refs.formRef.resetFields();
      this.formDisabled = false;
      this.itemDisabled = false;
      this.form.roleId = "";
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped></style>
