<template>
  <div class="home-side">
    <div class="home-logo">
      <router-link to="/questions/tips">
        <img src="@/assets/images/system-icon.png" />
      </router-link>
    </div>
    <el-menu
      v-if="menuList.length > 0"
      class="el-menu-vertical-demo"
      active-text-color="#705eff"
      text-color="#383b4a"
      router
      :default-active="curRoutePath"
    >
      <el-submenu
        v-for="menu1 in menuList1"
        :key="menu1.id"
        :index="menu1.nodeCode"
      >
        <template slot="title">
          <!-- <i class="el-icon-menu"></i> <span>{{ menu1.name }}</span> -->
          <i :class="menu1.icon"></i> <span>{{ menu1.name }}</span>
        </template>

        <el-menu-item
          v-for="menu2 in menuList2(menu1)"
          :key="menu2.id"
          :index="menu2.ext5"
          :route="{ path: menu2.ext5 }"
        >
          <span style="margin-left: 9px">{{ menu2.name }}</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { QUESTION_API } from "@/constants/constants";

const routesToMenu = [
  {
    path: "/basic",
    name: "基础信息",
    groupCode: "BASIC_MENUS",
  },
  {
    path: "/examwork",
    name: "考务管理",
    groupCode: "EXAM_WORK_MENUS",
  },
  {
    path: "/questions",
    name: "题库",
    groupCode: "QUESTIONS_WORK_MENUS",
  },
  {
    path: "/oe",
    name: "网考",
    groupCode: "NETEXAM_WORK_MENUS",
  },
  {
    path: "/marking",
    name: "阅卷",
    groupCode: "MARK_WORK_MENUS",
  },
  {
    path: "/portal",
    groupCode: "PORTAL_MENUS",
  },
  {
    path: "/print",
    name: "印刷管理",
    groupCode: "PRINT_MENUS",
  },
  {
    path: "/reports",
    name: "报表",
    groupCode: "REPORTS_MENUS",
  },
];
const MENU_ICONS = {
  base_info: "base",
  course_manage: "course",
  structure_manage: "create-paper",
  question_bank: "question-book",
  paper_manage: "paper-book",
  ques_manage: "question",
};

import { mapMutations } from "vuex";
import { UPDATE_CURRENT_PATHS } from "../../store/currentPaths";
import { UPDATE_MENU_LIST } from "../../store/menuList";

export default {
  name: "HomeSide",
  data() {
    return {
      group: null,
      menuList: [],
      curRoutePath: "",
      isCollapse: false,
    };
  },
  computed: {
    ...mapState({ user: (state) => state.user }),
    menuList1() {
      return this.menuList
        .filter((m) => m.parentId === null && m.ext1 === "menu")
        .map((m) => {
          m.icon = `icon icon-${MENU_ICONS[m.code]}`;
          return m;
        });
    },
  },
  watch: {
    $route() {
      this.updatePath();
    },
  },
  async created() {
    this.group = routesToMenu.find((v) => this.$route.path.startsWith(v.path));
    this.menuList = await this.getUserPrivileges();
    this.UPDATE_MENU_LIST(this.menuList);
    this.updatePath();
  },
  methods: {
    ...mapMutations([UPDATE_CURRENT_PATHS, UPDATE_MENU_LIST]),
    toggoleSidebar() {
      this.isCollapse = !this.isCollapse;
    },
    async getUserPrivileges() {
      var url = QUESTION_API + "/rolePrivilege/getUserPrivileges";
      const params = new URLSearchParams();
      params.append("full", false);
      const res = await this.$httpWithMsg.post(url, params, {
        headers: { "content-type": "application/x-www-form-urlencoded" },
      });

      return res.data;
    },
    menuList2(menu1) {
      return this.menuList.filter(
        (m) => m.parentId === menu1.id && m.ext1 === "menu"
      );
    },
    updatePath() {
      // console.log("home update");
      let curRoutePath = this.$route.path;
      if (curRoutePath.endsWith("/1")) {
        curRoutePath = curRoutePath.slice(0, -2) + "/0";
      }
      this.curRoutePath = curRoutePath;
      let currentPaths = [];
      let part = this.menuList.find((v) => v.ext5 === curRoutePath);
      if (!part) {
        this.UPDATE_CURRENT_PATHS([]);
        return;
      }
      currentPaths.unshift(part.name);
      while (this.menuList.find((v) => v.id === part.parentId)) {
        part = this.menuList.find((v) => v.id === part.parentId);
        currentPaths.unshift(part.name);
      }
      // console.log(currentPaths);
      this.UPDATE_CURRENT_PATHS(currentPaths);
    },
  },
};
</script>
