<template>
  <!-- 项目指标绩效考核新版 -->
  <div class="jixiaoPage">
    <div class="menuLeft">
      <n-popover
        placement="right-start"
        trigger="hover"
        :show-arrow="false"
        v-for="(item, indexOne) in menuOptions"
        :key="item.key"
        class="menuPopover"
      >
        <!-- 一级菜单 -->
        <template #trigger>
          <div :class="['partMenu', activeIndex == item.key ? 'active' : '']" @click="changeMenu(item)" ref="oneLevelMenu">
            <n-icon :size="18" :component="item.icon" />
            <p>{{ item.label }}</p>
          </div>
        </template>
        <!-- 二级子菜单 -->
        <div v-if="item.lists && item.lists.length > 0">
          <div
            :class="['partMenu', activeIndex == item2.key ? 'active' : '']"
            v-for="item2 in item.lists"
            :key="item2.key"
            @click="changeMenu2(item2, indexOne)"
          >
            <n-icon :size="18" :component="item2.icon" />
            <p>{{ item2.label }}</p>
          </div>
        </div>
      </n-popover>
    </div>
    <div class="menuRight">
      <IndexLibrary v-if="activeIndex == '1'" />
      <EvaluationLS v-if="activeIndex == '21'" />
      <EvaluationCG v-if="activeIndex == '22'" />
      <ResultsPublicity v-if="activeIndex == '3'" />
      <LSResults v-if="activeIndex == '32'" />
      <CGResults v-if="activeIndex == '33'" />
      <StatisticalAna v-if="activeIndex == '5'" />
      <SetYywhfw v-if="activeIndex == '41'" />
      <SetKhPay v-if="activeIndex == '42'" />
      <SetCause v-if="activeIndex == '43'" />
      <SetWeight v-if="activeIndex == '44'" />
    </div>
  </div>
</template>

<script>
import { reactive, shallowRef, toRefs, onMounted, ref, h } from 'vue';
import { NIcon } from 'naive-ui';
import { currentLoginUser } from '@/services';
import { Search, Bookmark, Hammer, Book, Information, Airplane, People, Settings } from '@vicons/ionicons5';
import IndexLibrary from './indexLibrary2.vue'; //指标库管理
import EvaluationLS from './evaluationLS.vue'; //绩效考核评价-临时考核
import EvaluationCG from './evaluationCG.vue'; //绩效考核评价-常规考核
import ResultsPublicity from './resultsPublicity.vue'; //考核结果
import LSResults from './LSResaults.vue'; //临时考核问题统计报表
import CGResults from './CGResaults.vue'; //常规考核问题统计报表
import StatisticalAna from './statisticalAna.vue'; //统计分析
import SetYywhfw from './setYywhfw.vue'; //项目运营维护范围配置
import SetKhPay from './setKhPay.vue'; //考核支付系数配置
import SetCause from './setcause.vue'; //考核问题原因库配置
import SetWeight from './setWeight.vue'; //工程项目考核指标权重配置

export default {
  name: 'jixiaoPage',
  components: {
    Search,
    Settings,
    Bookmark,
    Hammer,
    Book,
    Information,
    Airplane,
    People,
    IndexLibrary,
    EvaluationLS,
    EvaluationCG,
    ResultsPublicity,
    StatisticalAna,
    SetYywhfw,
    SetKhPay,
    SetCause,
    LSResults,
    CGResults,
    SetWeight,
  },
  setup() {
    const allData = reactive({
      activeIndex: 1,
      oneLevelMenu: null,
      indexTwo: null,
      menuOptions: [
        { label: '指标库管理', icon: shallowRef(Search), key: '1' },
        {
          label: '考核评价',
          icon: shallowRef(Information),
          key: '22',
          lists: [
            { label: '常规考核', icon: shallowRef(Information), key: '22' },
            { label: '临时考核', icon: shallowRef(People), key: '21' },
          ],
        },
        {
          label: '绩效考核报表',
          icon: shallowRef(Airplane),
          key: '3',
          lists: [
            { label: '考核结果统计报表', icon: shallowRef(Airplane), key: '3' },
            { label: '临时考核问题统计报表', icon: shallowRef(Airplane), key: '32' },
            { label: '常规考核问题统计报表', icon: shallowRef(Airplane), key: '33' },
          ],
        },
        { label: '统计分析', icon: shallowRef(Book), key: '5' },

        {
          label: '绩效考核配置',
          icon: shallowRef(Hammer),
          key: '41',
          lists: [
            { label: '运营维护范围配置', icon: shallowRef(Settings), key: '41' },
            { label: '考核支付系数配置', icon: shallowRef(Settings), key: '42' },
            { label: '考核问题原因库配置', icon: shallowRef(Settings), key: '43' },
            { label: '工程考核指标权重配置', icon: shallowRef(Settings), key: '44' },
          ],
        },
      ],
    });
    // 菜单点击 一级
    const changeMenu = async (item) => {
      allData.activeIndex = item.key;
      if (!!!allData.indexTwo) return;
      allData.oneLevelMenu[allData.indexTwo].style.background = '';
      allData.oneLevelMenu[allData.indexTwo].style.color = '';
    };
    // 菜单点击 二级
    const changeMenu2 = async (item, index) => {
      allData.activeIndex = item.key; //当前选择状态
      // 二级菜单选中时，父级菜单也要选中
      allData.indexTwo = index;
      allData.oneLevelMenu[allData.indexTwo].style.background = '#00475c';
      allData.oneLevelMenu[allData.indexTwo].style.color = '#00e6e6';
    };
    // 获取系统用户名，用于常规考核已审核的撤回操作
    async function getUserLogin() {
      let res = await currentLoginUser();
      if (res && res.code == 200) {
        localStorage.setItem('returnBackUser', res.data);
      }
    }
    onMounted(() => {
      getUserLogin();
    });
    return {
      ...toRefs(allData),
      changeMenu,
      changeMenu2,
    };
  },
};
</script>

<style lang="less">
.menuPopover {
  background: #00364d !important;
  padding: 0px !important;
  .partMenu {
    height: 50px;
    width: 200px;
    color: #638899;
    cursor: pointer;
    display: flex;
    align-items: center;
    .n-icon {
      margin: 0 15px;
    }
    &.active {
      color: #00e6e6;
      background: #00475c;
    }
    &:hover {
      background: #00475c;
    }
  }
}
.jixiaoPage {
  width: 100%;
  height: 100%;
  background: linear-gradient(#002e3e, #00202d);
  display: flex;
  .menuLeft {
    width: 104px;
    height: auto;
    margin: 16px 32px 10px 16px;
    background: #00364d;
    .partMenu {
      background: #00364d;
      height: 88px;
      margin-top: 10px;
      color: #638899;
      text-align: center;
      cursor: pointer;
      .n-icon {
        margin-top: 20px;
      }
      &.active {
        color: #00e6e6;
        background: #00475c;
      }
      &:hover {
        background: #00475c;
      }
    }
  }
  .menuRight {
    flex: 1;
    margin: 24px 32px 10px 0px;
    padding: 4px;
    height: auto;
    background: #00475c;
  }
}
</style>