<template>
  <view class="m-2 p-2 bg-white rounded-2">
    <wd-tabs v-model="tab" auto-line-width swipeable animated>
      <wd-tab v-for="(item, index) in list" :key="index" :title="item.title" :name="index">
        <view class="flex flex-wrap">
          <view
            v-for="subItem in item.list"
            :key="subItem.id"
            class="text-center my-2 w-21.4375"
            @click="clickItem(subItem)"
          >
            <image :src="subItem.icon" class="w-7 h-7 m-a"></image>
            <view class="text-3 mt-2">{{ subItem.title }}</view>
          </view>
        </view>
      </wd-tab>
    </wd-tabs>
  </view>
</template>

<script setup lang="ts">
  const tab = ref<number>(0)

  const props = defineProps({
    index: {
      type: Number,
      default: 0
    },
    list: {
      type: Array<HomeTab>,
      required: true
    }
  })

  const emits = defineEmits(['clickItem'])

  onMounted(() => {
    tab.value = props.index
  })

  const clickItem = (item: HomeTabItem) => {
    emits('clickItem', item)
  }
</script>
