<template>
  <div v-if="bannerList?.length" class="mt-34px w-100% flex items-center justify-between">
    <el-image
      v-for="(item, index) in bannerList"
      :key="index"
      :src="item.content"
      alt=""
      srcset=""
      fit="cover"
      class="h-180px w-460px"
      :class="{
        'cursor-pointer': item.url,
      }"
      @click="item.url && handleClick(item.url)"
    >
      <template #placeholder>
        <div class="image-slot">Loading<span class="dot">...</span></div>
      </template>
    </el-image>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'

  import { getSettingPage } from '@/api/home/index'
  import { PageResultIndexSettingRespVO } from '@/api/home/type'

  const pageReq = reactive({
    type: 2,
    status: 0,
  })

  const bannerList = ref<PageResultIndexSettingRespVO[]>([])
  const getBanner = async () => {
    const res = await getSettingPage(pageReq)
    if (res.code === 0) {
      bannerList.value = res.data
    }
  }
  getBanner()

  const handleClick = (url: string) => {
    window.open(url, '_blank')
  }
</script>

<style scoped></style>
