<template>
  <div
    class="component-header relative flex items-center justify-center w-full"
  >
    <div class="title">{{ username }}健康数据大屏</div>
    <div class="right-time flex items-center" @click="onRefresh">
      <el-text v-if="largeScreenGlobalData?.updatedAt"
        >数据更新时间：{{ largeScreenGlobalData.updatedAt }}</el-text
      >
      <div
        class="ml-2 cursor-pointer"
        v-for="(item, key) in tagsViews"
        :key="Math.random()"
        @click.stop="selectTag(key, item)"
      >
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="item.text"
          placement="top-start"
        >
          <IconifyIconOffline :icon="item.icon" />
        </el-tooltip>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { useLargeScreenStoreHook } from "@/store/modules/largeScreen";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";

import { useNav } from "@/layout/hooks/useNav";
import { useTags } from "@/layout/hooks/useTag";

const useLargeScreenHook = useLargeScreenStoreHook();
// useLargeScreenHook?.requestLargeScreenGlobalData();

const largeScreenGlobalData = computed(() => {
  return useLargeScreenHook?.largeScreenGlobalData;
});
const { onContentFullScreen, pureSetting } = useTags();
const showTagsText = ref(true);

const { title, username } = useNav();

const tagsViews = reactive([
  {
    icon: ExitFullscreen,
    text: "退出全屏",
    divided: false,
    disabled: false,
    show: true
  }
]);
const onRefresh = () => {
  useLargeScreenHook?.requestLargeScreenGlobalData(1);
};
/** 触发右键中菜单的点击事件 */
const selectTag = (key, item) => {
  onClickDrop(key, item);
};
function openFullscreen() {
  if (document.documentElement.requestFullscreen) {
    document.documentElement.requestFullscreen();
  } else if (document.documentElement.mozRequestFullScreen) { /* Firefox */
    document.documentElement.mozRequestFullScreen();
  } else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    document.documentElement.webkitRequestFullscreen();
  } else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */
    document.documentElement.msRequestFullscreen();
  }
}

// 退出全屏
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { /* Firefox */
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE/Edge */
    document.msExitFullscreen();
  }
}
const onClickDrop = (key, item, selectRoute) => {
  if (item && item.disabled) return;
  let selectTagRoute;
  // 当前路由信息
  switch (key) {
    case 0:
      // 内容区全屏
      onContentFullScreen();
      setTimeout(() => {
        if (pureSetting.hiddenSideBar) {
          tagsViews[0].icon = ExitFullscreen;
          tagsViews[0].text = "退出全屏";
          showTagsText.value = false;
          openFullscreen()
        } else {
          tagsViews[0].icon = Fullscreen;
          tagsViews[0].text = "全屏";
          showTagsText.value = true;
          closeFullscreen()
        }

      }, 100);
      break;
  }
};
</script>
<style lang="scss" scoped>
.component-header {
  .title {
    font-weight: bold;
    font-size: 30px;
  }
  color: #22549c !important;
  // position: relative;
  width: 100%;
  height: 60px;
  display: flex;
  background: #e0ecfa;
  background-image: url("./top-bg.png");
  background-size: 100% 100%;
  .right-time {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
