<script setup>
import Swiper from '@/components/Swiper/index.vue'
import {ref, onMounted} from 'vue'
onMounted(() => {})

// 资质证书
const certificateWidth = ref(1300)
const certificateHeight = ref(700)

const currentPage = ref(1)

const imgList = [
  {
    id: 1,
    list: [
      {id: 1, width: 290, height: 188, label: '智慧物流配送', img: 'product/1.png'},
      {id: 2, width: 210, height: 280, label: '城市低空交通管理', img: 'product/5.png'},
    ],
  },
  {
    id: 2,
    list: [
      {id: 2.1, width: 290, height: 188, label: '要地防控', img: 'product/2.png'},
      {id: 2.2, width: 210, height: 280, label: '区域低空监管组网', img: 'product/6.png'},
    ],
  },
  {
    id: 3,
    list: [
      {id: 3.1, width: 290, height: 188, label: '关键基础设施守护', img: 'product/3.png'},
      {id: 3.2, width: 210, height: 280, label: '大型活动保障', img: 'product/7.png'},
    ],
  },
  {
    id: 4,
    list: [
      {id: 4.1, width: 290, height: 188, label: '规模化无人机巡检', img: 'product/4.png'},
      {id: 4.2, width: 210, height: 280, label: '移动式低空安防', img: 'product/8.png'},
    ],
  },
]
</script>

<template>
  <div class="page">
    <Swiper
      id="certificate"
      title="应用案例"
      v-model="currentPage"
      :source-width="certificateWidth"
      :source-height="certificateHeight"
      :show-pagination="false"
      :auto-play="false"
      :showHover="false"
    >
      <template #default="{item, index, isActive}">
        <div class="certificate flex j-s" :class="{active: isActive}">
          <div v-for="list in imgList" :index="list.id" class="flex j-c wrap">
            <div v-for="(img, imgIndex) in list.list" :key="imgIndex">
              <div class="label">{{ img.label }}</div>
              <img
                :style="{
                  width: $fontSize(img.width) + 'px',
                  height: $fontSize(img.height) + 'px',
                  margin: `5px ${$fontSize(10)}px`,
                  cursor: 'pointer',
                }"
                :src="`./static/images/${img.img}`"
              />
            </div>
          </div>
        </div>
      </template>
    </Swiper>
  </div>
</template>

<style lang="scss" scoped>
#certificate {
  .certificate {
    width: 100%;
    height: 100%;
    .label {
      font-size: 20px;
    }
  }
}
</style>
