<template>
  <!-- 公共服务子系统 -->
  <div class="publicService">
    <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">
      <Thematic v-if="activeIndex == '1'" />
      <News v-if="activeIndex == '2'" />
      <PolicyLaw v-if="activeIndex == '3'" />
      <Special v-if="activeIndex == '4'" />
      <History v-if="activeIndex == '5'" />
      <Travel v-if="activeIndex == '6'" />
      <FansUser v-if="activeIndex == '71'" />
      <FansGroup v-if="activeIndex == '72'" />
      <Report v-if="activeIndex == '8'" />
      <MessagePush v-if="activeIndex == '9'" />
      <Wenjuan v-if="activeIndex == '10'" />
    </div>
  </div>
</template>

<script>
import { reactive, shallowRef, toRefs, onMounted } from 'vue';
import { Search, Bookmark, Hammer, Book, Information, Airplane, People, Settings } from '@vicons/ionicons5';
import Thematic from './thematic.vue'; //专题导航
import News from './news.vue'; //新闻动态
import PolicyLaw from './policyLaw.vue'; //政策法规
import Special from './specialKnowledge.vue'; //专题知识
import History from './historyCulture.vue'; //历史文化
import Travel from './travelInfo.vue'; //旅游信息
import FansUser from './fansInfoUser.vue'; //粉丝信息用户信息
import FansGroup from './fansInfoGroup.vue'; //粉丝信息组管理
import Report from './report.vue'; //公众举报
import MessagePush from './messagePush.vue'; //消息推送
import Wenjuan from './wenJuan.vue'; //问卷调查

export default {
  name: 'publicService',
  components: {
    Search,
    Settings,
    Bookmark,
    Hammer,
    Book,
    Information,
    Airplane,
    People,
    Thematic,
    News,
    PolicyLaw,
    Special,
    History,
    Travel,
    FansUser,
    FansGroup,
    Report,
    MessagePush,
    Wenjuan,
  },
  setup() {
    const allData = reactive({
      oneLevelMenu: null,
      indexTwo: null,
      activeIndex: 1,
      menuOptions: [
        { label: '专题导航', icon: shallowRef(Search), key: '1' },
        { label: '新闻动态', icon: shallowRef(Bookmark), key: '2' },
        { label: '政策法规', icon: shallowRef(Hammer), key: '3' },
        { label: '专题知识', icon: shallowRef(Book), key: '4' },
        // { label: "历史文化", icon: shallowRef(Bookmark), key: "5" },
        // { label: "旅游信息", icon: shallowRef(Airplane), key: "6"},
        {
          label: '粉丝信息',
          icon: shallowRef(People),
          key: '71',
          lists: [
            {
              label: '粉丝详情',
              icon: shallowRef(People),
              key: '71',
            },
            {
              label: '粉丝组管理',
              icon: shallowRef(Settings),
              key: '72',
            },
          ],
        },
        { label: '公众举报', icon: shallowRef(People), key: '8' },
        { label: '消息推送', icon: shallowRef(Information), key: '9' },
        { label: '问卷调查', icon: shallowRef(People), key: '10' },
      ],
    });
    // 菜单点击 一级
    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';
    };

    onMounted(() => {});
    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;
    }
  }
}
.publicService {
  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>