<script setup>
import Swiper from '@/components/Swiper/index.vue'
import {ref, onMounted} from 'vue'
import {cryptoEncrypt} from '@/utils/cryptojs'
import {useRouter} from 'vue-router'

const router = useRouter()
const swiperWidth = ref(400)
const swiperHeight = ref(400)
const currentPage = ref(1)
const videoLoaded = ref(true)
const list = [...window.softwareSystemList, ...window.hardwareSystemList]

onMounted(() => {})

function onVideoLoaded() {
  videoLoaded.value = false
}

function toUrl(item) {
  router.push({
    path: '/product/detail',
    query: {type: cryptoEncrypt(JSON.stringify(item))},
  })
}
</script>

<template>
  <div class="page" v-loading="videoLoaded">
    <div class="banner">
      <video autoplay muted loop @loadeddata="onVideoLoaded">
        <source src="/static/video/display.mp4" type="video/mp4" />
      </video>
      <div class="banner-link"><span>进入演示系统</span></div>
    </div>
    <Swiper
      id="home_swiper"
      title="产品体系"
      v-model="currentPage"
      :data="list"
      :page-size="3"
      :show-pagination="true"
      :source-width="swiperWidth"
      :source-height="swiperHeight"
      :auto-play="true"
    >
      <template #default="{item, index, isActive}">
        <div class="list" @click="toUrl(item)">
          <div class="top">
            <div class="title">{{ item.title }}</div>
          </div>
          <div class="card flex column a-c j-c" :class="{active: isActive}">
            <img :class="item.type === 'hardwareSystem' ? 'm-img' : 'r-img'" :src="`./static/images/${item.imgUrl}`" />
          </div>
        </div>
      </template>
    </Swiper>
  </div>
</template>

<style lang="scss" scoped>
.page {
  .placeholder {
    width: 100%;
    height: 100%;
  }
  .banner {
    width: 100%;
    height: 800px;
    position: relative;
    background-color: #333333;
    &-link {
      width: 174px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      position: absolute;
      top: 721px;
      left: 873px;
      border: 1px solid #1fe1ff;
      border-radius: 6px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s ease;
      &:hover {
        transform: scale(1.05);
      }
      span {
        font-family: 'PingFang SC';
        font-weight: 600;
        font-size: 20px;
        letter-spacing: 0.06em;
        color: $white;
      }
    }
    video {
      padding: 3px;
      width: 100%;
      height: auto;
      border-radius: 8px;
    }
  }

  .list {
    height: 100%;
    border: 1px solid #eee;
    .top {
      height: 50px;
      border-radius: 8px 8px 0 0;
      background-color: #0389ff;
      color: #fff;
      padding: 15px 0;
    }
    .card {
      height: calc(100% - 50px - 30px);
    }
    .r-img {
      width: 90%;
      height: auto;
    }
    .m-img {
      width: 70%;
      height: auto;
    }
  }
}
</style>
