<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";
import WaitTaskStmms from "../components/WaitTaskStmms";
import WaitTaskAnalysis from "../components/WaitTaskAnalysis";
import { mapState } from "vuex";

export default {
  name: "wait-task",
  components: { WaitTaskFlow, WaitTaskStmms, WaitTaskAnalysis },
  data() {
    return {
      curTab: "flow",
      tabs: [
        {
          name: "流程待办",
          val: "flow"
        },
        {
          name: "阅卷待办",
          val: "stmms"
        },
        {
          name: "教研待办",
          val: "analysis"
        }
      ]
    };
  },
  computed: {
    ...mapState("exam", ["waitTask"]),
    compName() {
      return `wait-task-${this.curTab}`;
    }
  },
  created() {
    if (this.$route.query.type) {
      this.curTab = this.$route.query.type;
    }
  },
  methods: {
    selectMenu(tab) {
      this.curTab = tab;
    }
  }
};
</script>
