<template>
  <!-- 人员绩效考核新版 -->
  <div class="userJXPage">
    <div class="menuLeft">
      <n-popover
        placement="right-start"
        trigger="hover"
        :show-arrow="false"
        v-for="item in menuOptions"
        :key="item.key"
        class="menuPopover"
      >
        <!-- 一级菜单 -->
        <template #trigger>
          <div :class="['partMenu', activeIndex == item.key ? 'active' : '']" @click="changeMenu(item)">
            <n-icon :size="18" :component="item.icon" />
            <p v-html="item.label"></p>
          </div>
        </template>
      </n-popover>
    </div>
    <div class="menuRight">
      <Training v-if="activeIndex == '1'" />
      <Library v-if="activeIndex == '21'" />
      <MonthJX v-if="activeIndex == '22'" />
      <YearJX v-if="activeIndex == '23'" />
      <Analysis v-if="activeIndex == '3'" />
    </div>
  </div>
</template>

<script>
import { reactive, shallowRef, toRefs, onMounted, ref, h } from 'vue';
import { NIcon } from 'naive-ui';
import { Search, Bookmark, Hammer, Book, Information, Airplane, People, Settings } from '@vicons/ionicons5';
import Training from './training.vue'; //培训管理
import Library from './library.vue'; //指标考核\n库管理
import MonthJX from './monthJX.vue'; //月度绩效
import YearJX from './yearJX.vue'; //年度绩效
import Analysis from './analysis.vue'; //统计分析

export default {
  name: 'userJXPage',
  components: {
    Search,
    Settings,
    Bookmark,
    Hammer,
    Book,
    Information,
    Airplane,
    People,
    Training,
    Library,
    Analysis,
    MonthJX,
    YearJX,
  },
  setup() {
    const allData = reactive({
      activeIndex: 1,
      menuOptions: [
        { label: '培训管理', icon: shallowRef(Search), key: '1' },
        { label: '指标库管理', icon: shallowRef(People), key: '21' },
        { label: '月度绩效', icon: shallowRef(Information), key: '22' },
        { label: '年度绩效', icon: shallowRef(Information), key: '23' },
        { label: '统计分析', icon: shallowRef(Book), key: '3' },
      ],
    });
    // 菜单点击
    const changeMenu = async (item) => {
      allData.activeIndex = item.key;
    };
    onMounted(() => {});
    return {
      ...toRefs(allData),
      changeMenu,
    };
  },
};
</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;
    }
  }
}
.userJXPage {
  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;
    .fc-license-message {
      display: none;
    }
  }
}
</style>