<template>
  <div class="data-home-index">
    <template v-for="(n, index) in homeList" :key="n.name">
      <div class="home-enter-item" :style="n.style" @click="itemClick(index)">
        <div class="name" :style="n.nameStyle">
          <span :style="n.spanStyle">{{ n.title || '--' }}</span>
        </div>
        <div class="img-icon" :style="n.imgstyle"><img :src="getAssetsFile(n.img)" /></div>
      </div>
    </template>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { getAssetsFile } from '@/utils';
import { useRouter } from 'vue-router';
const router = useRouter();
let rollDataList = reactive([
  { title: '勐腊镇', value: 533.1 },
  { title: '孟定镇', value: 1069.2 },
  { title: '孟永镇', value: 411.8 },
  { title: '耿马镇', value: 429.4 },
  { title: '大兴乡', value: 162.7 },
  { title: '勐简乡', value: 2309.9 },
  // 更多项...
]);

let homeList = reactive([
  {
    title: '产业运营管理后台',
    name: 'operationM',
    linkType: 0,
    url: '',
    img: 'images/vsualized/home1.png',
    style: 'left: 21%;bottom:300px;',
    imgstyle: 'width:100px;height:100px',
    nameStyle: 'padding: 0 16px;margin: 16px 0;',
    spanStyle: 'font-size: 20px;',
  },
  {
    title: '产业运营平台',
    name: 'operation',
    linkType: 0,
    url: '',
    img: 'images/vsualized/home2.png',
    style: 'left: 22%;bottom: 24px;',
    imgstyle: 'width:160px;height:160px',
    nameStyle: 'padding: 0 22px;margin: 24px 0;border-radius: 16px;',
    spanStyle: 'font-size: 28px;line-height: 66px',
  },
  {
    title: '数字大屏',
    name: 'dataV',
    linkType: 1,
    url: '/new-digital-agriculture-screen/v2/land',
    img: 'images/vsualized/home3.png',
    style: 'right: 23%;bottom:300px;',
    imgstyle: 'width:100px;height:100px',
    nameStyle: 'padding: 0 16px;margin: 16px 0;',
    spanStyle: 'font-size: 20px;',
  },
  {
    title: '政务云平台',
    name: 'gov',
    linkType: 0,
    url: '',
    img: 'images/vsualized/home4.png',
    style: 'right: 24%;bottom: 24px;',
    imgstyle: 'width:160px;height:160px',
    nameStyle: 'padding: 0 22px;margin: 24px 0;border-radius: 16px;',
    spanStyle: 'font-size: 28px;line-height: 66px',
  },
  // 更多项...
]);

const itemClick = (index) => {
  if (index != undefined) {
    let val = homeList[index] || null;
    if (val && val.url != '') {
      if (val.linkType == 1) {
        // router.push({ name: val.url });
        router.push({ path: val.url });
      }
    }
  }
};

// });
</script>
<style lang="scss" scoped>
.data-home-index {
  height: 100%;
  width: 100%;
  .home-enter-item {
    position: fixed;
    z-index: 2;
    text-align: center;
    padding: 16px 0;
    cursor: pointer;

    @keyframes shake {
      0% {
        transform: translateX(0) rotate(0);
      }
      25% {
        transform: translateX(-15px) rotate(-3deg);
      }
      50% {
        transform: translateX(12px) rotate(2deg);
      }
      75% {
        transform: translateX(-6px) rotate(1deg);
      }
    }
    .name {
      color: #fff;
      font-family: 'JinBuTi';
      border: 2px solid #01fefd;
      border-radius: 8px;
      backdrop-filter: blur(8px);
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(180deg, #01fefd, rgba(1, 254, 253, 0));
        opacity: 0.16; // 仅背景透明
        z-index: -1; // 将背景置于底层
        border-radius: 6px; // 比主元素小，避免覆盖边框
      }
      span {
        line-height: 40px;
        text-shadow: 0px 4px 8px 0px #01fefd;
      }
    }
    .img-icon {
      margin: auto;
      img {
        height: 100%;
        width: 100%;
        animation: shake 5s /* 持续时间 */ ease-in-out /* 缓动函数 */ infinite; /* 无限循环 */
      }
    }
  }
}
</style>
