<template>
  <Vortex class="relative pb-17">
    <h2 class="title-font pt-20 sm:p-4 md:p-8 pb-19">全生态中间件</h2>
    <div
      class="max-w-[1440px] mx-auto md:p-5 bg-transparent relative flex items-center justify-center pb-[107px] md:pb-17 sm:pb-10"
      ref="containerRef"
    >
      <div
        v-for="(item, idx) in middleWareList"
        :key="idx"
        class="relative shadow-[0_0_4px_0_rgba(7,6,44,0.61)] rounded-xl bg-cover overflow-hidden transition-all duration-300 cursor-pointer"
        :class="[
          item.clx,
          {
            'scale-active': activeIndex === idx,
            'scale-default': activeIndex === null && idx === 1,
          },
        ]"
        @mouseenter="setActiveIndex(idx)"
        @mouseleave="clearActiveIndex()"
      >
        <picture class="absolute inset-0 z-0 text-white">
          <img :src="item.lgBg" loading="eager" class="size-full" :alt="item.title" />
        </picture>
        <section class="relative z-10 sm:p-3 size-full flex flex-col">
          <h3
            class="text-[#5897FF] text-4xl md:text-2xl md:mt-6 sm:text-xs mt-15 sm:mt-3 text-center font-bold"
          >
            {{ item.title }}
          </h3>
          <div
            class="text-[#A4B0B7] flex flex-col mt-21 md:mt-6 sm:mt-3 items-center text-3xl md:text-base sm:text-[8px] sm:leading-[14px] gap-9 md:gap-4 sm:gap-2"
          >
            <p v-for="(content, idx) in item.contentList" :key="idx" class="text-center">
              {{ content }}
            </p>
          </div>
        </section>
      </div>
    </div>
  </Vortex>
</template>

<script setup lang="ts">
import Vortex from '@/components/ui/vortex/Vortex.vue'
const activeIndex = ref<number | null>(null)

const setActiveIndex = (idx: number) => {
  activeIndex.value = idx
}

const clearActiveIndex = () => {
  activeIndex.value = null
}

const middleWareList = [
  {
    title: '基础协议中间件',
    contentList: ['DI/DO/RS485/', 'Can/Led/MQTT/', 'HTTP/TCP/UDP协议'],
    lgBg: '/images/middle/4s_lg.jpg',
    clx: 'w-[540px] h-[584px] md:w-[234px] md:h-[288px] sm:w-[126px] sm:h-[152px] relative right-[-30px] md:right-[-16px] sm:right-[-8px] z-10',
  },
  {
    title: '增强中间件',
    contentList: [
      'IEC104协议',
      'DL/T645协议',
      'ModbusTCP Server/Client',
      'ModbusRTU Server/Client',
    ],
    lgBg: '/images/middle/4m_lg.jpg',
    clx: 'w-[540px] h-[584px] md:w-[234px] md:h-[288px] sm:w-[126px] sm:h-[152px] relative z-[20]',
  },
  {
    title: '专业中间件',
    contentList: [
      '日志、对时SDK',
      '时序数据库、SQL数据库',
      'QT HMIS、OTA升级SDK',
      '云端数据交互SDK',
    ],
    lgBg: '/images/middle/4s_lg.jpg',
    clx: 'w-[540px] h-[584px] md:w-[234px] md:h-[288px] sm:w-[126px] sm:h-[152px] relative left-[-30px] md:left-[-16px] sm:left-[-8px] z-10',
  },
]
</script>

<style scoped>
.scale-active,
.scale-default {
  transform: scale(1.1);
  z-index: 30;
}
</style>
