<template>
    <view class="px-[32rpx]">
        <card>
            <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;flex:0!important; "
                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>
                <view
                    class="flex justify-center py-[20rpx] border-t border-solid border-border"
                    @click="handleMore"
                >
                    <text>查看更多</text>
                </view>
            </template>
        </card>
    </view>
</template>

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

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

watch(
    () => activeTab.value,
    (val: number) => {
        console.log(val)
    }
)
const handleMore = () => {
    uni.navigateTo({
        url: '/bundle/pages/rank-list/index'
    })
}

defineExpose({
    fetchData
})
</script>
<style scoped></style>
