<template>
  <div class="onepic text-#fff" ref="appRef">
    <div class="h-22 text-center titleBg grid grid-cols-3">
      <div class="text-[#00C9D8] grid grid-cols-3">
        <span></span>
        <div>
          <img :src="filterWeather(dataWwather?.text)" />
          <span class="mx-2">{{ dataWwather?.text }}</span>
          <span>{{ dataWwather?.temp }}℃</span>
        </div>
        <span></span>
      </div>
      <div class="text-3xl mt-5 propect-title"> 广东省建设用地污染地块信息系统</div>
      <div class="grid grid-cols-4 mt-5">
        <span></span>
        <span class="text-[#00C9D8] text-base">{{ date }} 星期{{ week }}</span>
        <span
          class="text-[#D8F0FF] text-2xl xf"
          style="
            text-shadow:
              0px 0px 10px #00c9d8,
              0px 0px 4px #00c9d8;
          "
          >{{ time }}
        </span>
        <span class="fullbtn ml-4 w-15 h-7 leading-6 cursor-pointer" @click="FullScreen">{{ !full_Screen ? '全屏' : '退出' }}</span>
      </div>
    </div>
    <div class="flex w-full">
      <div class="w-2/8">
        <Region @changes="change" />
        <Industry class="mt-5" v-if="show" :curnt="curnt" />
        <!-- <Soil class="mt-10" />
            <Water class="mt-10" /> -->
      </div>
      <div class="w-4/8">
        <Map />
        <Soil class="mt-2" />
      </div>
      <div class="w-2/8">
        <DkNum />
        <Fxgkxf class="mt-5" />
        <FxpgNum class="mt-5" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { useIndex } from '@/utils/utilsDramAdmin';
  import { getAction } from '@/api/mange';
  import dayjs from 'dayjs';
  import Region from './components/region.vue';
  import Industry from './components/industry.vue';

  // import Water from './components/water.vue';
  // 右侧
  import DkNum from './components/DkNum.vue';
  import FxpgNum from './components/FxpgNum.vue';
  import Fxgkxf from './components/Fxgkxf.vue';
  //中间
  import Map from './components/map/index.vue';
  import Soil from './components/soil.vue';
  import img1 from '@/assets/images/onePic/qing.png';
  import img2 from '@/assets/images/onePic/yin.png';
  import img3 from '@/assets/images/onePic/lei.png';
  import img4 from '@/assets/images/onePic/xue.png';
  import img5 from '@/assets/images/onePic/yu.png';
  import img6 from '@/assets/images/onePic/yun.png';
  import img7 from '@/assets/images/onePic/wu.png';
  import img8 from '@/assets/images/onePic/shachen.png';
  import img9 from '@/assets/images/onePic/qing.png';

  const appRef = ref<any>();
  const date = ref('2014.01.18');
  const week = ref('星期四');
  const time = ref('10:49:59');
  const dataWwather = ref({ text: '', temp: '' });
  const full_Screen = ref(false);
  const curnt = ref(0);
  const show = ref(true);
  function getTime() {
    date.value = dayjs().format('YYYY-MM-DD');
    week.value = dayjs().format('dd');
    time.value = dayjs().format('HH:mm:ss');
  }
  setInterval(() => {
    getTime();
  }, 1000);

  function filterWeather(val) {
    if (val == '晴') {
      return img1;
    } else if (val == '阴') {
      return img2;
    } else if (/雷/.test(val)) {
      return img3;
    } else if (/雪/.test(val)) {
      return img4;
    } else if (/雨/.test(val)) {
      return img5;
    } else if (/云/.test(val)) {
      return img6;
    } else if (/雾/.test(val)) {
      return img7;
    } else if (/沙/.test(val)) {
      return img8;
    } else {
      return img9;
    }
  }

  function getTianQi() {
    getAction('https://devapi.qweather.com/v7/weather/now', {
      location: '101280101', // 郑州市id
      key: '0a4535e4dffe4a6190e6432dde78899d',
    }).then((res: any) => {
      console.log(res, 'res');
      dataWwather.value = res.data.now;
    });
  }

  getTianQi();
  const setScale = () => {
    const { calcRate, windowDraw } = useIndex(appRef.value, 1920, 1080);
    calcRate();
    windowDraw();
  };
  // 测试的自适应高度

  onMounted(() => {
    setScale();
  });

  function FullScreen() {
    const element = appRef.value;
    if (document.fullscreenElement) {
      full_Screen.value = false;

      document.exitFullscreen(); // 如果已经处于全屏状态，则退出全屏模式
    } else {
      if (element?.requestFullscreen) {
        element.requestFullscreen();
        full_Screen.value = true;
      } else if (element?.mozRequestFullScreen) {
        /* Firefox */
        full_Screen.value = true;
        element.mozRequestFullScreen();
      } else if (element?.webkitRequestFullscreen) {
        /* Chrome、Safari 和 Opera */
        full_Screen.value = true;
        element?.webkitRequestFullscreen();
      } else if (element?.msRequestFullscreen) {
        /* IE/Edge */
        full_Screen.value = true;
        element?.msRequestFullscreen();
      }
    }
  }

  function change(v) {
    curnt.value = v;
    show.value = false;
    setTimeout(() => {
      show.value = true;
    }, 100);
  }
</script>
<style lang="less" scoped>
  .onepic {
    overflow: hidden;
    width: 1920px;
    height: 1019px;
    transform: scale(var(--scale)) translate(-50%, -50%);
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    top: 49%;
    // transition: 0.3s;
    background: url('@/assets/images/onePic/zhezhao_bg@2x.png') no-repeat;
    background-size: 100% 100%;
    background-position: center;
    background-color: #020711;

    .titleBg {
      background: url('@/assets/images/onePic/titleBg.png') no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
    .fullbtn {
      background: linear-gradient(180deg, rgba(15, 74, 159, 0) 0%, #00c9d8 100%);
      border-radius: 0px 0px 0px 0px;
      border: 1px solid rgba(30, 123, 214, 0.8);
      font-size: 12px !important;
    }
  }

  @font-face {
    font-family: 'zcool-gdh-Medium';
    src: url('/@/assets/font/zcoo.TTF');
  }
  .xf {
    font-family: 'zcool-gdh-Medium';
  }
  @font-face {
    font-family: 'pingfang';
    src: url('/@/assets/font/苹方黑体-中黑-简.ttf');
  }
  .propect-title {
    font-family: 'pingfang';
  }
</style>
