<template>
  <router-view> </router-view>

  <el-popover :width="407" placement="left" v-if="description">
    <template #reference>
      <div class="menuIcons">
        <img src="../src/assets/images/show_menu.png" style="margin-bottom: -3px" />
      </div>
    </template>
    <template #default>
      <div class="menu-description flex flex-v">
        <div class="description-title flex flex-align-center">文档标题</div>
        <div class="description-content" v-html="description"></div>
      </div>
    </template>
  </el-popover>
</template>

<script setup>
import { getToken } from '@/utils/auth';
import { listMenu } from '@/api/menu';
import useSettingsStore from '@/store/modules/settings';
import { handleThemeStyle } from '@/utils/theme';
import { useRouter } from 'vue-router';
const router = useRouter();
const description = ref('');
watch(
  () => router.currentRoute.value.path,
  (newValue, oldValue) => {
    // 全屏项目中无需说明弹窗
    if (router.currentRoute.value.query.type == "FullScreen") {
      // 全屏页面
      description.value = "";
    } else {
      // 非全屏页面
      getMenuList(router.currentRoute.value.meta.title);
    }
  },
  { immediate: true }
);
function getMenuList(menuName) {
  if (getToken()) {
    listMenu({ menuName: menuName }).then(res => {
      if (res.data.length) {
        description.value = res.data[0].description;
      } else {
        description.value = '';
      }
    });
  }
}
onMounted(() => {
  nextTick(() => {
    handleThemeStyle(useSettingsStore().theme);
  });
});
</script>
<style lang="scss" scoped>
.menuIcons {
  position: absolute;
  right: 60px;
  bottom: 50px;
  z-index: 999;
  box-shadow: 0px 0px 3px #000000;
  border-radius: 50%;
}
:deep(.el-popper) {
  padding: 0 !important;
}
.menu-description {
  width: 407px;
  border-radius: 2px 2px 0px 0px;

  .description-title {
    width: 400px;
    height: 50px;
    margin: -12px;
    background: #1981ff;
    border-radius: 2px 2px 0px 0px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
    padding-left: 19px;
  }
  .description-content {
    width: 400px;
    margin-left: -12px;
    margin-right: -12px;
    padding: 24px 12px 12px 12px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #666666;
  }
}
</style>