<script setup>
import {ref, onMounted, getCurrentInstance} from 'vue'
import Swiper from '@/components/Swiper/index.vue'
import Banner from '@/components/Banner/index.vue'

const instance = getCurrentInstance()
const $fontSize = instance.appContext.config.globalProperties.$fontSize

// 关于燃谷
const aboutWidth = ref(1200)
const aboutHeight = ref(600)
const introduction =
  '燃谷科技成立于2023年，位于南京鼓楼万谷硅巷，秉承创新、质量和合作精神的低空领域技术创新公司，专注于低空安全监管、城市飞行服务和空间数据应用的企业。公司依托低空大数据、低空物联网、智能算法引擎、空间计算模型四个核心组件，自主研发数智底座，致力于物联网、空间计算领域，助力低空经济蓬勃发展。'

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

const currentPage = ref(1)

const imgList = [
  {
    id: 1,
    width: 290,
    height: 188,
    list: ['main/1.png', 'main/2.png', 'main/3.png', 'main/4.png'],
  },
  {
    id: 2,
    width: 210,
    height: 300,
    list: ['main/5.png', 'main/6.png', 'main/7.png', 'main/8.png', 'main/9.png'],
  },
  {
    id: 3,
    width: 210,
    height: 300,
    list: ['main/10.png', 'main/11.png', 'main/12.png', 'main/13.png', 'main/14.png'],
  },
  {
    id: 4,
    width: 210,
    height: 300,
    list: ['main/15.png', 'main/16.png', 'main/17.png', 'main/18.png', 'main/19.png'],
  },
  {
    id: 5,
    width: 210,
    height: 300,
    list: ['main/20.png', 'main/21.png'],
  },
]

onMounted(() => {})
</script>

<template>
  <div class="page">
    <Banner class="banner" img="banner/about.png" />
    <Swiper
      id="rangu"
      title="关于燃谷"
      v-model="currentPage"
      :source-width="aboutWidth"
      :source-height="aboutHeight"
      :show-pagination="false"
      :auto-play="false"
      :showHover="false"
    >
      <template #default="{item, index, isActive}">
        <div class="my-card flex j-s a-c" :class="{active: isActive}">
          <img src="/static/images/main/rangu.png" />
          <div class="label">
            {{ introduction }}
          </div>
        </div>
      </template>
    </Swiper>

    <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" :class="{active: isActive}">
          <div
            v-for="(list, listIdx) in imgList"
            :index="list.id"
            class="flex j-s a-c wrap"
            :class="{'last-row': listIdx === imgList.length - 1}"
          >
            <div v-for="(img, imgIndex) in list.list" :key="imgIndex">
              <img
                :style="{
                  width: $fontSize(list.width) + 'px',
                  height: $fontSize(list.height) + 'px',
                  margin: `5px ${$fontSize(10)}px`,
                  cursor: 'pointer',
                }"
                :src="`./static/images/${img}`"
              />
            </div>
          </div>
        </div>
      </template>
    </Swiper>
  </div>
</template>

<style lang="scss" scoped>
.my-card {
  width: 100%;
  height: 100%;
  img {
    width: 40%;
    height: auto;
  }
  .label {
    text-align: left;
    width: 40%;
    padding-right: 25px;
    font-family: 'PingFang SC';
    font-weight: 400;
    font-size: 20px;
    line-height: 50px;
  }
}

#certificate {
  margin-top: 60px;
  .certificate {
    width: 100%;
    height: 100%;
  }
  .last-row {
    justify-content: center !important;
  }
}
</style>
