<template>
    <view>
        <u-tabs
            :list="tabs"
            :scrollable="false"
            :activeStyle="{
                color: '#303133',
                fontWeight: 'bold',
                transform: 'scale(1.05)'
            }"
            :inactiveStyle="{
                color: '#606266',
                transform: 'scale(1)'
            }"
            itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
            lineWidth="32"
            lineColor="#0E66FB"
            @change="handleChangeTab"
        ></u-tabs>
        <template v-if="loading && !data.length">
            <view class="min-h-[200rpx] flex justify-center items-center">
                <u-loading-icon></u-loading-icon>
            </view>
        </template>
        <template v-if="!loading && data.length > 0">
            <TTable :columns="columns" :data="data">
                <template #index="scope">
                    <text class="px-[16rpx] py-[6rpx] rounded-[4px]" :style="rankStyle(scope.row)">
                        {{ scope.row }}
                    </text>
                </template>
            </TTable>
        </template>
    </view>
</template>

<script setup lang="ts">
import { useRank } from '@/hooks/useCommon'
import { watch } from 'vue'

const { tabs, activeTab, columns, data, loading, rankStyle, handleChangeTab, fetchData } = useRank({
    width: 160
})

watch(
    () => activeTab.value,
    (val: number) => {
        console.log(val)
    }
)
fetchData()
defineExpose({
    fetchData
})
</script>
<style scoped></style>
