<template>
  <div class="subject">
    <div class="subject_header">
      <div class="subject_header_title">
        <span>临沂市自然资源无人机全域巡查平台</span>
      </div>
      <div class="logout" title="退出登录">
        <Icon
          style="font-size: 30px; color: #fff; cursor: pointer"
          icon="ion:power-outline"
          @click="handleLoginOut()"
        />
      </div>
    </div>
    <div class="subject_title">
      <div>
        <span>欢迎登录，临沂市自然资源无人机全域巡查平台</span>
      </div>
    </div>
    <div class="subject_box">
      <div class="subject_box_btn" ref="contentArea">
        <div
          v-for="(item, index) in list"
          :key="item.id"
          class="subject_box_btn_div"
          @click="getHome(item)"
        >
          <img
            class="subject_box_btn_div_bg"
            src="/subject/subject_btn_1.png"
            v-if="index % 2 == 0"
          />
          <img class="subject_box_btn_div_bg" src="/subject/subject_btn_2.png" v-else />
          <img class="subject_box_btn_div_url" :src="getImageUrl(item.imgUrl)" />
          <span
            class="subject_box_btn_div_span"
            :style="{ height: `${23 * spanWrap}px` }"
            v-html="renderedTitle(item.title)"
          />
          <img
            class="subject_box_btn_div_line"
            src="/subject/subject_line.png"
            :style="{
              top: `${12 * getWrap(item.title) - 323}px`,
            }"
          />
        </div>
      </div>
      <div class="subject_box_overflow">
        <!-- <Icon
          style="font-size: 40px"
          class="subject_box_overflow_icon1"
          icon="ant-design:right-circle-outlined"
          @click="scrollToTarget"
        />
        <CaretRightOutlined />
        <Icon
          style="font-size: 40px"
          class="subject_box_overflow_icon2"
          icon="ant-design:left-circle-outlined"
          @click="scrollToTarget"
        /> -->
      </div>
    </div>
    <div class="subject_bottom">
      <span>
        版权所有：临沂市自然资源和规划局&nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
        技术⽀持：山东慧创信息科技有限公司&nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
        系统版本：20240705
      </span>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { useUserStore } from '@/store/modules/user';
  import { getSpecialData } from '@/api/demo/system';
  import { onMounted, ref } from 'vue';
  import Icon from '@/components/Icon/Icon.vue';

  const contentArea = ref(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 / 10) > spanWrap.value) {
        spanWrap.value = Math.ceil(item.title.length / 10);
      }
    });
    list.value = res;
  }
  onMounted(() => {
    getData();
  });
  const scrollToTarget = () => {
    if (!contentArea.value) return;
    // 让我们假设目标元素是items数组中的第三个元素
    // console.log(102, contentArea.value.children);
    // const targetElement = contentArea.value.children[2];
    // targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  // 跳转
  async function getHome(item) {
    console.log(item);
    if (item.isExternal) {
      window.location.href = item.linkOrApi;
    } else {
      window.location.href =
        window.location.href.slice(0, window.location.href.indexOf('#')) + '#' + item.linkOrApi;
    }
    // userStore.setSubject(item.linkOrApi);
  }
  // 获取图片地址
  function getImageUrl(imgUrl) {
    if (imgUrl) {
      return 'http://192.168.10.102:9023' + '/' + imgUrl;
    } else {
      return '/subject/subject_default.png';
    }
  }
  // 标题换行
  function renderedTitle(name) {
    return name.replace(/\s/g, '<br />');
  }
  // 标题的行数
  function getWrap(name) {
    return Math.ceil(name.length / 10);
  }
  // 退出系统
  function handleLoginOut() {
    userStore.confirmLoginOut();
  }
</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%;

    &_header {
      background-image: url('/subject/subject_header.png');
      background-repeat: no-repeat;
      background-size: cover;
      height: 82px;
      width: 100%;

      &_title {
        position: absolute;
        top: 19px;
        left: calc(50% - 640px / 2);

        span {
          width: 592px;
          height: 43px;
          font-family: 068-SSZhengYaTi;
          font-weight: 400;
          font-size: 40px;
          color: #ffffff;
        }
      }
    }

    &_title {
      background-image: url('/subject/subject_title.png');
      position: absolute;
      top: 112px;
      left: calc(50% - 756px / 2);
      height: 133px;
      width: 800px;

      span {
        position: absolute;
        top: 49px;
        align-items: center;
        justify-content: center;
        width: 756px;
        height: 37px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 36px;
        color: #ffffff;
        line-height: 28px;
      }
    }

    &_box {
      display: flex;

      &_btn {
        position: relative;
        top: 340px;
        left: 100px;
        height: 400px;
        width: 1720px;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;

        &_div {
          margin-right: 20px;
          width: 225px;
          height: 324px;

          transition: all 0.3s ease;
          padding: 10px;

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

          &_bg {
            height: 324px;
          }

          &_url {
            position: relative;
            top: -300px;
            left: 17px;
          }

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

          &_span {
            display: inline-flex;
            align-items: center;
            text-align: center;
            justify-content: center;
            position: relative;
            top: -300px;
            left: 15px;
            width: 210px;
            height: 4px;
            // 字体样式
            font-size: 20px;

            font-family: 068-SSZhengYaTi;
            color: #ffffff;
            text-shadow: 0px 2px 10px rgba(10, 30, 52, 0.48);
            background: linear-gradient(0deg, #6da7ff 0%, #e2ebff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
            font-weight: bold !important;
          }
        }
      }

      &_overflow {
        position: relative;
        top: 340px;
        left: 100px;
        height: 300px;
        width: 100px;

        &_icon1 {
          color: #fff;
          cursor: pointer;
          position: relative;
          top: 100px;
          left: 20px;
        }

        &_icon2 {
          color: #fff;
          cursor: pointer;
          position: relative;
          top: 200px;
          left: -20px;
        }
      }
    }

    &_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);
    }
  }
  .logout {
    position: absolute;
    right: 100px;
    top: 30px;
  }
</style>
