<template>
  <div class="subject">
    <div class="subject_header">
      <img
        class="subject_header_img"
        src="/subject/subject_header.png"
        :style="{
          width: '100%',
          height: `${82 * bi}px`,
        }"
      />
      <div
        class="subject_header_title"
        :style="{
          position: 'relative',
          top: `${-85 * bi}px`,
        }"
      >
        <span
          :style="{
            fontSize: `${42 * bi}px`,
            height: `${82 * bi}px`,
          }"
        >
          <img
            src="/subject/subject_logo.png"
            :style="{
              position: 'relative',
              top: `${4 * bi}px`,
              width: `${78 * bi}px`,
              height: `${70 * bi}px`,
              marginRight: `${5 * bi}px`,
            }"
          />
          {{ t('sys.subject.header_title') }}
        </span>
      </div>
      <div class="subject_header_currentTime">
        <span class="subject_header_currentTime_date">
          {{ currentTime_date }}
        </span>
        <div class="subject_header_currentTime_div">
          <div> {{ currentTime_week }} </div>
          <div> {{ currentTime_year }} </div>
        </div>
      </div>
      <div class="subject_header_adminAndLogout">
        <img src="/subject/subject_header_admin.png" />
        <span> {{ loginUser }} {{ t('sys.subject.header_admin') }}</span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <img src="/subject/subject_header_logout.png" @click="handleLoginOut()" />
        <span @click="handleLoginOut()">{{ t('sys.subject.header_logout') }}</span>
      </div>
    </div>
    <div class="subject_box">
      <div
        class="subject_box_btn"
        ref="contentArea"
        :style="{
          position: 'relative',
          top: `${getBoxBtnAttribute()[0]}px`,
          left: `${getBoxBtnAttribute()[1] * bi}px`,
          height: `${getBoxBtnAttribute()[2] * bi}px`,
          width: `${getBoxBtnAttribute()[3] * bi}px`,
        }"
      >
        <div
          v-for="(item, index) in list"
          :key="item.id"
          :id="item.id"
          class="subject_box_btn_div"
          @click="getHome(item)"
          :style="{
            marginRight: `${getBoxBtnAttribute()[4] * bi}px`,
            marginLeft: `${getBoxBtnAttribute()[4] * bi}px`,
            marginBottom: `${20 * bi}px`,
            height: `${325 * bi}px`,
            width: `${225 * bi}px`,
            'background-image': `url(${index % 2 == 0 ? '/subject/subject_btn_1.png' : '/subject/subject_btn_2.png'})`,
            'background-size': `${100}%`,
            'background-repeat': 'no-repeat',
          }"
        >
          <img
            class="subject_box_btn_div_url"
            :src="getImageUrl(item.imgUrl)"
            :style="{
              left: `${21 * bi}px`,
              width: `${191 * bi}px`,
              height: `${191 * bi}px`,
            }"
          />
          <span
            class="subject_box_btn_div_span"
            v-html="renderedTitle(item.title)"
            :style="{
              fontSize: `${fotSize * bi}px`,
              left: `${22 * bi}px`,
              width: `${190 * bi}px`,
              height: `${(fotSize * spanWrap + 7) * bi}px`,
            }"
          />
          <img
            class="subject_box_btn_div_line"
            src="/subject/subject_line.png"
            :style="{
              top: `${((fotSize / 2) * getWrap(item.title) - (fotSize / 2) * (spanWrap - 1) - 7) * bi}px`,
              left: `${52 * bi}px`,
              width: `${128 * bi}px`,
              height: `${7 * bi}px`,
            }"
          />
          <div
            class="circle arc1"
            :style="{
              position: 'absolute',
              top: `${92 * bi}px`,
              left: `${117 * bi}px`,
              width: `${126 * bi}px`,
              height: `${126 * bi}px`,
            }"
          />
          <div
            class="circle arc2"
            :style="{
              position: 'absolute',
              top: `${92 * bi}px`,
              left: `${117 * bi}px`,
              width: `${126 * bi}px`,
              height: `${126 * bi}px`,
            }"
          />
          <div
            class="circle arc3"
            :style="{
              position: 'absolute',
              top: `${92 * bi}px`,
              left: `${117 * bi}px`,
              width: `${126 * bi}px`,
              height: `${126 * bi}px`,
            }"
          />
          <div
            class="circle arc4"
            :style="{
              position: 'absolute',
              top: `${92 * bi}px`,
              left: `${117 * bi}px`,
              width: `${126 * bi}px`,
              height: `${126 * bi}px`,
            }"
          />
        </div>
      </div>
      <!-- <div class="subject_box_overflow">
        <Icon
          style="font-size: 31px"
          class="subject_box_overflow_icon1"
          icon="ant-design:up-outlined"
          @click="scrollToElement('top')"
        />
        <Icon
          style="font-size: 31px"
          class="subject_box_overflow_icon2"
          icon="ant-design:down-outlined"
          @click="scrollToElement('bottom')"
        />
      </div> -->
    </div>
    <div class="subject_bottom">
      <!-- <span>
        {{ t('sys.subject.bottom_copyright') }}
        &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
        {{ t('sys.subject.bottom_support') }}
        &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
        {{ t('sys.subject.bottom_version') }}
      </span> -->
      <span>
        {{
          VITE_GLOB_APP_MANAGEMENT_UNIT
            ? VITE_GLOB_APP_MANAGEMENT_UNIT
            : t('sys.subject.bottom_copyright')
        }}
        &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
        {{
          VITE_GLOB_APP_TECHINICAL_SUPPORT
            ? VITE_GLOB_APP_TECHINICAL_SUPPORT
            : t('sys.subject.bottom_support')
        }}
        &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
        {{ VITE_GLOB_APP_VERSIONS ? VITE_GLOB_APP_VERSIONS : t('sys.subject.bottom_version') }}
      </span>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { useUserStore } from '@/store/modules/user';
  import { getSpecialData } from '@/api/demo/system';
  import { onMounted, onUnmounted, ref, nextTick, computed, watchEffect } from 'vue';
  import { message } from 'ant-design-vue';
  import Icon from '@/components/Icon/Icon.vue';
  import { getAppEnvConfig } from '@/utils/env';
  import { useI18n } from '@/hooks/web/useI18n';
  import { PageEnum } from '@/enums/pageEnum';
  import dayjs from 'dayjs';

  const {
    VITE_GLOB_API_URL,
    VITE_GLOB_APP_MANAGEMENT_UNIT,
    VITE_GLOB_APP_TECHINICAL_SUPPORT,
    VITE_GLOB_APP_VERSIONS,
  } = getAppEnvConfig();
  const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');
  const { t } = useI18n();

  const loginUser: any = ref('');
  const contentArea = ref<HTMLElement | null>(null);
  const list: any = ref([]);
  const userStore = useUserStore();
  const spanWrap = ref(1);

  async function getData() {
    const res: any = await getSpecialData();
    // 最大标题文字行数
    res?.forEach((item) => {
      if (Math.ceil(item.title.length / 6) > spanWrap.value) {
        spanWrap.value = Math.ceil(item.title.length / 6);
      }
    });
    list.value = res;
    loginUser.value = localStorage.getItem('fireUserLoginName');
    // cardRotationLoop();
  }
  // 旋转动画
  async function cardRotationLoop() {
    nextTick(() => {
      list.value.forEach((item, index) => {
        setTimeout(() => {
          const element: any = document.getElementById(item.id);
          element.classList.remove('cardRotationState');
          element.classList.add('cardRotation');
          setTimeout(() => {
            element.classList.add('cardRotationState');
          }, 5000);
          if (index == list.value.length - 1) {
            setTimeout(() => {
              cardRotationLoop();
            }, 8000);
          }
        }, index * 8000);
      });
    });
  }

  // 按键控制滚动条
  const scrollToElement = async (type) => {
    if (contentArea.value) {
      if (type == 'top' && contentArea.value.scrollTop != 0) {
        contentArea.value.scrollTop = contentArea.value.scrollTop - 344;
      }
      if (type == 'bottom' && contentArea.value.scrollTop != contentArea.value.scrollHeight) {
        contentArea.value.scrollTop = contentArea.value.scrollTop + 344;
      }
    }
  };
  // 跳转
  async function getHome(item) {
    console.log(window.innerWidth);
    if (!item.isDevelop) {
      message.warn(item.title + '系统暂未开放！');
      return;
    }
    if (item.isExternal) {
      if (item.linkOrApi) {
        window.location.href = item.linkOrApi;
      } else {
        message.warn('系统外部链接未配置！');
        return;
      }
    } else {
      if (!item.linkOrApi) {
        item.linkOrApi = PageEnum.WELCOME_HOME;
      }
      userStore.setSubject(item.id, item.title, item.logoTitle, item.linkOrApi);
    }
  }
  // 获取图片地址
  function getImageUrl(imgUrl) {
    if (imgUrl) {
      return VITE_GLOB_API_URL_VAR.value + imgUrl;
    } else {
      return '/subject/subject_default.png';
    }
  }
  // 标题换行
  function renderedTitle(name) {
    return `${name.replace(/\s/g, '<br />')}`;
  }
  // 标题的行数
  function getWrap(name) {
    return Math.ceil(name.length / 6);
  }
  // 退出系统
  function handleLoginOut() {
    userStore.confirmLoginOut();
  }
  // 分辨率
  const viewportWidth = ref(window.innerWidth);
  const viewportHeight = ref(window.innerHeight);
  const referenceWidth = 1920;
  const referenceHeight = 1080;
  const fotSize = ref(28);

  // 计算不同数量的选项卡的布局属性
  function getBoxBtnAttribute() {
    let box: any = [];
    box[0] = 80;
    box[1] = 85;
    box[2] = 700;
    box[3] = 1750;
    box[4] = 12;
    // if (list.value.length <= 7) {
    //   box[0] = 80;
    //   box[1] = 85;
    //   box[2] = 700;
    //   box[3] = 1750;
    //   box[4] = 12;
    // }
    // if (list.value.length == 8) {
    //   box[0] = 80;
    //   box[1] = 185;
    //   box[2] = 700;
    //   box[3] = 1550;
    //   box[4] = 50;
    // }
    // if (list.value.length == 9 || list.value.length == 10) {
    //   box[0] = 80;
    //   box[1] = 135;
    //   box[2] = 700;
    //   box[3] = 1650;
    //   box[4] = 50;
    // }
    // if (list.value.length == 11 || list.value.length == 12) {
    //   box[0] = 80;
    //   box[1] = 85;
    //   box[2] = 700;
    //   box[3] = 1750;
    //   box[4] = 30;
    // }
    // if (list.value.length == 13 || list.value.length == 14) {
    //   box[0] = 80;
    //   box[1] = 85;
    //   box[2] = 700;
    //   box[3] = 1750;
    //   box[4] = 12;
    // }
    return box;
  }

  const updateWindowSize = () => {
    viewportWidth.value = window.innerWidth;
    viewportHeight.value = window.innerHeight;
  };

  const bi = computed(() => {
    return viewportWidth.value / referenceWidth;
  });

  // 时间和天气
  const currentTime_year = ref(dayjs().format('YYYY年M月D日'));
  const currentTime_week = ref(dayjs().locale('zh-cn').format('dddd'));
  const currentTime_date = ref(dayjs().format('HH:mm:ss'));

  function updateTime() {
    currentTime_year.value = dayjs().format('YYYY年M月D日');
    currentTime_week.value = dayjs().locale('zh-cn').format('dddd');
    currentTime_date.value = dayjs().format('HH:mm:ss');
  }

  // 监听每一秒更新时间
  watchEffect(() => {
    const intervalId = setInterval(updateTime, 1000);
    // 清除定时器
    onUnmounted(() => clearInterval(intervalId));
  });

  onMounted(() => {
    getData();
    window.addEventListener('resize', updateWindowSize);
    updateWindowSize(); // 初始化视口尺寸
    updateTime();
  });

  onUnmounted(() => {
    window.removeEventListener('resize', updateWindowSize);
  });
</script>
<style lang="less" scoped>
  .subject {
    background-image: url('/subject/subject_bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 100%;

    // 页面不能被选中
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;

    &_header {
      &_title {
        span {
          display: inline-flex;
          align-items: center;
          text-align: center;
          justify-content: center;
          width: 100%;
          font-family: 068-SSZhengYaTi;
          font-weight: 400;
          color: #ffffff;
          font-weight: 900 !important;
          letter-spacing: 1.5px;
        }
      }

      &_currentTime {
        position: absolute;
        left: 87px;
        top: 4px;
        height: 40px;
        display: inline-flex;
        align-items: center;

        &_date {
          font-family: DIN;
          font-weight: bold;
          font-size: 26px;
          color: #ffffff;
          line-height: 26px;
          margin-right: 10px;
        }

        &_div {
          position: relative;
          top: -7px;
          width: 100px;
          height: 12px;
          font-family: DIN;
          font-weight: 500;
          font-size: 12px;
          color: #ffffff;
          line-height: 12px;
          display: block;

          div {
            margin-bottom: 2px;
          }
        }
      }

      &_adminAndLogout {
        position: absolute;
        right: 87px;
        top: 0px;
        height: 40px;
        display: inline-flex;
        align-items: center;

        img {
          cursor: pointer;
          width: 31px;
          height: 31px;
        }

        span {
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          text-align: center;
          justify-content: center;
          height: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #006cff;
          line-height: 28px;
        }
      }
    }

    &_box {
      display: flex;
      position: relative;
      top: -82px;

      &_btn {
        align-items: center;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        display: flex;
        overflow-x: hidden;
        overflow-y: auto;

        // 隐藏滚动条
        -ms-overflow-style: none; /* IE 和 Edge */
        scrollbar-width: none; /* Firefox */
        ::-webkit-scrollbar {
          display: none; /* Chrome, Safari, Opera */
        }

        &_div {
          // 弹性子元素（flex item）的弹性行为
          flex: 0 0 auto;
          transition: all 0.3s ease;

          // 定义旋转
          // 设置透视距离
          perspective: 1000px;
          // 添加过渡效果
          transition: transform 1s;
          // 定义旋转动画
          // animation: cardRotation 5s linear infinite;

          &:hover {
            filter: brightness(150%);
            cursor: pointer;
            box-shadow: 20px 10px 10px rgba(0, 0, 0, 0.5);

            // 定义旋转
            // 暂停动画
            animation-play-state: paused;
            // 过渡效果
            transition: transform 1s ease;
            // 立即回到正面
            transform: rotateY(0deg) !important;
          }

          &_bg {
            height: 324px;
          }

          &_url {
            position: relative;
            top: 0px;
            left: 11px;
            width: 191px;
            height: 191px;
          }

          &_span {
            display: inline-flex;
            align-items: center;
            text-align: center;
            justify-content: center;
            position: relative;
            // top: -300px;
            left: 12px;
            width: 190px;
            // 字体样式
            font-size: 28px;

            font-family: 'Microsoft YaHei';
            color: #ffffff;
            background: linear-gradient(0deg, #6da7ff 0%, #e2ebff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
            font-weight: 900 !important;
          }

          &_line {
            position: relative;
            left: 42px;
            width: 128px;
            height: 7px;
          }
        }
      }

      // &_overflow {
      //   position: absolute;
      //   top: 220px;
      //   right: -110px;
      //   height: 300px;
      //   width: 110px;

      //   &_icon1 {
      //     color: #006cff;
      //     cursor: pointer;
      //     position: relative;
      //     top: 100px;
      //     right: 85px;
      //   }

      //   &_icon2 {
      //     color: #006cff;
      //     cursor: pointer;
      //     position: relative;
      //     top: 200px;
      //     right: 115px;
      //   }
      // }
    }

    &_bottom {
      span {
        width: 902px;
        height: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #5eb2ff;
      }
      position: absolute;
      top: 95%;
      left: calc(50% - 902px / 2);
    }
  }

  // 四条旋转的弧线
  .circle {
    transform-origin: 50% 50%;
    width: 126px;
    height: 126px;
    border-radius: 50%;
    background-color: transparent;
    border: 3px solid #276fff;
  }

  .arc1 {
    position: relative;
    // top: -142px;
    left: 108px;
    clip-path: inset(0 55% 55% 0);
    animation: rotateArc1 8s linear infinite;
  }

  .arc2 {
    position: relative;
    top: -268px;
    left: 108px;
    clip-path: inset(55% 0 0 55%);
    transform: rotate(90deg);
    animation: rotateArc2 8s linear infinite;
  }

  .arc3 {
    position: relative;
    top: -394px;
    left: 108px;
    clip-path: inset(0 55% 55% 0);
    transform: rotate(180deg);
    animation: rotateArc3 8s linear infinite;
  }

  .arc4 {
    position: relative;
    top: -520px;
    left: 108px;
    clip-path: inset(55% 0 0 55%);
    transform: rotate(270deg);
    animation: rotateArc4 8s linear infinite;
  }

  @keyframes rotateArc1 {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  @keyframes rotateArc2 {
    0% {
      transform: translate(-50%, -50%) rotate(90deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(450deg);
    }
  }

  @keyframes rotateArc3 {
    0% {
      transform: translate(-50%, -50%) rotate(180deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(540deg);
    }
  }

  @keyframes rotateArc4 {
    0% {
      transform: translate(-50%, -50%) rotate(270deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(630deg);
    }
  }
  // 开启旋转动画
  .cardRotation {
    animation: cardRotation 5s linear infinite;
  }
  // 关闭旋转动画
  .cardRotationState {
    animation-play-state: paused;
    transition: transform 3s ease;
    transform: rotateY(0deg) !important;
  }
  // 定义旋转动画
  @keyframes cardRotation {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(-360deg);
    }
  }
</style>
