<template>
  <view class="p-[24rpx] bg-white">
    <FilterTabs
      v-model="activeTab"
      :tabs="tabs"
      label-key="title"
      value-key="key"
      wrapper-class="mb-[24rpx]"
      @change="handleChange"
    >
      <template #label="{ item }">
        <text>{{ item.title }}</text>
      </template>
    </FilterTabs>
    <view class="text-[24rpx] text-gray-500">当前选中：{{ activeTab }}</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import FilterTabs from '@/components/FilterTabs.vue'

const activeTab = ref('all')
const tabs = [
  { title: '全部', key: 'all' },
  { title: '入职培训', key: 'onboarding' },
  { title: '签单相关', key: 'signing' }
]

const handleChange = (value) => {
  console.log('选中项:', value)
}
</script>