<template>
  <div class="relative h-[976px] mt-17 sm:h-[688px] md:h-[1400px] md:mt-6 sm:mt-3">
    <h2 class="title-font pt-12 pb-10 md:pb-7 sm:pt-[16px] sm:pb-[12px] relative z-10">设备接口</h2>
    <picture class="absolute inset-0 z-0">
      <source media="(max-width: 1024px)" :srcset="'/images/deviceInterface/bg_sm.png'" />
      <source media="(max-width: 1025px)" :srcset="'/images/deviceInterface/bg_lg.png'" />
      <NuxtImg
        src="/images/deviceInterface/bg_lg.png"
        loading="eager"
        class="size-full object-cover"
        format="webp"
      />
    </picture>
    <div class="relative w-full h-[calc(100%-136px)] z-20 text-white max-w-[1440px] mx-auto px-4">
      <Tabs default-value="BK-2000" class="relative">
        <TabsList class="bg-transparent gap-x-4 w-full">
          <TabsTrigger value="BK-1000" class="tabs-trigger"> BK-1000 </TabsTrigger>
          <TabsTrigger value="BK-2000" class="tabs-trigger"> BK-2000 </TabsTrigger>
        </TabsList>

        <TabsContent value="BK-1000" class="size-full">
          <ClientOnly>
            <!--  background-position-x: -20px; -->
            <div
              style="background-image: url('/images/deviceInterface/head_bg.png')"
              class="tabs-content-head [background-position-x:-20px] sm:[background-position-x:-10px]"
            >
              <span class="text-white text-xl md:text-xl sm:text-[10px] font-bold"
                >BK-1000 参数表</span
              >
            </div>
            <div class="tabs-content-devices">
              <NuxtImg
                src="/images/deviceInterface/bk1000a.png"
                loading="eager"
                class="tabs-content-img"
                format="webp"
              />
              <NuxtImg
                src="/images/deviceInterface/bk1000b.png"
                loading="eager"
                class="tabs-content-img"
                format="webp"
              />
            </div>
          </ClientOnly>
        </TabsContent>
        <TabsContent value="BK-2000" class="size-full">
          <ClientOnly>
            <div
              style="background-image: url('/images/deviceInterface/head_bg.png')"
              class="tabs-content-head [background-position-x:-20px] sm:[background-position-x:-10px]"
            >
              <span class="text-white text-xl md:text-xl sm:text-[10px] font-bold"
                >BK-2000 参数表</span
              >
            </div>
            <div class="tabs-content-devices">
              <NuxtImg
                src="/images/deviceInterface/bk2000a.png"
                loading="eager"
                class="tabs-content-img"
                format="webp"
              />

              <NuxtImg
                src="/images/deviceInterface/bk2000b.png"
                loading="eager"
                class="tabs-content-img"
                format="webp"
              />
            </div>
          </ClientOnly>
        </TabsContent>
      </Tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
</script>
<style>
.tabs-trigger {
  @apply relative bg-transparent text-2xl text-[rgba(255,255,255,0.55)] md:text-2xl sm:text-sm
  after:absolute after:bottom-0 after:left-0 after:right-0 after:h-1 after:w-auto after:origin-top-right after:scale-x-0 
  after:bg-gradient-to-r from-[#11974A] to-[#23C669]
  data-[state=active]:text-[#15A351]
  after:transition-[transform] after:duration-300 after:content-[''] data-[state=active]:after:origin-top-left data-[state=active]:after:scale-x-100;
}
.tabs-content-head {
  @apply w-[446px] h-[50px] bg-cover bg-no-repeat flex items-center pl-15 mt-13 md:pl-10 sm:pl-5 md:w-[350px] md:h-[44px] md:mt-6 sm:w-[176px] sm:h-[22px] sm:mt-3;
}
.tabs-content-devices {
  @apply flex gap-21 justify-center mt-17 md:items-center md:mt-[1.8rem] sm:gap-24 sm:mt-10 md:flex-col sm:flex-col md:gap-32;
}
.tabs-content-img {
  @apply object-cover w-[700px] sm:w-[274px] mx-auto;
}
</style>
