<template>
  <div class="relative w-full h-full perspective-1000">
    <div
        :class="{ 'rotate-y-180': isFlipped }"
        class="relative w-full h-full transition-transform duration-600 transform-style-preserve-3d"
        @mouseenter="isFlipped = true"
        @mouseleave="isFlipped = false"
    >
      <!-- 正面内容 -->
      <div
          class="absolute inset-0 w-full h-full bg-white rounded-lg p-5 flex flex-col justify-center items-center backface-hidden">
        <div class="h-16 flex justify-center items-center">
          <img :src="iconSrc" alt="" class=" h-16">
        </div>
        <p class="text-black text-xl mt-2.5 font-medium">
          {{ title }}
        </p>
      </div>

      <!-- 背面内容 -->
      <div
          class="absolute inset-0 w-full h-full bg-gradient-to-br from-teal-600 to-teal-800 rounded-lg p-5 backface-hidden transform rotate-y-180">
        <NuxtLink
            :to="linkUrl"
            class="block h-full no-underline text-inherit"
        >
          <div class="text-left">
            <h5 class="text-white text-xl font-bold m-0">{{ title }}</h5>
            <div class="h-0.5 bg-white w-10 my-4"/>
          </div>
          <div class="text-white text-sm leading-relaxed text-left opacity-80 line-clamp-3">
            {{ description }}
          </div>
          <div
              v-if="linkUrl"
              class="text-white text-sm text-right w-full mt-1 opacity-90 transition-opacity duration-300 group-hover:opacity-100 group-hover:underline">
            查看详情&nbsp;&nbsp;&gt;
          </div>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: '智慧蜂设'
  },
  description: {
    type: String,
    default: '提供蜂群、蜂箱、蜂场环境等信息远程实时自动获取、统计分析和监测预警服务，实现智能化养殖，提高管理效率，节省成本。设备先进，质量和服务双保障。'
  },
  iconSrc: {
    type: String,
    default: '/img/index/s1.svg'
  },
  linkUrl: {
    type: String,

  }
})

const isFlipped = ref(false)
</script>

<style scoped>
.perspective-1000 {
  perspective: 1000px;
}

.transform-style-preserve-3d {
  transform-style: preserve-3d;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

.backface-hidden {
  backface-visibility: hidden;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .perspective-1000 {
    perspective: none;
  }

  .transform-style-preserve-3d {
    transform-style: flat;
  }

  .rotate-y-180 {
    transform: none;
  }
}
</style>