<script setup>
import {ref, onMounted, shallowRef, watchEffect} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {cryptoDecrypt} from '@/utils/cryptojs.js'

const advantages = window.advantages

const route = useRoute()
const router = useRouter()

const query = JSON.parse(cryptoDecrypt(route.query.type))

const videoLoaded = ref(false)

onMounted(() => {
  videoLoaded.value = query.type !== 'softwareSystem' ? false : true
})

function onVideoLoaded() {
  videoLoaded.value = false
}

const toBack = () => {
  router.back()
}
</script>

<template>
  <div class="page flex column a-c" v-loading="videoLoaded">
    <h3 class="label">{{ query.title }} {{ query?.subTitle }}</h3>

    <!-- 硬件内容 -->
    <template v-if="query.type === 'hardwareSystem'">
      <div class="content flex j-s hardware">
        <img class="img" :src="`./static/images/${query.imgUrl}`" alt="" />
        <div class="text">
          <h4 class="title">核心优势：</h4>
          <div v-html="advantages"></div>
        </div>
      </div>

      <div class="descripition">
        <div v-html="query.description"></div>
      </div>
    </template>

    <!-- 软件 -->
    <template v-else>
      <div class="content software flex">
        <video autoplay muted loop @loadeddata="onVideoLoaded" v-show="!videoLoaded">
          <source :src="`./static/video/${query.video}`" type="video/mp4" />
        </video>
        <div class="descripition">
          <div v-html="query.description"></div>
        </div>
      </div>
      <div class="card-list flex j-c a-c wrap">
        <div class="card" v-for="item in query.card" :key="item.id">
          <h4 class="title">{{ item.title }}</h4>
          <div class="content">{{ item.content }}</div>
        </div>
      </div>
    </template>

    <div class="back" @click="toBack">返回</div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.hardware) {
  font-size: 20px;
  line-height: 1.8;
  margin-bottom: 40px;
}

.label {
  margin: 40px 0 0 0;
  font-family: 'PingFang SC';
  font-weight: 500;
  font-size: 32px;
  font-weight: bold;
  color: $black;
}

.time {
  margin-bottom: 40px;
}
.content {
  margin-top: 40px;
  margin-bottom: 40px;
}

.hardware {
  width: 1300px;
  .img {
    width: 550px;
    height: 550px;
  }
  .text {
    font-size: 24px;
    line-height: 5ex;
    .title {
      font-size: 32px;
      font-weight: bold;
      margin-bottom: 10px;
    }
  }
}

.software {
  width: 1700px;
  align-items: flex-start;
  video {
    width: 65%;
    height: auto;
    margin-right: 40px;
  }
}

.card-list {
  width: 1200px;
  height: 100%;
  .card {
    width: 350px;
    height: 300px;
    margin: 20px;
    text-align: center;
    border-radius: $border_radius;
    transition: all 0.3s ease-in-out;
    border: 1px solid #eee;
    cursor: pointer;
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    .title {
      background-color: #0389ff;
      height: 60px;
      line-height: 60px;
      color: #fff;
      font-size: 28px;
      border-radius: $border_radius $border_radius 0 0;
    }
    .content {
      font-size: 18px;
      padding: 0 20px;
      display: -webkit-box;
      -webkit-line-clamp: 6;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.descripition {
  width: 1000px;
}

.back {
  margin-top: 40px;
  padding: 10px 40px;
  background: #0389ff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  border-radius: 16px;
  margin-bottom: 60px;
  font-size: 20px;
  color: $white;
  cursor: pointer;
}
</style>
