<template>
  <router-view> </router-view>
  <RongyunCommunication v-if="isRY"></RongyunCommunication>

  <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('');
import RongyunCommunication from '@/views/RongyunCommunication/index.vue'; //融云
const isRY = ref(false);
import useUserStore from '@/store/modules/user';
const appStore = useUserStore();
watch(
  () => appStore.token,
  (newVal, oldVal) => {
    console.log('走了这里watch');
    if (newVal) {
      console.log(' 新的token;', newVal);
      isRY.value = true;
    } else {
      console.log('改变');
      isRY.value = false;
    }
  },
  { immediate: false, deep: true }
);

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(() => {
  console.log('走了这里', appStore.token);
  if (appStore.token) {
    setTimeout(() => {
      isRY.value = true;
    }, 1000);
  } else {
    isRY.value = false;
  }

  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-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-weight: 500;
    color: #666666;
  }
}

:deep(.el-message) {
  z-index: 9999999 !important;
}
</style>
<style lang="scss">
.message-zindex {
  z-index: 100000000 !important;
}
</style>