<script lang="ts" setup>

import type {TabsItem} from "@nuxt/ui";
import {getPartnersByType,} from '@/data/partners'
import {Motion} from "motion-v"

const governmentPartners = getPartnersByType('government')
const universityPartners = getPartnersByType('university')
const enterprisePartners = getPartnersByType('enterprise')
const pilotPartners = getPartnersByType('pilot')
const cooperativePartners = getPartnersByType('cooperative')
const items = [
  {
    name: '服务覆盖省级行政区域',
    number: '11',
    unit: '省'
  },
  {
    name: '遍及城市',
    number: '20',
    unit: '个'
  },
  {
    name: '智慧蜂场基地',
    number: '3',
    unit: '个'
  },
  {
    name: '服务面积',
    number: '100',
    unit: '万亩'
  },
  {
    name: '相关从业者',
    number: '5',
    unit: '万人'
  }
]
const tabsItems = [
  {
    label: '政府单位',
    description: '面向各级农业农村部门的监管服务平台',

    slot: 'government' as const
  },
  {
    label: '科研机构',
    description: '蜂产业技术创新与成果转化平台',

    slot: 'research' as const
  },
  {
    label: '大型企业',
    description: '蜂产品企业智能化管理解决方案',

    slot: 'enterprise' as const
  },
  {
    label: '综合试验点',
    description: '蜂产业技术集成与示范基地',

    slot: 'pilot' as const
  },
  {
    label: '养蜂合作社',
    description: '蜂农专业合作社数字化管理工具',

    slot: 'cooperative' as const
  }
] satisfies TabsItem[]
</script>

<template>
  <UPage>
    <img alt="" src="/img/example/banner.png">
    <UPageSection
        :style="{ backgroundImage: `url('/img/about/bg.png')` ,    }"
        :ui="{container:'lg:py-3'}"
        class="space-y-6 bg-fixed bg-no-repeat bg-center w-full mb-4 min-h-screen">
      <view class="grid grid-cols-3 lg:grid-cols-5 gap-4 lg:gap-6 items-center">
        <!-- 每个单元格单独循环 -->
        <view v-for="item in items" :key="item.name" class="text-center">
          <text class="block  text-xs lg:text-lg mb-2">{{ item.name }}</text>
          <view class="flex items-baseline justify-center gap-1">
            <text class="text-primary text-3xl font-bold">{{ item.number }}</text>
            <text class="text-black text-bold">{{ item.unit }}</text>
          </view>
        </view>
      </view>
      <UTabs
          :items="tabsItems"
          :ui="{
             trigger: ' grow ', // 绿色背景+白字
          label:'font-bold lg:text-lg text-xs',

    }"
          class="w-full gap-6"
          size="xl"
          unmount-on-hide="false"
          variant="link"
      >

        <!-- 政府单位 -->
        <template #government="{ item }">
          <Motion
            :initial="{ x: 100, opacity: 0 }"
            :animate="{ x: 0, opacity: 1 }"
            :transition="{ duration: 0.6, ease: 'easeOut' }"
          >
            <ExamplePartnerGrid :partners="governmentPartners"/>
          </Motion>
        </template>
        <!-- 科研机构 -->
        <template #research="{ item }">
          <Motion
            :initial="{ x: 100, opacity: 0 }"
            :animate="{ x: 0, opacity: 1 }"
            :transition="{ duration: 0.6, ease: 'easeOut' }"
          >
            <ExamplePartnerGrid :partners="universityPartners"/>
          </Motion>
        </template>
        <!-- 大型企业 -->
        <template #enterprise="{ item }">
          <Motion
            :initial="{ x: 100, opacity: 0 }"
            :animate="{ x: 0, opacity: 1 }"
            :transition="{ duration: 0.6, ease: 'easeOut' }"
          >
            <ExamplePartnerGrid :partners="enterprisePartners "/>
          </Motion>
        </template>
        <!-- 综合试验点 -->
        <template #pilot="{ item }">
          <Motion
            :initial="{ x: 100, opacity: 0 }"
            :animate="{ x: 0, opacity: 1 }"
            :transition="{ duration: 0.6, ease: 'easeOut' }"
          >
            <ExamplePartnerGrid :partners="pilotPartners "/>
          </Motion>
        </template>
        <!-- 养蜂合作社 -->
        <template #cooperative="{ item }">
          <Motion
            :initial="{ x: 100, opacity: 0 }"
            :animate="{ x: 0, opacity: 1 }"
            :transition="{ duration: 0.6, ease: 'easeOut' }"
          >
            <ExamplePartnerGrid :partners="cooperativePartners "/>
          </Motion>
        </template>
      </UTabs>
    </upagesection>
  </UPage>
</template>

<style scoped>

</style>