<template>
  <div class="subject">
    <div class="subject_top">
      <img
        class="subject_top_img"
        src="/subject_lindidiaocha/top.png"
        :style="{
          width: '100%',
          height: `${116 * bi}px`,
        }"
      />
      <div
        class="subject_top_title"
        :style="{
          position: 'relative',
          top: `${-116 * bi}px`,
        }"
      >
        <span
          :style="{
            position: 'relative',
            fontSize: `${46 * bi}px`,
            top: `${-20 * bi}px`,
            height: `${116 * bi}px`,
          }"
        >
          <img
            src="/subject_lindidiaocha/logo.png"
            :style="{
              position: 'relative',
              top: `${4 * bi}px`,
              width: `${70 * bi}px`,
              height: `${65 * bi}px`,
              marginRight: `${5 * bi}px`,
            }"
          />
          {{ t('sys.subject.header_title') }}
        </span>
      </div>
      <div
        class="subject_top_currentTime"
        :style="{
          left: `${87 * bi}px`,
          top: `${0 * bi}px`,
          height: `${40 * bi}px`,
        }"
      >
        <span class="subject_top_currentTime_date">
          {{ currentTime_date }}
        </span>
        <div class="subject_top_currentTime_div">
          <div> {{ currentTime_week }} </div>
          <div> {{ currentTime_year }} </div>
        </div>
        <!-- <div class="subject_top_currentTime_interval"></div>
        <div class="subject_top_currentTime_monitor" @click="getHome(monitor)">
          <div class="subject_top_currentTime_monitor_icon"></div>
          <div class="subject_top_currentTime_monitor_span">监测中心</div>
        </div> -->
      </div>
      <div
        class="subject_top_adminAndLogout"
        :style="{
          right: `${40 * bi}px`,
          top: `${0 * bi}px`,
          height: `${40 * bi}px`,
        }"
      >
        <span class="loginUser"> {{ loginUser }} {{ t('sys.subject.header_admin') }}</span>
        &nbsp;&nbsp;
        <!-- <a-dropdown :placement="'bottomRight'" :arrow="{ pointAtCenter: true }" overlayClassName="subject-right-menu-list">
          <div style="display: flex;align-items: center;">
            <img src="/subject_lindidiaocha/setting.png" @click="getHome(setting)" />
            &nbsp;&nbsp;
            <span class="line" @click="getHome(setting)"> {{ setting.title }}</span>
            <div class="dropdown-icon"></div>
          </div>
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <div class="button-item" @click="getHome(monitor)">
                    <div class="button-icon monitor-center-icon"></div>
                    监测中心
                  </div>
                </a-menu-item>
                <a-menu-item>
                  <div class="button-item" @click="getHome(data)">
                    <div class="button-icon data-center-icon"></div>
                    数据中心
                  </div>
                </a-menu-item>
              </a-menu>
            </template>
        </a-dropdown> -->
        <span class="line"> | </span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <img src="/subject_lindidiaocha/logout.png" @click="handleLoginOut()" />
      </div>
    </div>

    <img class="subject_left" src="/subject_lindidiaocha/left.png" />
    <img class="subject_right" src="/subject_lindidiaocha/right.png" />

    <div
      class="subject_box"
      :style="{
        position: 'relative',
        top: `${-100 * bi}px`,
      }"
    >
      <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 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: `${50 * bi}px`,
            height: `${300 * bi}px`,
            width: `${210 * bi}px`,
            'background-image': `url(${item.isHover ? '/subject_lindidiaocha/btn_2.png' : '/subject_lindidiaocha/btn_1.png'})`,
            'background-size': `${100}%`,
            'background-repeat': 'no-repeat',
          }"
          @mouseenter="item.isHover = true"
          @mouseleave="item.isHover = false"
        >
          <img
            class="subject_box_btn_div_img"
            :src="
              item.isHover
                ? '/subject_lindidiaocha/line1_hover.png'
                : '/subject_lindidiaocha/line1.png'
            "
            :style="{
              position: 'relative',
              display: 'block',
              top: `${(200 - ((fotSize + 3) / 2) * getWrap(item.title)) * bi}px`,
              left: `${25 * bi}px`,
              width: `${160 * bi}px`,
              height: `${3 * bi}px`,
            }"
          />
          <img
            class="subject_box_btn_div_img"
            :src="
              item.isHover
                ? '/subject_lindidiaocha/line2_hover.png'
                : '/subject_lindidiaocha/line2.png'
            "
            :style="{
              position: 'relative',
              top: `${(180 + ((fotSize + 3) / 2) * (getWrap(item.title) + 1)) * bi}px`,
              width: `${160 * bi}px`,
              height: `${3 * bi}px`,
            }"
          />
          <span
            class="subject_box_btn_div_span"
            v-html="renderedTitle(item.title)"
            :style="
              item.title.length > 10
                ? {
                    fontSize: `${fotSize * bi}px`,
                    lineHeight: '30px',
                    top: `${(180 - (fotSize / 2) * spanWrap) * bi - 30}px`,
                    width: `${fotSize * 6 * bi}px`,
                    height: `${(fotSize + 3) * spanWrap * (bi + 2)}px`,
                  }
                : {
                    fontSize: `${fotSize * bi}px`,
                    lineHeight: '30px',
                    top: `${(180 - (fotSize / 2) * spanWrap) * bi}px`,
                    width: `${fotSize * 6 * bi}px`,
                    height: `${(fotSize + 3) * spanWrap * bi}px`,
                  }
            "
          />
          <img
            src="/subject_lindidiaocha/nochoose.png"
            :style="
              item.title.length > 10
                ? {
                    display: 'block',
                    position: 'relative',
                    top: `${(20 - fotSize * spanWrap) * bi - 64}px`,
                    left: `${55 * bi}px`,
                    width: `${100 * bi}px`,
                    height: `${100 * bi}px`,
                    zIndex: 2,
                  }
                : {
                    display: 'block',
                    position: 'relative',
                    top: `${(20 - fotSize * spanWrap) * bi}px`,
                    left: `${55 * bi}px`,
                    width: `${100 * bi}px`,
                    height: `${100 * bi}px`,
                    zIndex: 2,
                  }
            "
          />
          <img
            :src="getImageUrl(item.imgUrl)"
            :style="
              item.title.length > 10
                ? {
                    display: 'block',
                    position: 'relative',
                    top: `${(-55 - fotSize * spanWrap) * bi - 64}px`,
                    left: `${75 * bi}px`,
                    width: `${60 * bi}px`,
                    height: `${58 * bi}px`,
                    zIndex: 3,
                  }
                : {
                    display: 'block',
                    position: 'relative',
                    top: `${(-55 - fotSize * spanWrap) * bi}px`,
                    left: `${75 * bi}px`,
                    width: `${60 * bi}px`,
                    height: `${58 * bi}px`,
                    zIndex: 3,
                  }
            "
          />
          <img
            v-show="item.isHover"
            src="/subject_lindidiaocha/choose.png"
            :style="
              item.title.length > 10
                ? {
                    position: 'relative',
                    top: `${(-127 - fotSize * spanWrap) * bi - 64}px`,
                    width: `${70 * bi}px`,
                    height: `${75 * bi}px`,
                    zIndex: 4,
                  }
                : {
                    position: 'relative',
                    top: `${(-127 - fotSize * spanWrap) * bi}px`,
                    width: `${70 * bi}px`,
                    height: `${75 * bi}px`,
                    zIndex: 4,
                  }
            "
          />
        </div>
      </div>
    </div>
    <div class="subject_bottom">
      <img src="/subject_lindidiaocha/bottom.png" />
      <span>
        {{
          VITE_GLOB_APP_MANAGEMENT_UNIT
            ? VITE_GLOB_APP_MANAGEMENT_UNIT
            : t('sys.subject.bottom_copyright_lindidiaocha')
        }}
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        {{
          VITE_GLOB_APP_TECHINICAL_SUPPORT
            ? VITE_GLOB_APP_TECHINICAL_SUPPORT
            : t('sys.subject.bottom_support')
        }}
      </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);
  const setting = ref({});
  const monitor = ref({})
  const data = ref()

  async function getData() {
    const res: any = await getSpecialData();
    let result:any = []
    // 最大标题文字行数
    res?.forEach((item, index) => {
      // switch(item.title){
      //   case '系统管理':
      //     setting.value = item;
      //     break
      //   case '监测中心':
      //     monitor.value = item
      //     break
      //   case '数据中心':
      //     data.value = item
      //     break
      //   default:
         
      // }
       let useItem = {
            ...item,
            isHover: false,
          }
          result.push(useItem)
          if (Math.ceil(item.title.length / 6) > spanWrap.value) {
            spanWrap.value = Math.ceil(item.title.length / 6);
          }
    });
    list.value = result;
    loginUser.value = localStorage.getItem('fireUserLoginName');
  }

  // 跳转
  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_lindidiaocha/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 referenceWidth = 1920;
  const fotSize = ref(28);

  // 计算不同数量的选项卡的布局属性
  function getBoxBtnAttribute() {
    let box: any = [];
    box[0] = 0;
    box[1] = 440;
    box[2] = 700;
    box[3] = 1440;
    box[4] = 30;
    return box;
  }
  const updateWindowSize = () => {
    viewportWidth.value = window.innerWidth;
  };
  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_lindidiaocha/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;

    &_top {
      &_title {
        span {
          display: inline-flex;
          align-items: center;
          text-align: center;
          justify-content: center;
          width: 100%;

          font-family: Alimama ShuHeiTi;
          color: #ffffff;
          // text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
          background: linear-gradient(268deg, #f8fbff 0%, #ffffff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          color: transparent;
          font-weight: 900 !important;

          letter-spacing: 2px;
        }
      }

      &_currentTime {
        position: absolute;
        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;
          margin-right: 27px;

          div {
            margin-bottom: 2px;
          }
        }
        &_interval{
          width: 1px;
          height: 100%;
          background: linear-gradient(0deg, rgba(255,255,255,0.01), #FFFFFF, rgba(255,255,255,0));
          margin-right: 24px;
        }
        &_monitor{
          display: flex;
          align-items: center;
          cursor: pointer;
          &_icon{
            width: 20px;
            height: 20px;
            background-image: url('/public/subject/monitor_icon.png');
            margin-right: 9px;
          }
          &_span{
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 24px;
          }
        }
      }

      &_adminAndLogout {
        position: absolute;
        display: inline-flex;
        align-items: center;
        cursor: pointer;

        img {
          width: 18px;
          height: 18px;
        }

        .loginUser {
          display: inline-flex;
          align-items: center;
          text-align: center;
          justify-content: center;
          height: 14px;

          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 18px;
          color: #ffffff;
          line-height: 24px;
        }

        .line {
          position: relative;
          top: 0px;
          font-size: 18px;
          color: #ffffff;
          margin-right: 8px;
        }
        .dropdown-icon{
          width: 8px;
          height: 8px;
          background-image: url('/public/subject/dropdown_icon.png');
          background-size: 100% 100%;
          margin-right: 15px;
        }
      }
    }

    &_left {
      position: absolute;
      height: 93%;
      bottom: 10px;
      left: 10px;
    }

    &_right {
      position: absolute;
      height: 93%;
      bottom: 10px;
      right: 10px;
    }

    &_box {
      display: flex;
      position: relative;
      height: calc(100%);

      &_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;
          display: block;
          transition: all 0.3s ease;
          cursor: pointer;
          align-items: center;
          text-align: center;
          justify-content: center;

          &:hover &_span {
            font-family: Alimama ShuHeiTi;
            font-weight: 900 !important;
            color: #ffffff !important;
            background: #ffffff;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
          }

          &:hover &_img {
            filter: brightness(150%);
          }

          &_span {
            display: inline-flex;
            align-items: center;
            text-align: center;
            justify-content: center;
            position: relative;

            // 字体样式
            font-family: Alimama ShuHeiTi;
            font-weight: bold;
            font-size: 23px;
            color: #ffffff;
            line-height: 15px;
            // text-shadow: 0px 2px 6px rgba(10, 30, 52, 0.48);
            background: linear-gradient(0deg, #5db1fc 0%, #e2ebff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
            font-weight: 900 !important;
          }
        }
      }
    }

    &_bottom {
      span {
        position: absolute;
        bottom: 10px;
        left: calc(50% - 660px / 2);
        width: 660px;
        height: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;
      }

      img {
        position: absolute;
        width: 100%;
        bottom: 0px;
        height: 57px;
      }
    }
  }
</style>
<style lang="scss">
.subject-right-menu-list{
  .button-item{
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    line-height: 24px;
    display: flex;
    .button-icon{
      width: 20px;
      height: 20px;
      margin-right: 9px;
    }
    .monitor-center-icon{
      background-image: url('/public/subject/monitor_center.png');
      background-size: 100% 100%;
    }
    .data-center-icon{
      background-image: url('/public/subject/data_center.png');
      background-size: 100% 100%;
    }
  }
  .ant-dropdown-menu-item:hover{
    background-color: rgba(42, 144, 241, 0.1) !important;
    .button-item{
      color: #2A90F1;
      .monitor-center-icon{
        background-image: url('/public/subject/monitor_center_hover.png');
      }
      .data-center-icon{
        background-image: url('/public/subject/data_center_hover.png');
      }
    }
  }
}
</style>
