<template>
  <div class="page">
    <h-navbar title="Promoções" :handleBack="bank"/>
    <div class="page-body">
      <div
        class="img-box"
        v-for="(item, index) in list"
        :key="index"
        @click="openLink(item)"
      >
        <van-image :src="getImage(item.displayImg)" />
        <div class="btn-link">
          <div>{{ item.title }}</div>
          <h-img type="local" width=".8rem" src="base/icon_gengduo.png" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed } from "vue";
import { gameListStore } from "@/stores/modules/game-list";
import { getImage } from "@/utils";
import { useRouter } from "vue-router";
import storage, { actions } from "@/utils/storage";

const router = useRouter();
const gameStore = gameListStore();
const list = computed(() => {
  return [...gameStore.announcementData.sort((i: any, j: any) => i.sort - j.sort)];
});
const bank = () => {
  router.push({
    path:"/",
  });
}
const openLink = (item: any) => {
  storage.setSessionStorage(actions.AD_ID,item.adId)
  router.push({
    path:"/details",
  });
  // let reg = RegExp(/http/);
  // if (reg.test(item.url)) {
  //   window.open(item.url);
  // } else {
  //   router.push("/details");
  // }
};
</script>
<style lang="scss" scoped>
.img-box {
  overflow: hidden;
  margin-bottom: 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  .btn-link {
    padding: 0.2rem 0;
    height: 1.4rem;
    width: 100%;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    overflow: hidden;
    background: linear-gradient(to bottom, #057060, #054843, #01292a);
    display: flex;
    align-items: center;
    justify-content: space-around;
    > div {
      width: 70%;
      text-align: left;
      font-size: 0.4rem;
      background: linear-gradient(to bottom, #54CBF5, #2CB9F5,#03ADFF);
      -webkit-background-clip: text;
      color: transparent;
      font-weight: 600;
    }
  }
}
</style>
