<template>
  <view class="m-2 p-2 bg-white rounded-2 pos-relative">
    <image
      @click="clickMenu"
      src="/static/images/icon_table_menu.png"
      class="w-6 h-6 pos-absolute right-1 top-3 p-1 z-10"
    ></image>
    <wd-tabs
      v-model="tab"
      auto-line-width
      swipeable
      animated
      color="#0d100e"
      inactiveColor="#838383"
    >
      <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">
  defineOptions({
    options: {
      styleIsolation: 'shared'
    }
  })

  const tab = ref<number>(0)

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

  const emits = defineEmits(['clickItem'])

  const clickMenu = () => {
    uni.navigateTo({
      url: '/pages/application-list/application-list'
    })
  }

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

<style>
  :deep(.wd-tabs__nav--wrap) {
    margin-right: 30px;
  }
</style>
