<template>
  <div
    class="navLeft"
    :style="{
      width: packup ? '100px' : '208px',
      'min-height': screenHeight - 80 + 'px',
    }"
  >
    <div style="display: flex; justify-content: flex-end">
      <img
        class="packup"
        src="../assets/images/navleft/packup.png"
        @click="packUp"
        :style="{ 'margin-right': packup ? '36px' : '14px' }"
      />
    </div>
    <div
      style="width: 100%; margin-top: 26px"
      :style="{ display: packup ? 'none' : 'block' }"
    >
      <a-menu
        id="dddddd"
        :open-keys="openKeys"
        :selectedKeys="selectedKeys"
        style="width: 208px"
        mode="inline"
        @openChange="onOpenChange"
        @select="selectItem"
      >
        <a-sub-menu key="sub10" @titleClick="titleClick">
          <template #icon>
            <div class="imgBox">
              <img
                style="width: 22px; height: 22px"
                src="../assets/images/navleft/review.png"
              />
            </div>
          </template>
          <template #title>审核管理</template>
          <a-menu-item key="sub10-1">
            <span
              :class="{
                circleActive: selectedKeys[0] === 'sub10-1' ? true : false,
                circle: selectedKeys[0] === 'sub10-1' ? false : true,
              }"
            ></span>
            <router-link to="/coursereviewedn">待审核课程</router-link>
          </a-menu-item>
          <a-menu-item key="sub10-2">
            <span
              :class="{
                circleActive: selectedKeys[0] === 'sub10-2' ? true : false,
                circle: selectedKeys[0] === 'sub10-2' ? false : true,
              }"
            ></span>
            <router-link to="/coursereviewed">已审核课程</router-link>
          </a-menu-item>
          <a-menu-item key="sub10-3">
            <span
              :class="{
                circleActive: selectedKeys[0] === 'sub10-3' ? true : false,
                circle: selectedKeys[0] === 'sub10-3' ? false : true,
              }"
            ></span>
            <router-link to="/projectreviewedn">待审核项目</router-link>
          </a-menu-item>
          <a-menu-item key="sub10-4">
            <span
              :class="{
                circleActive: selectedKeys[0] === 'sub10-4' ? true : false,
                circle: selectedKeys[0] === 'sub10-4' ? false : true,
              }"
            ></span>
            <router-link to="/projectreviewed">已审核项目</router-link>
          </a-menu-item>
        </a-sub-menu>

        <a-menu-item key="sub1" @titleClick="titleClick">
          <div class="imgBox">
            <img
              style="width: 20px; height: 18px"
              src="../assets/images/navleft/studyPath.png"
            />
          </div>
          <router-link to="/learningpath">学习路径图</router-link>
        </a-menu-item>

        <a-sub-menu key="sub2" @titleClick="titleClick">
          <template #icon>
            <div class="imgBox">
              <img
                style="width: 15px; height: 15px"
                src="../assets/images/navleft/project.png"
              />
            </div>
          </template>
          <template #title>项目中心</template>
          <a-menu-item key="sub2-1">
            <span
              :class="{
                circleActive: selectedKeys[0] === 'sub2-1' ? true : false,
                circle: selectedKeys[0] === 'sub2-1' ? false : true,
              }"
            ></span>
            <router-link to="/projectmanage">项目</router-link>
          </a-menu-item>
          <a-menu-item key="sub2-2">
            <span
              :class="{
                circleActive: selectedKeys[0] === 'sub2-2' ? true : false,
                circle: selectedKeys[0] === 'sub2-2' ? false : true,
              }"
            ></span>
            <router-link to="/templatelibrary">模板库</router-link>
          </a-menu-item>
        </a-sub-menu>

        <a-sub-menu key="sub3">
          <template #icon>
            <div class="imgBox">
              <img
                style="width: 18px; height: 15px"
                src="../assets/images/navleft/course.png"
              />
            </div>
          </template>
          <template #title>课程库</template>
          <a-menu-item key="sub3-1">
            <span
              :class="{
                circleActive: selectedKeys[0] === 'sub3-1' ? true : false,
                circle: selectedKeys[0] === 'sub3-1' ? false : true,
              }"
            ></span>
            <router-link to="/coursewaremanage">面授管理</router-link>
          </a-menu-item>
          <a-menu-item key="sub3-2">
            <span
              :class="{
                circleActive: selectedKeys[0] === 'sub3-2' ? true : false,
                circle: selectedKeys[0] === 'sub3-2' ? false : true,
              }"
            ></span>
            <router-link to="/onlinemanage">在线管理</router-link>
          </a-menu-item>
          <a-menu-item key="sub3-3">
            <span
              :class="{
                circleActive: selectedKeys[0] === 'sub3-3' ? true : false,
                circle: selectedKeys[0] === 'sub3-3' ? false : true,
              }"
            ></span>
            <router-link to="/coursemanage">课件管理</router-link>
          </a-menu-item>
        </a-sub-menu>
        <!-- 2022-12-10注释 后面放开 -->
        <!-- <a-menu-item key="sub4" @titleClick="titleClick">
          <div class="imgBox">
            <img
              style="width: 19px; height: 19px"
              src="../assets/images/navleft/exam.png"
            />
          </div>
          <span>考试中心</span>
        </a-menu-item> -->
        <a-menu-item key="sub5" @titleClick="titleClick">
          <div class="imgBox">
            <img
              style="width: 16px; height: 16px"
              src="../assets/images/navleft/survey.png"
            />
          </div>
          <router-link to="/researchmanage">评估管理</router-link>
        </a-menu-item>
        <!-- 2022-12-10注释 后面放开 -->
        <!-- <a-menu-item key="sub6" @titleClick="titleClick">
          <div class="imgBox">
            <img
              style="width: 17px; height: 15px"
              src="../assets/images/navleft/report.png"
            />
          </div>
          <span>报表中心</span>
        </a-menu-item> -->
        <!-- 2022-12-10注释 后面放开 -->
        <!-- <a-menu-item key="sub7" @titleClick="titleClick">
          <div class="imgBox">
            <img
              style="width: 17px; height: 18px"
              src="../assets/images/navleft/teacher.png"
            />
          </div>
          <span>教师管理</span>
        </a-menu-item> -->
        <!-- 2022-12-10注释 后面放开 -->
        <!-- <a-menu-item key="sub8" @titleClick="titleClick">
          <div class="imgBox">
            <img
              style="width: 20px; height: 20px"
              src="../assets/images/navleft/certificate.png"
            />
          </div>
          <span>证书中心</span>
        </a-menu-item> -->
        <!-- <a-menu-item key="sub9" @titleClick="titleClick">
          <div class="imgBox">
            <img
              style="width: 19px; height: 18px"
              src="../assets/images/navleft/system.png"
            />
          </div>
          <span>系统管理</span> -->
        <!-- <router-link to="/systemmanage">系统管理</router-link> -->
        <!-- </a-menu-item> -->

        <a-sub-menu key="sub11" @titleClick="titleClick">
          <template #icon>
            <div class="imgBox">
              <img
                style="width: 16px; height: 16px"
                src="../assets/images/navleft/test.png"
              />
            </div>
          </template>
          <template #title>考试</template>
          <a-menu-item key="sub11-1">
            <span
              :class="{
                circleActive: selectedKeys[0] === 'sub11-1' ? true : false,
                circle: selectedKeys[0] === 'sub11-1' ? false : true,
              }"
            ></span>
            <router-link to="/questionmanage">试题管理</router-link>
          </a-menu-item>
          <a-menu-item key="sub11-2">
            <span
              :class="{
                circleActive: selectedKeys[0] === 'sub11-2' ? true : false,
                circle: selectedKeys[0] === 'sub11-2' ? false : true,
              }"
            ></span>
            <router-link to="/papermanage">试卷管理</router-link>
          </a-menu-item>
          <a-menu-item key="sub11-3">
            <span
              :class="{
                circleActive: selectedKeys[0] === 'sub11-3' ? true : false,
                circle: selectedKeys[0] === 'sub11-3' ? false : true,
              }"
            ></span>
            <router-link to="/examinationcenter">考试管理</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item key="sub12" @titleClick="titleClick">
          <div class="imgBox">
            <img
              style="width: 20px; height: 20px"
              src="../assets/images/navleft/case.png"
            />
          </div>
          <router-link to="/casemanage">案例管理</router-link>
        </a-menu-item>
        <a-menu-item key="sub13" @titleClick="titleClick">
          <div class="imgBox">
            <img
              style="width: 20px; height: 20px"
              src="../assets/images/navleft/article.png"
            />
          </div>
          <router-link to="/articlemanage">文章管理</router-link>
        </a-menu-item>
        <a-menu-item key="sub14" @titleClick="titleClick">
          <div class="imgBox">
            <img
              style="width: 20px; height: 20px"
              src="../assets/images/navleft/qa.png"
            />
          </div>
          <router-link to="/qamanage">问答管理</router-link>
        </a-menu-item>
        <a-menu-item key="sub15" @titleClick="titleClick">
          <div class="imgBox">
            <img
              style="width: 20px; height: 20px"
              src="../assets/images/navleft/qa.png"
            />
          </div>
          <router-link to="/download">下载中心</router-link>
        </a-menu-item>
      </a-menu>
    </div>
    <div
      style="width: 100%; margin-top: 26px"
      :style="{ display: packup ? 'block' : 'none' }"
      class="packupMenu"
    >
      <a-menu
        id="dddddd"
        v-model:openKeys="openKeys2"
        v-model:selectedKeys="selectedKeys2"
        style="width: 100px"
        mode="inline"
        @click="handleClick"
      >
        <a-menu-item key="sub10" @titleClick="titleClick">
          <router-link to="/coursereviewedn">审核</router-link>
        </a-menu-item>
        <a-menu-item key="sub1" @titleClick="titleClick">
          <router-link to="/learningpath">学习</router-link>
        </a-menu-item>

        <a-menu-item key="sub2" @titleClick="titleClick">
          <router-link to="/projectmanage">项目</router-link>
        </a-menu-item>

        <a-menu-item key="sub3" @titleClick="titleClick">
          <router-link to="/coursewaremanage">课程</router-link>
        </a-menu-item>
        <!-- 2022-12-10注释 后面放开 -->
        <!-- <a-menu-item key="sub4" @titleClick="titleClick">
          <span>考试</span>
        </a-menu-item> -->

        <a-menu-item key="sub5" @titleClick="titleClick">
          <router-link to="/researchmanage">评估</router-link>
        </a-menu-item>
        <!-- 2022-12-10注释 后面放开 -->
        <!-- <a-menu-item key="sub6" @titleClick="titleClick">
          <span>报表</span>
        </a-menu-item>

        <a-menu-item key="sub7" @titleClick="titleClick">
          <span>教师</span>
        </a-menu-item>

        <a-menu-item key="sub8" @titleClick="titleClick">
          <span>证书</span>
        </a-menu-item>
        <a-menu-item key="sub9" @titleClick="titleClick">
          <span>系统</span>
        </a-menu-item> -->

        <a-menu-item key="sub11" @titleClick="titleClick">
          <router-link to="/examinationcenter">考试</router-link>
        </a-menu-item>
        <a-menu-item key="sub12" @titleClick="titleClick">
          <router-link to="/casemanage">案例</router-link>
        </a-menu-item>
        <a-menu-item key="sub13" @titleClick="titleClick">
          <router-link to="/articlemanage">文章</router-link>
        </a-menu-item>
        <a-menu-item key="sub14" @titleClick="titleClick">
          <router-link to="/qamanage">问答</router-link>
        </a-menu-item>
        <a-menu-item key="sub15" @titleClick="titleClick">
          <router-link to="/download">问答</router-link>
        </a-menu-item>
      </a-menu>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, onUnmounted, watch } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
export default {
  name: "NavLeft",
  setup() {
    const store = useStore();
    const state = reactive({
      packup: false,
      screenHeight: document.body.clientHeight, // 屏幕高度
      rootSubmenuKeys: [
        "sub1",
        "sub2",
        "sub3",
        "sub4",
        "sub5",
        "sub6",
        "sub7",
        "sub8",
        "sub9",
        "sub10",
        "sub11",
        "sub12",
        "sub13",
        "sub14",
        "sub15",
      ],
      openKeys: localStorage.getItem("openKeys")
        ? JSON.parse(localStorage.getItem("openKeys"))
        : ["sub1"], //默认打开以及打开的一级导航
      selectedKeys: localStorage.getItem("selectedKeys")
        ? JSON.parse(localStorage.getItem("selectedKeys"))
        : ["sub1"], //默认选择以及选择的二级导航
      openKeys2: localStorage.getItem("openKeys")
        ? JSON.parse(localStorage.getItem("openKeys"))
        : ["sub1"], //默认打开以及打开的一级导航
      selectedKeys2: localStorage.getItem("openKeys")
        ? JSON.parse(localStorage.getItem("openKeys"))
        : ["sub1"], //默认选择以及选择的二级导航

      keysList: [
        {
          href: "/coursereviewedn",
          openKeys: "sub10",
          selectedKeys: "sub10-1",
          pagename: "待审核课程",
        },
        {
          href: "/coursereviewed",
          openKeys: "sub10",
          selectedKeys: "sub10-2",
          pagename: "已审核课程",
        },
        {
          href: "/projectreviewedn",
          openKeys: "sub10",
          selectedKeys: "sub10-3",
          pagename: "待审核项目",
        },
        {
          href: "/projectrrviewed",
          openKeys: "sub10",
          selectedKeys: "sub10-4",
          pagename: "已审核项目",
        },
        {
          href: "/learningpath",
          openKeys: "sub1",
          selectedKeys: "sub1",
          pagename: "学习路径图",
        },
        {
          href: "/leveladd",
          openKeys: "sub1",
          selectedKeys: "sub1",
          pagename: "管理",
        },
        {
          href: "/levelcheck",
          openKeys: "sub1",
          selectedKeys: "sub1",
          pagename: "查看",
        },
        {
          href: "/leveladddetail",
          openKeys: "sub1",
          selectedKeys: "sub1",
          pagename: "关卡",
        },
        {
          href: "/projectmanage",
          openKeys: "sub2",
          selectedKeys: "sub2-1",
          pagename: "项目",
        },
        {
          href: "/projectadd",
          openKeys: "sub2",
          selectedKeys: "sub2-1",
          pagename: "创建项目",
        },
        {
          href: "/templatelibrary",
          openKeys: "sub2",
          selectedKeys: "sub2-2",
          pagename: "模板库",
        },
        {
          href: "/libraryadd",
          openKeys: "sub2",
          selectedKeys: "sub2-2",
          pagename: "查看",
        },
        {
          href: "/coursewaremanage",
          openKeys: "sub3",
          selectedKeys: "sub3-1",
          pagename: "面授管理",
        },
        {
          href: "/onlinemanage",
          openKeys: "sub3",
          selectedKeys: "sub3-2",
          pagename: "在线管理",
        },
        {
          href: "/coursemanage",
          openKeys: "sub3",
          selectedKeys: "sub3-3",
          pagename: "课件管理",
        },
        {
          href: "/certificatecenter",
          openKeys: "sub8",
          selectedKeys: "sub8",
          pagename: "证书中心",
        },

        {
          href: "/systemmanage",
          openKeys: "sub9",
          selectedKeys: "sub9",
          pagename: "系统管理",
        },
        {
          href: "/researchmanage",
          openKeys: "sub5",
          selectedKeys: "sub5",
          pagename: "评估管理",
        },

        {
          href: "/questionmanage",
          openKeys: "sub11",
          selectedKeys: "sub11-1",
          pagename: "试题管理",
        },
        {
          href: "/papermanage",
          openKeys: "sub11",
          selectedKeys: "sub11-2",
          pagename: "试卷管理",
        },
        {
          href: "/examinationcenter",
          openKeys: "sub11",
          selectedKeys: "sub11-3",
          pagename: "考试管理",
        },
        {
          href: "/casemanage",
          openKeys: "sub12",
          selectedKeys: "sub12",
          pagename: "案例管理",
        },
        {
          href: "/articlemanage",
          openKeys: "sub13",
          selectedKeys: "sub13",
          pagename: "文章管理",
        },
        {
          href: "/qamanage",
          openKeys: "sub14",
          selectedKeys: "sub14",
          pagename: "问答管理",
        },
        {
          href: "/download",
          openKeys: "sub15",
          selectedKeys: "sub15",
          pagename: "下载中心",
        },
      ],
    });

    // console.log(state.openKeys, state.selectedKeys);

    const onOpenChange = (openKeys) => {
      const latestOpenKey = openKeys.find(
        (key) => state.openKeys.indexOf(key) === -1
      );
      if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        state.openKeys = openKeys;
      } else {
        state.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    };
    const selectItem = (e) => {
      // console.log("onSelect", e, );
      let arr = state.keysList;
      arr.map((value) => {
        if (e.key === value.selectedKeys) {
          localStorage.setItem("openKeys", JSON.stringify([value.openKeys]));
          localStorage.setItem(
            "selectedKeys",
            JSON.stringify([value.selectedKeys])
          );
          state.openKeys = [value.openKeys];
          state.selectedKeys = [value.selectedKeys];
          state.openKeys2 = [value.openKeys];
          state.selectedKeys2 = [value.openKeys];
        }
      });
    };

    const route = useRoute();
    watch(
      () => route.fullPath,
      (n) => {
        console.log("监听路由", n, store.state.openpages, state.keysList);
        // console.log("new:" + n.toLowerCase() + ",old:" + o);
        let arr = state.keysList;
        arr.map((value) => {
          if (n.toLowerCase() === value.href) {
            localStorage.setItem("openKeys", JSON.stringify([value.openKeys]));
            localStorage.setItem(
              "selectedKeys",
              JSON.stringify([value.selectedKeys])
            );
            state.openKeys = [value.openKeys];
            state.selectedKeys = [value.selectedKeys];
            state.openKeys2 = [value.openKeys];
            state.selectedKeys2 = [value.openKeys];
          }
        });
        let openpages = store.state.openpages;
        if (openpages.length === 0) {
          let pagename = state.keysList.filter((a) => {
            return a.href === n.toLowerCase();
          });
          if (pagename && pagename.length !== 0) {
            let obj = {
              pagename: pagename[0].pagename,
              href: n.toLowerCase(),
              active: true,
            };
            openpages.push(obj);
          }
        } else {
          for (let i = 0; i < openpages.length; i++) {
            openpages[i].active = false;
          }
          for (let i = 0; i < openpages.length; i++) {
            openpages[i].active = false;
            if (n.toLowerCase() === openpages[i].href) {
              console.log("已存在", openpages[i]);
              openpages[i].active = true;
              break;
            } else {
              if (i === openpages.length - 1) {
                let pagename = state.keysList.filter((a) => {
                  return a.href === n.toLowerCase();
                });
                if (pagename && pagename.length !== 0) {
                  let obj = {
                    pagename: pagename[0].pagename,
                    href: n.toLowerCase(),
                    active: true,
                  };
                  openpages.push(obj);
                }
              }
            }
          }
        }

        localStorage.setItem("openpages", JSON.stringify(openpages));
        store.commit("chengeOpenpages", openpages);

        // store.getters.chengeOpenpages(openpages)
      }
    );
    const packUp = () => {
      state.packup = !state.packup;
    };
    const getClientHeight = () => {
      state.screenHeight = document.body.clientHeight;
    };

    onMounted(() => {
      // console.log("11111", 1);
      window.addEventListener("resize", getClientHeight, false);
      // judgeUrl();
    });
    onUnmounted(() => {
      window.removeEventListener("resize", getClientHeight, false);
    });
    return {
      ...toRefs(state),
      onOpenChange,
      selectItem,
      packUp,
    };
  },
};
</script>
<style lang="scss">
.navLeft {
  width: 208px;
  min-height: 100%;
  background: linear-gradient(0deg, #a9e9f7 0%, #388be1 73%);
  box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
  // margin-top: -50px;
  flex-shrink: 0;
  .packup {
    width: 19px;
    height: 15px;
    margin-top: 23px;
    margin-right: 14px;
    cursor: pointer;
  }

  //修改导航栏背景颜色
  .ant-menu {
    background-color: rgba(56, 139, 225, 0);
    border: none;
    box-shadow: none;
  }
  //图标和字放在一行
  .ant-menu-title-content {
    display: flex;
    align-items: center;
  }
  .packupMenu .ant-menu-title-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  //修改导航文字颜色
  .ant-menu-title-content {
    padding: 0px !important;
    // padding-left: 27px !important;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    line-height: 36px;
    border-right: 3px solid rgba(255, 255, 255, 0);
    margin-left: 0 !important;
  }
  .ant-menu-item a,
  .ant-menu-item a:hover {
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    line-height: 36px;
  }
  //修改二级导航背景色
  .ant-menu-sub.ant-menu-inline {
    background-color: rgba(56, 139, 225, 0);
    border: none;
    box-shadow: none;
  }

  //修改左侧padding
  .ant-menu-item,
  .ant-menu-submenu-title {
    padding-left: 27px !important;
    height: 49px !important;
    line-height: 49px !important;
    margin: 0px !important;
  }

  //左侧图标
  .imgBox {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
  }
  .ant-menu-submenu-arrow {
    color: rgba(255, 255, 255, 1) !important;
    right: 14px !important;
  }
  // .ant-menu-submenu-active .ant-menu-submenu-arrow {
  //   right: 11px !important;
  // }
  //划上背景
  .ant-menu-item-active {
    background: rgba(236, 245, 255, 0.43) !important;
    border-right: 3px solid rgba(255, 255, 255, 1);
  }
  //选中背景
  .ant-menu-item-selected {
    background: rgba(236, 245, 255, 0.43) !important;
    border-right: 3px solid rgba(255, 255, 255, 1);
  }
  .ant-menu-vertical .ant-menu-item::after,
  .ant-menu-vertical-left .ant-menu-item::after,
  .ant-menu-vertical-right .ant-menu-item::after,
  .ant-menu-inline .ant-menu-item::after {
    border-right: 0px;
  }

  .circle {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, 1);
    margin-left: 24px;
    margin-right: 18px;
    display: inline-block;
  }
  .circleActive {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 1);
    margin-left: 24px;
    margin-right: 18px;
    display: inline-block;
  }
}
</style>
