<template>
  <div class="home-page">
    <div v-if="hasWaitTaskPrivilege" class="tab-summary">
      <div class="tab-summary-item">
        <i v-if="summary.waitTaskCount" class="tab-summary-rp"></i>
        <i class="tab-summary-icon icon icon-wait"></i>
        <h4 class="tab-summary-title">代办任务</h4>
        <p class="tab-summary-cont">{{ summary.waitTaskCount }}</p>
      </div>
      <div class="tab-summary-item">
        <i class="tab-summary-icon icon icon-done"></i>
        <h4 class="tab-summary-title">已办任务</h4>
        <p class="tab-summary-cont">{{ summary.doneTaskCount }}</p>
      </div>
    </div>
    <div class="tab-box tab-shortcut">
      <h2 class="tab-box-title">快捷入口</h2>
      <div class="tab-box-body shortcut-list">
        <div
          v-for="(item, ind) in shortcutList"
          :key="ind"
          class="shortcut-item"
        >
          <div class="shortcut-icon"><i :class="['icon', item.icon]"></i></div>
          <div class="shortcut-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div v-if="hasWaitTaskPrivilege" class="tab-box tab-task">
      <h2 class="tab-box-title">代办任务</h2>
      <div class="tab-box-body task-list">
        <div v-for="item in waitTaskList" :key="item.id" class="task-item">
          <div class="task-item-type"></div>
          <div class="task-item-cont"></div>
          <div class="task-item-action action-column">
            <el-button class="btn-primary" type="text" @click="toDo(item)"
              >立即处理</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <div class="tab-box tab-guide">
      <h2 class="tab-box-title">业务引导图</h2>
      <div class="tab-box-body"></div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import shortcutData from "../constants/shortcutData";
import {
  auditedTaskCount,
  waitExamTaskListPage,
  stmmsTaskListPage,
  analysisTaskListPage
} from "../modules/exam/api";
import { userSysRoles } from "../modules/stmms/api";

export default {
  name: "home-page",
  data() {
    return {
      hasWaitTaskPrivilege: false,
      summary: {
        waitTaskCount: 0,
        doneTaskCount: 0
      },
      shortcutList: [],
      waitTaskList: [],
      waitTaskFilter: {
        pageNumber: 1,
        pageSize: 2
      }
    };
  },
  computed: {
    ...mapState(["privilegeMap"]),
    ...mapState("exam", ["waitTaskCount"])
  },
  created() {
    this.initShortcutList();
  },
  methods: {
    ...mapActions("exam", ["updateWaitTaskCount"]),
    async initShortcutList() {
      const validRouters = Object.keys(this.privilegeMap);
      let validShortcutData = shortcutData
        .filter(item => validRouters.includes(item.router))
        .map(item => {
          return {
            ...item
          };
        });

      const roleSource = this.$ls.get("user", {
        roleSource: []
      });

      // 阅卷角色查询
      if (validRouters.includes("MarkerLogin")) {
        const markerRoles = await userSysRoles();
        validShortcutData = validShortcutData.filter(
          item =>
            item.url === "MarkerLogin" &&
            markerRoles.includes(item.params.trigger)
        );
      }

      // 报告角色查询
      if (validRouters.includes("AnalysisReportView")) {
        const analysisRoles = roleSource.filter(
          item => item.roleSource === "ANALYSIS"
        );
        validShortcutData = validShortcutData.filter(
          item =>
            item.url === "AnalysisReportView" &&
            analysisRoles.includes(item.params.trigger)
        );
      }

      this.shortcutList = validShortcutData;

      // 代办任务判断
      if (this.privilegeMap["WaitTask"]) {
        this.getWaitTaskData();
      }
    },
    async getWaitTaskData() {
      const doneTaskCount = await auditedTaskCount();
      this.summary.doneTaskCount = doneTaskCount || 0;
      await this.updateWaitTaskCount();
      this.summary.waitTaskCount = this.waitTaskCount;

      this.waitTaskList = [];
      this.getFlowWaitTaskList();
      this.getStmmsWaitTaskList();
      this.getAnalysisWaitTaskList();
    },
    async getFlowWaitTaskList() {
      const data = await waitExamTaskListPage(this.waitTaskFilter);
      const dataList = data.records;
      this.waitTaskList.push(...dataList);
    },
    async getStmmsWaitTaskList() {
      const data = await stmmsTaskListPage(this.waitTaskFilter);
      const dataList = data.records;
      this.waitTaskList.push(...dataList);
    },
    async getAnalysisWaitTaskList() {
      const data = await analysisTaskListPage(this.waitTaskFilter);
      const dataList = data.records;
      this.waitTaskList.push(...dataList);
    },
    toMenu(item) {
      this.$router.push({
        name: item.router,
        params: item.params
      });
    },
    toDo(item) {
      console.log(item);
    }
  }
};
</script>
