<template>
  <div
      class="navLeft"
      :style="{
      width: packup ? '100px' : '208px',
      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 v-if="checkMenu('coursereviewedn,coursereviewed,projectreviewedn,projectreviewed')" 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" v-if="checkMenu('coursereviewedn')">
            <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" v-if="checkMenu('coursereviewed')">
            <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" v-if="checkMenu('projectreviewedn')">
            <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" v-if="checkMenu('projectreviewed')">
            <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" v-if="checkMenu('learningpath')">
          <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" v-if="checkMenu('projectmanage,templatelibrary')">
          <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" v-if="checkMenu('projectmanage')">
            <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" v-if="checkMenu('templatelibrary')">
            <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" v-if="checkMenu('coursewaremanage,onlinemanage,coursemanage,courserecommended')">
          <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" v-if="checkMenu('coursewaremanage')">
            <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" v-if="checkMenu('onlinemanage')">
            <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" v-if="checkMenu('coursemanage')">
            <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-menu-item key="sub3-4">
            <span
                :class="{
                circleActive: selectedKeys[0] === 'sub3-4' ? true : false,
                circle: selectedKeys[0] === 'sub3-4' ? false : true,
              }"
            ></span>
            <router-link to="/courserecommended">课程推荐</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" v-if="checkMenu('researchmanage')">
          <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>

        <!-- <a-sub-menu key="sub6">
          <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="sub6-1">
            <span
                :class="{
                circleActive: selectedKeys[0] === 'sub6-1',
                circle: selectedKeys[0]!=='sub6-1',
              }"
            ></span>
            <router-link to="/dictmanage">字典管理</router-link>
          </a-menu-item>
        </a-sub-menu> -->
        <a-menu-item key="sub21" @titleClick="titleClick" v-if="checkMenu('audiencemanage')">
          <div class="imgBox">
            <img
                style="width: 16px; height: 16px"
                src="../assets/images/navleft/review.png"
            />
          </div>
          <router-link to="/audiencemanage">受众管理</router-link>
        </a-menu-item>
        <a-menu-item key="sub5" v-if="checkMenu('systemManage')">
          <div class="imgBox">
            <img style="width: 16px; height: 16px" src="../assets/images/navleft/system.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"
                    v-if="checkMenu('questionmanage,papermanage,examinationcenter')">
          <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" v-if="checkMenu('questionmanage')">
            <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" v-if="checkMenu('papermanage')">
            <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" v-if="checkMenu('examinationcenter')">
            <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" v-if="checkMenu('casemanage')">
          <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-sub-menu key="sub12" @titleClick="titleClick" v-if="checkMenu('casemanage')"> -->
        <a-sub-menu key="sub12" @titleClick="titleClick" v-if="checkMenu('casemanage,caserecommended')">
          <template #icon>
            <div class="imgBox">
              <img
                  style="width: 16px; height: 16px"
                  src="../assets/images/navleft/case.png"
              />
            </div>
          </template>
          <template #title>案例</template>
          <a-menu-item key="sub12-1" v-if="checkMenu('casemanage')">
            <span
                :class="{
                circleActive: selectedKeys[0] === 'sub12-1' ? true : false,
                circle: selectedKeys[0] === 'sub12-1' ? false : true,
              }"
            ></span>
            <router-link to="/casemanage">案例管理</router-link>
          </a-menu-item>
          <a-menu-item key="sub12-2" v-if="checkMenu('caserecommended')">
            <span
                :class="{
                circleActive: selectedKeys[0] === 'sub12-2' ? true : false,
                circle: selectedKeys[0] === 'sub12-2' ? false : true,
              }"
            ></span>
            <router-link to="/caserecommended">案例推荐</router-link>
          </a-menu-item>
        </a-sub-menu>
        <!-- 教师专区 -->
        <a-sub-menu key="sub22" @titleClick="titleClick" v-if="checkMenu('gratefulnotice,gratefulcarousel,teacherempowerment,teachertopic,tooldown,teacheropinion,instructorcertification')">
          <template #icon>
            <div class="imgBox">
              <img
                  style="width: 16px; height: 16px"
                  src="../assets/images/navleft/grateful.png"
              />
            </div>
          </template>
          <template #title>教师专区</template>
          <a-menu-item key="sub22-1" v-if="checkMenu('gratefulnotice')">
            <span
                :class="{
                circleActive: selectedKeys[0] === 'sub22-1' ? true : false,
                circle: selectedKeys[0] === 'sub22-1' ? false : true,
              }"
            ></span>
            <router-link to="/gratefulnotice">通知</router-link>
          </a-menu-item>
          <a-menu-item key="sub22-2" v-if="checkMenu('gratefulcarousel')">
            <span
                :class="{
                circleActive: selectedKeys[0] === 'sub22-2' ? true : false,
                circle: selectedKeys[0] === 'sub22-2' ? false : true,
              }"
            ></span>
            <router-link to="/gratefulcarousel">轮播图</router-link>
          </a-menu-item>
          <a-menu-item key="sub22-3"  v-if="checkMenu('teacherempowerment')">
            <span
                :class="{
                circleActive: selectedKeys[0] === 'sub22-3' ? true : false,
                circle: selectedKeys[0] === 'sub22-3' ? false : true,
              }"
            ></span>
            <router-link to="/teacherempowerment">教师赋能</router-link>
          </a-menu-item>

          <a-menu-item key="sub22-7" v-if="checkMenu('instructorcertification')">
            <span
                :class="{
                circleActive: selectedKeys[0] === 'sub22-7' ? true : false,
                circle: selectedKeys[0] === 'sub22-7' ? false : true,
              }"
            ></span>
            <router-link to="/instructorcertification">讲师认证</router-link>
          </a-menu-item>

          <a-menu-item key="sub22-4" v-if="checkMenu('teachertopic')">
            <span
                :class="{
                circleActive: selectedKeys[0] === 'sub22-4' ? true : false,
                circle: selectedKeys[0] === 'sub22-4' ? false : true,
              }"
            ></span>
            <router-link to="/teachertopic">认证讲师库</router-link>
          </a-menu-item>
          <a-menu-item key="sub22-5"  v-if="checkMenu('tooldown')">
            <span
                :class="{
                circleActive: selectedKeys[0] === 'sub22-5' ? true : false,
                circle: selectedKeys[0] === 'sub22-5' ? false : true,
              }"
            ></span>
            <router-link to="/tooldown">工具下载</router-link>
          </a-menu-item>
          <a-menu-item key="sub22-6" v-if="checkMenu('teacheropinion')">
            <span
                :class="{
                circleActive: selectedKeys[0] === 'sub22-6' ? true : false,
                circle: selectedKeys[0] === 'sub22-6' ? false : true,
              }"
            ></span>
            <router-link to="/teacheropinion">意见</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub24" @titleClick="titleClick" v-if="checkMenu('lecturer,lecturerRecords,lecturerExpense,lecturerSummary,lecturerTrainOrg,')">
          <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="sub24-1" v-if="checkMenu('lecturer')">
            <span
                :class="{
                circleActive: selectedKeys[0] === 'sub24-1' ? true : false,
                circle: selectedKeys[0] === 'sub24-1' ? false : true,
              }"
            ></span>
            <router-link to="/lecturerlist">讲师列表</router-link>
          </a-menu-item>
          <a-menu-item key="sub24-2" v-if="checkMenu('lecturerRecords')">
            <span
                :class="{
                circleActive : selectedKeys[0] === 'sub24-2' ? true : false,
                circle: selectedKeys[0] === 'sub24-2' ? false : true,
              }"
            ></span>
            <router-link to="/teachingrecord">授课记录</router-link>
          </a-menu-item>
          <a-menu-item key="sub24-3" v-if="checkMenu('lecturerExpense')">
            <span
                :class="{
                  circleActive: selectedKeys[0] === 'sub24-3' ? true : false,
                circle: selectedKeys[0] === 'sub24-3' ? false : true,
              }"
            ></span>
            <router-link to="/lecturerfeemanagement">讲师费管理</router-link>
          </a-menu-item>
          <a-menu-item key="sub24-4" v-if="checkMenu('lecturerSummary')">
            <span
                :class="{
                  circleActive: selectedKeys[0] === 'sub24-4' ? true : false,
                circle: selectedKeys[0] === 'sub24-4' ? false : true,
              }"
            ></span>
            <router-link to="/lecturerfeestatistics">讲师费统计</router-link>
          </a-menu-item>
          <a-menu-item key="sub24-5" v-if="checkMenu('lecturerTrainOrg')">
            <span
                :class="{
                  circleActive: selectedKeys[0] === 'sub24-5' ? true : false,
                circle: selectedKeys[0] === 'sub24-5' ? false : true,
              }"
            ></span>
            <router-link to="/organization">培训发生组织</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item key="sub13" @titleClick="titleClick" v-if="checkMenu('articlemanage')">
          <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" v-if="checkMenu('qamanage')">
          <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-sub-menu key="sub23" @titleClick="titleClick" v-if="checkMenu('evaluationupload')">
          <template #icon>
            <div class="imgBox">
              <img
                  style="width: 16px; height: 16px"
                  src="../assets/images/navleft/grateful.png"
              />
            </div>
          </template>
          <template #title>测评</template>
          <a-menu-item key="sub23-1" v-if="checkMenu('evaluationupload')">
            <span
                :class="{
                circleActive: selectedKeys[0] === 'sub23-1' ? true : false,
                circle: selectedKeys[0] === 'sub23-1' ? false : true,
              }"
            ></span>
            <router-link to="/evaluationupload">测评上传</router-link>
          </a-menu-item>
          <a-menu-item key="sub23-2">
            <span
                :class="{
                circleActive: selectedKeys[0] === 'sub22-2' ? true : false,
                circle: selectedKeys[0] === 'sub22-2' ? false : true,
              }"
            ></span>
            <a target="_blank" :href="evaluationManagement">测评管理</a>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item key="sub15" @titleClick="titleClick" v-if="checkMenu('download')">
          <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>
        <!-- 20230804影藏 20230815放开-->
        <a-sub-menu key="sub17" v-if="checkMenu('operational,learningpathmap,reportproject,curriculum,caseess,reportarticle,questionsandanswers,reportexamination,overvoew,employeelearning')">
          <template #icon>
            <div class="imgBox">
              <img
                style="width: 18px; height: 15px"
                src="../assets/images/navleft/report.png"
              />
            </div>
          </template>
          <template #title>报表中心</template>
          <a-menu-item key="sub17-1" v-if="checkMenu('operational')">
            <span
              :class="{
                circleActive: selectedKeys[0] === 'sub17-1' ? true : false,
                circle: selectedKeys[0] === 'sub17-1' ? false : true,
              }"
            ></span>
            <router-link to="/operational">运营数据概览</router-link>
          </a-menu-item>
          <a-sub-menu key="sub17-2" class="treeMenu" v-if="checkMenu('learningpathmap,reportproject,curriculum,caseess,reportarticle,questionsandanswers,reportexamination')">
            <template #icon>
              <div class="img"></div>
            </template>
            <template #title>版块详细数据</template>
            <a-menu-item key="sub17-2-1" v-if="checkMenu('learningpathmap')">
              <span
                :class="{
                  circleActive: selectedKeys[0] === 'sub17-2-1' ? true : false,
                  circle: selectedKeys[0] === 'sub17-2-1' ? false : true,
                }"
              ></span>
              <router-link to="/learningpathmap">学习路径图</router-link>
            </a-menu-item>
            <a-menu-item key="sub17-2-2" v-if="checkMenu('reportproject')">
              <span
                :class="{
                  circleActive: selectedKeys[0] === 'sub17-2-2' ? true : false,
                  circle: selectedKeys[0] === 'sub17-2-2' ? false : true,
                }"
              ></span>
              <router-link to="/reportproject">项目</router-link>
            </a-menu-item>
            <a-menu-item key="sub17-2-3" v-if="checkMenu('curriculum')">
              <span
                :class="{
                  circleActive: selectedKeys[0] === 'sub17-2-3' ? true : false,
                  circle: selectedKeys[0] === 'sub17-2-3' ? false : true,
                }"
              ></span>
              <router-link to="/curriculum">课程</router-link>
            </a-menu-item>
            <a-menu-item key="sub17-2-4" v-if="checkMenu('caseess')">
              <span
                :class="{
                  circleActive: selectedKeys[0] === 'sub17-2-4' ? true : false,
                  circle: selectedKeys[0] === 'sub17-2-4' ? false : true,
                }"
              ></span>
              <router-link to="/caseess">案例</router-link>
            </a-menu-item>
            <a-menu-item key="sub17-2-5" v-if="checkMenu('reportarticle')">
              <span
                :class="{
                  circleActive: selectedKeys[0] === 'sub17-2-5' ? true : false,
                  circle: selectedKeys[0] === 'sub17-2-5' ? false : true,
                }"
              ></span>
              <router-link to="/reportarticle">文章</router-link>
            </a-menu-item>
            <a-menu-item key="sub17-2-6" v-if="checkMenu('questionsandanswers')">
              <span
                :class="{
                  circleActive: selectedKeys[0] === 'sub17-2-6' ? true : false,
                  circle: selectedKeys[0] === 'sub17-2-6' ? false : true,
                }"
              ></span>
              <router-link to="/questionsandanswers">问答</router-link>
            </a-menu-item>
            <a-menu-item key="sub17-2-7" v-if="checkMenu('reportexamination')">
              <span
                :class="{
                  circleActive: selectedKeys[0] === 'sub17-2-7' ? true : false,
                  circle: selectedKeys[0] === 'sub17-2-7' ? false : true,
                }"
              ></span>
              <router-link to="/reportexamination">考试</router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub17-3" class="treeMenu" v-if="checkMenu('overvoew,employeelearning')">
            <template #icon>
              <div class="img"></div>
            </template>
            <template #title>组织学习数据</template>
            <a-menu-item key="sub17-3-1" v-if="checkMenu('overvoew')">
              <span
                :class="{
                  circleActive: selectedKeys[0] === 'sub17-3-1' ? true : false,
                  circle: selectedKeys[0] === 'sub17-3-1' ? false : true,
                }"
              ></span>
              <router-link to="/overvoew">概览</router-link>
            </a-menu-item>
            <a-menu-item key="sub17-3-2" v-if="checkMenu('employeelearning')">
              <span
                :class="{
                  circleActive: selectedKeys[0] === 'sub17-3-2' ? true : false,
                  circle: selectedKeys[0] === 'sub17-3-2' ? false : true,
                }"
              ></span>
              <router-link to="/employeelearning">员工学习数据</router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-menu-item key="sub17-4" v-if="checkMenu('trainingnewmanager')||checkOrgs()">
            <span
              :class="{
                circleActive: selectedKeys[0] === 'sub17-4' ? true : false,
                circle: selectedKeys[0] === 'sub17-4' ? false : true,
              }"
            ></span>
            <router-link to="/trainingnewmanager">新任管理者培训数据</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item key="sub16" v-if="checkMenu('OldSystemManage')">
          <div class="imgBox">
            <img
                style="width: 22px; height: 22px"
                src="../assets/images/navleft/review.png"
            />
          </div>
          <a target="_blank" :href="oldManage">旧版管理员界面</a>
        </a-menu-item>

          <!-- <router-link target="_blank" to="/oldsystemmanage">旧版管理员界面</router-link> -->
        <a-menu-item key="sub17" v-if="checkMenu('ReadingClubManage')">
          <div class="imgBox">
            <img
              style="width: 22px; height: 22px"
              src="../assets/images/navleft/review.png"
            />
          </div>
          <router-link to="/readingclubmanage">业务支援读书会管理</router-link>
        </a-menu-item>
        <a-menu-item key="sub18" v-if="checkMenu('dictmanage')">
          <div class="imgBox">
            <img
              style="width: 22px; height: 22px"
              src="../assets/images/navleft/review.png"
            />
          </div>
          <router-link to="/dictmanage">字典管理</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="sub22" @titleClick="titleClick">
          <router-link to="/tooldown">教师专区</router-link>
        </a-menu-item>
        <a-menu-item key="sub24" v-if="lecturerPath()" @titleClick="titleClick">
          <router-link :to="'/'+lecturerPath()">讲师管理</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-item key="sub23" @titleClick="titleClick">
          <router-link to="/evaluationupload">测评</router-link>
        </a-menu-item>
        <a-menu-item key="sub18" v-if="checkMenu('OldSystemManage')">

        <router-link target="_blank" to="/oldsystemmanage">旧版</router-link>

        </a-menu-item>
        <a-menu-item key="sub19" v-if="checkMenu('ReadingClubManage')">
          <router-link to="/readingclubmanage">业务</router-link>
        </a-menu-item>
        <a-menu-item key="sub20" v-if="checkMenu('dictmanage')">
          <router-link to="/dictmanage">字典</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";
import {checkMenu,checkOrgs,lecturerRoute} from "@/utils/utils";
import { reportOrgs } from "@/api/indexProject";
export default {
  name: "NavLeft",
  setup() {
    const store = useStore();
    const state = reactive({
      lecturerRoute:['lecturerlist','teachingrecord','lecturerfeemanagement','lecturerfeestatistics','organization'],
      lecturerAdmin:'lecturer,lecturerRecords,lecturerExpense,lecturerSummary,lecturerTrainOrg',
      packup: false,
      screenHeight: document.body.clientHeight, // 屏幕 高度
      rootSubmenuKeys: [
        "sub1",
        "sub2",
        "sub3",
        "sub4",
        "sub5",
        "sub6",
        "sub7",
        "sub8",
        "sub9",
        "sub10",
        "sub11",
        "sub12",
        "sub13",
        "sub14",
        "sub15",
        "sub17",
        "sub18",
        "sub19",
        "sub20",
        "sub21",
        "sub22",
        "sub23",
        "sub24",
        "sub25",
        "sub26",
        "sub27",
        "sub28",
        "sub29",
      ],
      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: "/courserecommended",
          openKeys: "sub3",
          selectedKeys: "sub3-4",
          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-1",
          pagename: "案例管理",
        },
        {
          href: "/caserecommended",
          openKeys: "sub12",
          selectedKeys: "sub12-2",
          pagename: "案例推荐",
        },
        {
          href: "/gratefulnotice",
          openKeys: "sub22",
          selectedKeys: "sub22-1",
          pagename: "通知",
        },
        {
          href: "/gratefulcarousel",
          openKeys: "sub22",
          selectedKeys: "sub22-2",
          pagename: "轮播图",
        },
        {
          href: "/teacherempowerment",
          openKeys: "sub22",
          selectedKeys: "sub22-3",
          pagename: "教师赋能",
        },
        {
          href: "/teachertopic",
          openKeys: "sub22",
          selectedKeys: "sub22-4",
          pagename: "认证讲师库",
        },
        {
          href: "/tooldown",
          openKeys: "sub22",
          selectedKeys: "sub22-5",
          pagename: "工具下载",
        },
        {
          href: "/teacheropinion",
          openKeys: "sub22",
          selectedKeys: "sub22-6",
          pagename: "意见",
        },
        {
          href: "/instructorcertification",
          openKeys: "sub22",
          selectedKeys: "sub22-7",
          pagename: "讲师认证",
        },
        {
          href: "/articlemanage",
          openKeys: "sub13",
          selectedKeys: "sub13",
          pagename: "文章管理",
        },
        {
          href: "/qamanage",
          openKeys: "sub14",
          selectedKeys: "sub14",
          pagename: "问答管理",
        },
        {
          href: "/insidelecturer",
          openKeys: "sub23",
          selectedKeys: "sub23-1",
          pagename: "测评上传",
        },
        {
          href: "/lecturerlist",
          openKeys: "sub24",
          selectedKeys: "sub24-1",
          pagename: "讲师列表",
        },
        {
          href: "/teachingrecord",
          openKeys: "sub24",
          selectedKeys: "sub24-2",
          pagename: "授课记录",
        },
        {
          href: "/lecturerfeemanagement",
          openKeys: "sub24",
          selectedKeys: "sub24-3",
          pagename: "讲师费管理",
        },
        {
          href: "/lecturerfeestatistics",
          openKeys: "sub24",
          selectedKeys: "sub24-4",
          pagename: "讲师费统计",
        },
        {
          href: "/organization",
          openKeys: "sub24",
          selectedKeys: "sub24-5",
          pagename: "培训发生组织",
        },
        {
          href: "/lecturerSystem",
          openKeys: "sub29",
          selectedKeys: "sub29",
          pagename: "讲师体系管理",
        },
        {
          href: "/download",
          openKeys: "sub15",
          selectedKeys: "sub15",
          pagename: "下载中心",
        },
        {
          href: "/operational",
          openKeys: "sub17",
          selectedKeys: "sub17-1",
          pagename: "运营数据概览",
        },
        {
          href: "/learningpathmap",
          openKeys: "sub17",
          openKeys2: "sub17-2",
          selectedKeys: "sub17-2-1",
          pagename: "学习路径图",
        },
        {
          href: "/reportproject",
          openKeys: "sub17",
          openKeys2: "sub17-2",
          selectedKeys: "sub17-2-2",
          pagename: "项目",
        },
        {
          href: "/curriculum",
          openKeys: "sub17",
          openKeys2: "sub17-2",
          selectedKeys: "sub17-2-3",
          pagename: "课程",
        },
        {
          href: "/caseess",
          openKeys: "sub17",
          openKeys2: "sub17-2",
          selectedKeys: "sub17-2-4",
          pagename: "案例",
        },
        {
          href: "/reportarticle",
          openKeys: "sub17",
          openKeys2: "sub17-2",
          selectedKeys: "sub17-2-5",
          pagename: "文章",
        },
        {
          href: "/questionsandanswers",
          openKeys: "sub17",
          openKeys2: "sub17-2",
          selectedKeys: "sub17-2-6",
          pagename: "问答",
        },
        {
          href: "/reportexamination",
          openKeys: "sub17",
          openKeys2: "sub17-2",
          selectedKeys: "sub17-2-7",
          pagename: "考试",
        },
        {
          href: "/overvoew",
          openKeys: "sub17",
          openKeys2: "sub17-3",
          selectedKeys: "sub17-3-1",
          pagename: "概览",
        },
        {
          href: "/employeelearning",
          openKeys: "sub17",
          openKeys2: "sub17-3",
          selectedKeys: "sub17-3-2",
          pagename: "员工学习数据",
        },
        {
          href: "/trainingnewmanager",
          openKeys: "sub17",
          selectedKeys: "sub17-4",
          pagename: "新任管理者培训数据",
        },
        {
          href: "/oldsystemmanage",
          openKeys: "sub18",
          selectedKeys: "sub18",
          pagename: "旧版管理员界面",
        },
        {
          href: "/readingclubmanage",
          openKeys: "sub19",
          selectedKeys: "sub19",
          pagename: "业务支援读书会管理",
        },
        {
          href: "/dictmanage",
          openKeys: "sub20",
          selectedKeys: "sub20",
          pagename: "字典管理",
        },
        {
          href: "/audiencemanage",
          openKeys: "sub21",
          selectedKeys: "sub21",
          pagename: "受众管理",
        },

      ],
      oldManage: window.location.protocol + process.env.VUE_APP_OLD_MANAGE,
      evaluationManagement: window.location.protocol + process.env.VUE_APP_EVA_MANAGE
    });

    const onOpenChange = (openKeys) => {
      const latestOpenKey = openKeys.find(
          (key) => state.openKeys.indexOf(key) === -1
      );
      if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        state.openKeys = openKeys;
        console.log('111',openKeys)
      } else {
        state.openKeys = latestOpenKey ? [latestOpenKey] : [];
        console.log('222222222222222')
      }
    };
    const selectItem = (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])
          );
          // console.log('2222',[value.openKeys,value.openKeys2])
          state.openKeys = [value.openKeys,value.openKeys2];
          // state.openKeys=['sub17', 'sub17-2']
          state.selectedKeys = [value.selectedKeys];
          state.openKeys2 = [value.openKeys,value.openKeys2];
          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;
          if(!arr.some(page => page.href === n)){
            console.log('不存在',n)
            return
          }
          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,value.openKeys2];
              state.selectedKeys = [value.selectedKeys];
              state.openKeys2 = [value.openKeys,value.openKeys2];
              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 lecturerPath = () => {
      return state.lecturerRoute[lecturerRoute(state.lecturerAdmin)]
    }
    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),
      checkMenu,
      lecturerPath,
      lecturerRoute,
      checkOrgs,
      onOpenChange,
      selectItem,
      packUp,
    };
  },
};
</script>
<style lang="scss">
.navLeft {
  width: 208px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  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;
  .treeMenu {
    padding-left: 17px;
    .ant-menu-item-icon {
      width: 10px !important;
      height: 10px;
      min-width: 10px;
      border-radius: 50%;
      margin-right: 10px;
      // background: white;
      border: 2px solid white;
    }
    .ant-menu-title-content {
      box-sizing: border-box;
      // padding-left: 40px !important;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .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: 14px;
    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: 14px;
    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: 14px !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: 10px;
  }

  .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: 18px;
    margin-right: 10px;
    display: inline-block;
  }

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