<template>
  <a-row :gutter="24">
    <a-col class="gutter-row" :span="24">
      <div class="bg-#fff b-rd-10px py-24px px-32px text-center">
        <div class="flex justify-between mb-14px">
          <div class="text-22px fw-500 text-#223354">Resource Recommendation</div>
          <div class="text-14px text-#767676 flex items-center cursor-pointer">
            Details
            <i-custom-arrow_right class="w-16px h-16px" />
          </div>
        </div>
        <a-divider class="!my-0" />
        <div class="mt-50px">
          <div class="w-full mx-auto pos-relative px-96px">
            <div
              class="pos-absolute cursor-pointer left-10px top-50% transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
              @click="onClickLeft()"
            >
              <img src="@/assets/images/arrow_left.png" alt="" class="w-44px h-44px" srcset="" />
            </div>
            <div
              class="pos-absolute cursor-pointer right-10px top-50% transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
              @click="onClickRight()"
            >
              <img src="@/assets/images/arrow_right.png" alt="" class="w-44px h-44px" srcset="" />
            </div>
            <Swiper
              v-if="list.length"
              :slides-per-view="4"
              :space-between="60"
              :modules="modules"
              :loop="true"
              :navigation="false"
              :pagination="true"
              class="pos-relative !pb-20px"
              @swiper="onVerticalSwiper"
            >
              <SwiperSlide v-for="(item, index) in list" :key="index" class="slider-content b-rd-6px overflow-hidden bg-#fff">
                <img :src="item.img" alt="" class="w-100% object-scale-down" />
                <div class="px-20px py-16px text-left">
                  <div class="text-#1A1A1A text-16px mb-14px fw-500 line-clamp-1">{{ item.title }}</div>
                  <div class="text-14px text-#3D3D3D mb-20px line-clamp-2">{{ item.desc }}</div>
                  <div class="flex justify-end">
                    <div>
                      <a-button class="px-14px b-rd-16px text-primary b-primary">
                        <template #icon>
                          <DownloadOutlined />
                        </template>
                        Download
                      </a-button>
                      <a-button class="px-14px b-rd-16px ml-10px text-primary b-primary">
                        <template #icon>
                          <EyeOutlined />
                        </template>
                        View</a-button
                      >
                    </div>
                  </div>
                </div>
              </SwiperSlide>
            </Swiper>
            <div v-else class="flex justify-center items-center h-100%">
              <div class="text-center">
                <img src="@/assets/images/swiper_no_data.png" alt="" class="w-280px h-280px" />
                <div class="text-14px text-#767676">No data</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-col>
  </a-row>
</template>
  
  <script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/navigation'
import { DownloadOutlined, EyeOutlined } from '@ant-design/icons-vue'
import { columns, useGetData } from '../useGetData'

const modules = [Navigation, Pagination]
const list = ref<any>([
  //   {
  //     img: 'https://picsum.photos/360/200',
  //     title: 'Resource 1',
  //     desc: 'Resource 1 description',
  //   },
  //   {
  //     img: 'https://picsum.photos/360/200',
  //     title: 'Resource 2',
  //     desc: 'Resource 2 description',
  //   },
  //   {
  //     img: 'https://picsum.photos/360/200',
  //     title: 'Resource 1',
  //     desc: 'Resource 1 description',
  //   },
  //   {
  //     img: 'https://picsum.photos/360/200',
  //     title: 'Resource 2',
  //     desc: 'Resource 2 description',
  //   },
  //   {
  //     img: 'https://picsum.photos/360/200',
  //     title: 'Resource 1',
  //     desc: 'Resource 1 description',
  //   },
  //   {
  //     img: 'https://picsum.photos/360/200',
  //     title: 'Resource 2',
  //     desc: 'Resource 2 description',
  //   },
])
const swiperVertical = ref<any>(null)

const { clientList, orderList, clientLoading, orderLoading } = useGetData()
async function getResourceList() {
  try {
    const params = {
      pageNo: 1,
      pageSize: 8,
    }
    // const data: any = await getResourceListApi(params)
    // list.value = data.records
  } catch (error) {
    console.log('error', error)
  }
}

function onVerticalSwiper(swiper: any) {
  swiperVertical.value = swiper
}
function onClickLeft() {
  swiperVertical.value.slidePrev()
}
function onClickRight() {
  swiperVertical.value.slideNext()
}
</script>
  <style scoped lang="less">
.slider-content {
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
}
</style>
  