<template>
  <div class="rule-type">
    <el-dialog :title="id ? '编辑规范' : '新增规范'" :visible.sync="isShow" width="40%">
      <div class="page-body">
        <el-form :model="formData" :rules="formDataRules" size="small" ref="form" label-position="right"
          label-width="120px" label-prefix=":">
          <el-form-item prop="id" label="规范名称:" hidden>
            <el-input v-model="formData.id" clearable />
          </el-form-item>

          <el-form-item prop="ruleName" label="规范名称:">
            <el-input v-model="formData.ruleName" :maxlength="50" name="ruleName" placeholder="请输入规范名称" clearable />
          </el-form-item>

          <el-form-item prop="ruleTypeId" label="规范类型:">
            <k-select v-model="formData.ruleTypeId" url="/dict/find/dict" :params="{ dictCode: 'rule_type' }"
              placeholder="请选择规范类型"></k-select>
          </el-form-item>

          <el-form-item prop="orgType" label="受检对象:">
            <el-select prop="orgType" label="受检对象" v-model="formData.orgType" placeholder="请选择受检对象" clearable>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="ruleStatus" label="状态:">
            <el-select prop="ruleStatus" label="状态" v-model="formData.ruleStatus" placeholder="请选择状态" clearable>
              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="remark" label="备注">
            <el-input v-model="formData.remark" :maxlength="32" clearable />
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="onHide">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    const params = this.$route.params;
    return {
      id: params ? params.id : null,
      isShow: false,
      formData: this.reset(),
      formDataRules: {
        ruleName: [{ required: true, message: "请输入规范名称" }],
        ruleTypeId: [{ required: true, message: "请选择规范类型" }],
        orgType: [{ required: true, message: "请选择受检对象" }],
        ruleStatus: [{ required: true, message: "请选择状态" }],
      },
      statusOptions: [
        {
          value: 1,
          label: "禁用",
        },
        {
          value: 0,
          label: "启用",
        },
      ],
      options: [
        {
          label: "一级分行",
          value: 0,
        },
        {
          value: 1,
          label: "二级分行",
        },
        {
          value: 2,
          label: "一级支行",
        },
        {
          value: 3,
          label: "营业网点",
        },
        {
          value: 4,
          label: "离行自助银行",
        },
        {
          value: 5,
          label: "金库",
        },
        {
          value: 6,
          label: "办公大楼",
        },
        {
          value: 7,
          label: "监控中心",
        },
        {
          value: 8,
          label: "园区",
        },
        {
          value: 9,
          label: "其他",
        },
        {
          value: 10,
          label: "现金中心",
        },
      ],
    };
  },
  props: {},
  watch: {},
  computed: {
    ...mapState([]),
  },
  methods: {
    ...mapMutations([]),
    reset() {
      return {
        id: null,
        ruleName: null,
        ruleTypeId: null,
        orgType: null,
        ruleStatus: null,
        remark: null,
      };
    },
    async refresh(id, other) {
      this.formData = id ? await this.$api.app.getRule(id) : this.reset(other);
    },
    async show(id, other = {}) {
      this.id = id;
      await this.refresh(id, other);
      this.isShow = true;
    },

    // 事件
    onHide() {
      this.isShow = false;
    },
    onSubmit() {
      this.$refs.form.validate(async (isValidate) => {
        if (!isValidate) return;
        let popMessage = false;
        if (this.formData.id) {
          popMessage = await this.$api.app.checkRuleType(this.formData.id, this.formData.ruleTypeId);
          if (popMessage) {
            this.$confirm('将同步更新检查项、检查内容的规范类型，点击确定继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'info'
            }).then(async () => {
              await this.$api.app.editRule(this.formData);
              this.$emit("success");
              this.onHide();
            });
          }
        }

        if (!popMessage) {
          await this.$api.app.editRule(this.formData);
          this.$emit("success");
          this.onHide();
        }
      });
    },

    // 事件
    //apimark//
  },
  mounted() { },
  components: {},
};
</script>

<style lang="scss">
.brand_info {
  .el-form {
    width: 600px;
    padding-top: 40px;
  }
}
</style>
