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

import {findLabelByUrl} from '@/utils'

import {useNavStore} from '@/store/nav'
const navStore = useNavStore()

import {useRouter} from 'vue-router'
const router = useRouter()

const title = computed(() => findLabelByUrl(window.nav.header, navStore.navIndex))

onMounted(() => {})

const currentPage = ref(1)

const swiperItem = ref([
  {id: 1, title: 'RGRID-Lite', subTitle: '无人机Remote ID远程识别设备', imgUrl: 'product/detail/6.png'},
  {id: 2, title: 'RGRID-Ped', subTitle: '无人机Remote ID远程识别模块', imgUrl: 'product/detail/1.png'},
  {id: 3, title: 'RGRID-Mob', subTitle: '无人机Remote ID远程识别手持设备', imgUrl: 'product/detail/4.png'},
])

// 点击标题跳转详情页
function titleClick(item) {
  console.log('title clicked:', item)
  router.push({
    path: '/product/detail',
    query: {
      type: 'monitorSystem',
      id: item.id,
      title: item.title,
      subTitle: item.subTitle,
      imgUrl: item.imgUrl,
    },
  })
}
</script>

<template>
  <div class="page">
    <Banner class="banner" img="banner/product.png" />
    <Swiper
      id="one"
      :title="title"
      v-model="currentPage"
      :data="swiperItem"
      :page-size="3"
      :show-pagination="false"
      :auto-play="false"
      :sourceHeight="400"
      :source-gap="80"
    >
      <template #default="{item, index, isActive}">
        <div class="content" @click="titleClick(item)">
          <div class="top">
            <div class="title">{{ item.title }}</div>
            <div class="sub-title">{{ item.subTitle }}</div>
          </div>
          <div class="line"></div>
          <img :src="`./static/images/${item.imgUrl}`" class="img" :class="{active: isActive}" />
        </div>
      </template>
    </Swiper>

    <Project />
  </div>
</template>

<style lang="scss" scoped>
.content {
  height: 100%;
  .top {
    background-color: #eee;
    padding: 10px 0;
  }
  .line {
    width: 100%;
    height: 2px;
    background-color: $black;
  }
  .img {
    width: 300px;
    height: 300px;
  }
}
</style>
