<template>
  <div class="Advertisement-box">
    <ClientOnly>
      <div class="custom-home-swiper">
        <t-swiper
          class="tdesign-demo-block--swiper"
          :duration="300"
          :interval="2000"
        >
          <t-swiper-item v-for="item in picList.list" :key="item">
            <img
              :src="item.picture_link"
              alt=""
              class="img"
              @click="goDetail(item)"
            />
          </t-swiper-item>
        </t-swiper>
      </div>
    </ClientOnly>
  </div>
</template>

<script lang="ts" setup>
const picList = reactive({
  list: [],
});
const goDetail = (item: any) => {
  if (item.goto_link) {
    window.open(item.goto_link);
  }
};
const getPicList = async () => {
  try {
    let res: any = await request.get('/v1/picture');
    picList.list = res;
  } catch (e) {
    console.log(e);
  }
};
onBeforeMount(() => {
  getPicList();
});
</script>

<style lang="less">
@import '@/style/flex.less';
.Advertisement-box {
  flex: 1;
  padding-left: 6px;
  .dj();
  box-sizing: border-box;
  .custom-home-swiper {
    .t-swiper {
      height: 100%;
      width: 100%;
      .img {
        height: 305px;
        max-width: 100%;
        min-width: 500px;
        border-radius: 12px;
        cursor: pointer;
      }
      .t-swiper__arrow {
        & > * {
          border-radius: 50%;
          border: 2px solid white;
          .t-icon {
            color: #287eff;
          }
        }
      }
    }
  }
}
</style>
