<template>
  <div class="wait-task">
    <div class="mb-4 tab-btns">
      <el-button
        v-for="tab in tabs"
        :key="tab.val"
        size="medium"
        :type="curTab == tab.val ? 'primary' : 'default'"
        @click="selectMenu(tab.val)"
        >{{ tab.name }}
        <span v-if="waitTask[tab.val]">({{ waitTask[tab.val] }})</span>
      </el-button>
    </div>

    <component :is="compName"></component>
  </div>
</template>

<script>
import WaitTaskFlow from "../components/WaitTaskFlow.vue";
import WaitTaskStmms from "../components/WaitTaskStmms.vue";
import WaitTaskAnalysis from "../components/WaitTaskAnalysis.vue";
import WaitTaskMark from "../components/WaitTaskMark.vue";
import { mapState } from "vuex";

const tabs = [
  {
    name: "电子交卷待办",
    val: "flow",
  },
  {
    name: "评卷任务设置待办",
    val: "stmms",
  },
  {
    name: "评卷待办",
    val: "mark",
  },
  {
    name: "教研待办",
    val: "analysis",
  },
];

export default {
  name: "wait-task",
  components: { WaitTaskFlow, WaitTaskStmms, WaitTaskAnalysis, WaitTaskMark },
  data() {
    return {
      curTab: "",
      tabs: [],
    };
  },
  computed: {
    ...mapState("exam", ["waitTask", "waitTypes"]),
    compName() {
      return `wait-task-${this.curTab}`;
    },
  },
  watch: {
    waitTypes: {
      immediate: true,
      handler(val) {
        if (!val) return;

        this.initTabs();
        this.curTab = this.tabs[0]?.val || "";
      },
    },
  },
  methods: {
    initTabs() {
      this.tabs = tabs.filter((item) => this.waitTypes.includes(item.val));
    },
    selectMenu(tab) {
      this.curTab = tab;
    },
  },
};
</script>
