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

import {cryptoEncrypt} from '@/utils/cryptojs'

import {useNavStore} from '@/store/nav'

const softwareSystemList = window.softwareSystemList

const navStore = useNavStore()

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

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

const swiperWidth = ref(1300)
const swiperHeight = ref(800)

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"
      :show-pagination="false"
      :auto-play="false"
      :source-width="swiperWidth"
      :source-height="swiperHeight"
      :showHover="false"
    >
      <template #default="{isActive}">
        <div class="content flex j-c a-c wrap">
          <div v-for="list in softwareSystemList" :key="list.id" class="list" @click="titleClick(list)">
            <div class="top">
              <div class="title">{{ list.title }}</div>
            </div>
            <div class="line"></div>
            <img class="img" :src="`./static/images/${list.imgUrl}`" :class="{active: isActive}" />
          </div>
        </div>
      </template>
    </Swiper>
  </div>
</template>

<style lang="scss" scoped>
.content {
  height: 100%;
  .list {
    margin-top: 60px;
    margin: 0 15px;
    width: 400px;
    transition: all 0.3s ease;
    border-radius: 8px;
    cursor: pointer;
    &:hover {
      transform: translateY(-50px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
  }
  .top {
    border-radius: 8px 8px 0 0;
    background-color: #0389ff;
    color: #fff;
    padding: 15px 0;
  }

  .line {
    width: 100%;
    height: 2px;
    background-color: $black;
  }
  .img {
    width: 100%;
    height: auto;
  }
}
</style>
