<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 {cryptoEncrypt} from '@/utils/cryptojs'

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

const hardwareSystemList = window.hardwareSystemList

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

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

onMounted(() => {})

const currentPage = ref(1)

// 点击标题跳转详情页
function titleClick(item) {
  router.push({
    path: '/product/detail',
    query: {type: cryptoEncrypt(JSON.stringify(item))},
  })
}
</script>

<template>
  <div class="page">
    <Banner class="banner" img="banner/product.png" />
    <Swiper
      id="one"
      :title="title"
      v-model="currentPage"
      :data="hardwareSystemList"
      :page-size="3"
      :show-pagination="false"
      :auto-play="false"
      :source-width="300"
      :source-height="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>
          <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: #0389ff;
    color: #fff;
    letter-spacing: 1px;
    padding: 10px 0;
  }

  .img {
    width: 300px;
    height: 300px;
  }
}
</style>
