<template>
  <div class="common-rule">
    <div class="mb-4 tab-btns">
      <el-button
        v-for="item in menus"
        :key="item.id"
        size="medium"
        :type="item.id == curMenu.id ? 'primary' : 'default'"
        @click="selectMenu(item)"
        >{{ item.name }}</el-button
      >
    </div>
    <component
      v-if="checkPrivilege('button', 'add')"
      ref="RuleDetail"
      :is="curMenu.component"
    ></component>
  </div>
</template>

<script>
import RuleExam from "../components/RuleExam";
import RulePackage from "../components/RulePackage";
import RuleSign from "../components/RuleSign";

export default {
  name: "common-rule",
  components: {
    RuleExam,
    RulePackage,
    RuleSign,
  },
  data() {
    return {
      menus: [
        { id: "1", name: "考务规则配置", component: "rule-exam" },
        { id: "2", name: "卷袋贴字段配置", component: "rule-package" },
        { id: "3", name: "签到表字段配置", component: "rule-sign" },
      ],
      curMenu: {},
    };
  },
  created() {
    this.curMenu = this.menus[0];
  },
  methods: {
    selectMenu(item) {
      if (
        this.curMenu.id === "1" &&
        item.id !== "1" &&
        !this.$refs.RuleDetail.checkRuleExist()
      ) {
        this.$message.error("请先保存考务规则配置！");
        return;
      }
      this.curMenu = item;
    },
  },
};
</script>
