<template>
  <div class="screen-header-container">
    <div class="screen-title">
      <img src="/statistical/logo.png" alt="" /> {{ t('sys.subject.header_title') }}
    </div>
    <span class="screen-currentTime">
      <span class="time">{{ currentTime }}</span>
      &nbsp; &nbsp; &nbsp;
      <span class="weather">{{ Weather }}</span>
    </span>
    <div class="left-category-container">
      <div
        class="category-item"
        v-for="(item, index) in left_categorys"
        :key="index"
        :style="{
          left: `${-(index * 26)}px`,
          'background-image': item.hovered
            ? `url(/statistical/category-left-active.png)`
            : `url(/statistical/category-left.png)`,
        }"
        @click="getHome(item)"
        @mouseover="item.hovered = true"
        @mouseout="item.hovered = false"
      >
        {{ item.title }}
      </div>
    </div>
    <div class="right_category-container">
      <div
        class="category-item"
        v-for="(item, index) in right_categorys"
        :key="index"
        :style="{
          left: `${-(index * 26 - 55)}px`,
          'background-image': item.hovered
            ? `url(/statistical/category-right-active.png)`
            : `url(/statistical/category-right.png)`,
        }"
        @click="getHome(item)"
        @mouseover="item.hovered = true"
        @mouseout="item.hovered = false"
      >
        {{ item.title }}
      </div>
    </div>
    <div class="user-info" style="z-index: 9999">
      <span style="color: #325e95">{{ fireUserLoginName }}</span>
      &nbsp;
      <span style="color: #ddd" @click="logout">退出</span>
    </div>
  </div>
  <div class="right_category-container">
    <div
      v-for="(item, index) in right_categorys"
      :key="item.id"
      class="category-item"
      :style="{
        left: `${-(index * 26)}px`,
        'background-image': item.hovered
          ? `url(/statistical/category-right-active.png)`
          : `url(/statistical/category-right.png)`,
      }"
      @click="getHome(item)"
      @mouseover="item.hovered = true"
      @mouseout="item.hovered = false"
    >
      {{ item.title }}
    </div>
  </div>
  <div class="user-info" style="z-index: 9999">
    <span style="color: #325e95">{{ fireUserLoginName }}</span>
    &nbsp;&nbsp;&nbsp;
    <span style="color: #ddd" @click="logout">退出</span>
  </div>
</template>
<script lang="ts" setup>
  import { ref, defineEmits, onMounted, onUnmounted, watchEffect, h } from 'vue';
  import axios from 'axios';
  import dayjs from 'dayjs';
  import { useI18n } from '@/hooks/web/useI18n';
  const { t } = useI18n();
  import { message } from 'ant-design-vue';
  import { getSpecialData } from '@/api/demo/system';
  import { useRouter } from 'vue-router';
  import { PageEnum } from '@/enums/pageEnum';
  import { useUserStore } from '@/store/modules/user';
  const userStore = useUserStore();
  const router = useRouter();
  import { useMessage } from '@/hooks/web/useMessage';
  import { useMultipleTabStore } from '@/store/modules/multipleTab';
  const { createConfirm } = useMessage();

  // 上方菜单
  const left_categorys = ref([]);
  const right_categorys = ref([]);
  async function getMenu() {
    const res: any = await getSpecialData();
    console.log('res123', res);

    // 综合监管
    let category: any = {
      title: '综合监管',
      isDevelop: false,
      hovered: false,
    };
    left_categorys.value?.push(category);
    res?.forEach((item, index) => {
      if (index < 2) {
        // 违法用地、非法采矿
        item.hovered = false;
        left_categorys.value?.push(item);
      } else if (index >= 2 && index < 5) {
        // 重点问题、耕地非粮化、巡察审计
        item.hovered = false;
        right_categorys.value?.push(item);
      }
    });
  }

  // 登陆用户
  const fireUserLoginName = ref(localStorage.getItem('fireUserLoginName'));
  function getFireUserLoginName() {
    fireUserLoginName.value = localStorage.getItem('fireUserLoginName')
      ? localStorage.getItem('fireUserLoginName')
      : '';
  }

  const tabStore = useMultipleTabStore();

  function logout() {
    createConfirm({
      iconType: 'warning',
      title: () => h('span', t('sys.navigation.logoutTip')),
      content: () => h('span', t('sys.navigation.logoutMessage')),
      onOk: async () => {
        tabStore.resetState();
        await router.replace(PageEnum.SUBJECT_HOME);
      },
    });
  }
  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);
    }
  }

  // 时间和天气
  const currentTime = ref(dayjs().locale('zh-cn').format('YYYY年M月D日 dddd HH:mm:ss'));
  const Weather = ref('');
  async function getWeather() {
    try {
      // 百度国内天气查询API
      const response = await axios.get('https://api.map.baidu.com/weather/v1/', {
        params: {
          district_id: 371300,
          data_type: 'all',
          ak: 'qbMvuMbWe1fJnOBNLJFsjoeHC3wfWkoB',
        },
        timeout: 15000,
      });
      Weather.value = response?.result?.now?.text;
    } catch (error) {
      // 备用
      // http://www.tianqiapi.com/index/doc?version=v63
      // 若次数试用用尽，注册账号后，切换appid和appsecret即可
      axios({
        method: 'get',
        url: `http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
      }).then((res) => {
        Weather.value = res.data.wea;
      });
    }
  }

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

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

  onUnmounted(() => {
    updateTime();
  });

  onMounted(() => {
    getWeather();
    getMenu();
    getFireUserLoginName();
  });
</script>

<style lang="less" scoped>
  .screen-header-container {
    width: 100%;
    height: 100px;
    // background-image: url('/statistical/header.png');
    // background-size: 100% 96px;
    background:
      // linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0) 100%)
      //   no-repeat top left / 100% 90px,
      url('/statistical/mask.png') no-repeat top left / 100% 100px,
      url('/statistical/header.png') no-repeat top left / 100% 96px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 3;
    height: 94px;
    .screen-title {
      width: 682px;
      // height: 96px;
      line-height: 90px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      font-size: 45px;
      color: #8be5ee;
      background: linear-gradient(0deg, #c6f3ff 0%, #f3feff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0px auto;
      text-align: center;
      img {
        position: relative;
        top: -5px;
      }
    }

    .screen-currentTime {
      position: relative;
      left: 50px;
      top: -60px;

      width: 344px;
      height: 14px;
      font-family: DengXian;
      font-weight: 400;
      font-size: 14px;
      color: #8bd8ff;
      line-height: 3px;
      font-style: italic;
      display: flex;
      align-items: center;
    }
    .time,
    .weather {
      display: inline-block;
    }
    .separator {
      margin: 0 50px;
    }
    .left-category-container {
      position: absolute;
      top: 50px;
      left: 50%;
      transform: translate(calc(-50% - 570px), 0);
      .category-item {
        float: left;
        width: 138px;
        height: 32px;
        font-size: 14px;
        line-height: 32px;
        text-align: center;
        background-image: url('/statistical/category-left.png');
        background-size: 138px 32px;
        color: #fff;
        position: relative;
        cursor: pointer;
      }
    }
    .right_category-container {
      position: absolute;
      top: 50px;
      right: 50%;
      transform: translate(calc(50% + 570px), 0);
      .category-item {
        float: left;
        width: 138px;
        height: 32px;
        font-size: 14px;
        line-height: 32px;
        text-align: center;
        background-image: url('/statistical/category-right.png');
        background-size: 138px 32px;
        color: #fff;
        cursor: pointer;
        position: relative;
      }
    }

    .user-info {
      width: 120px;
      color: #e1e1e1;
      position: absolute;
      top: 48px;
      right: 50px;
      font-size: 14px;
      z-index: 9;
      &:hover {
        cursor: pointer;
        color: #8be5ee;
      }
    }
  }
</style>
