<script lang="ts" setup>
import TnBadge from '../../badge/src/badge.vue'
import { tabsItemEmits, tabsItemProps } from './tabs-item'
import { useTabsItem, useTabsItemCustomStyle } from './composables'

const props = defineProps(tabsItemProps)
defineEmits(tabsItemEmits)

const { componentId, isActive, hasBadge, itemClickEvent } = useTabsItem(props)
const { ns, tabsItemClass, tabsItemStyle } = useTabsItemCustomStyle(
  props,
  isActive
)
</script>

// #ifdef MP-WEIXIN
// 移除 virtualHost，避免 scoped selector query 找不到节点 (#tti-xxx)
// <script lang="ts">
// export default {
//   options: {
//     virtualHost: true,
//   },
// }
// </script>
// #endif

<template>
  <view
    :id="componentId"
    :class="[tabsItemClass]"
    :style="tabsItemStyle"
    @tap.stop="itemClickEvent"
  >
    <slot>
      <view :class="[ns.e('content')]">
        <view :class="[ns.e('content__value')]">
          <!-- 角标 -->
          <TnBadge
            v-if="hasBadge"
            :value="badgeConfig.value"
            :dot="badgeConfig.dot"
            :size="badgeConfig.dot ? '16' : ''"
            type="danger"
            @click="itemClickEvent"
          />
          {{ title }}
        </view>
      </view>
    </slot>
  </view>
</template>

<style lang="scss" scoped>
@import '../../../theme-chalk/src/tabs-item.scss';
</style>
