<template>
    <view class="px-[32rpx] mt-[12rpx]">
        <card className="pt-2 ">
            <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-[400rpx] flex justify-center items-center">
                    <u-loading-icon></u-loading-icon>
                </view>
            </template>
            <template v-else-if="!loading && data.length > 0">
                <TTable :columns="columns" :data="data">
                    <template #index="scope">
                        <text
                            class="px-[20rpx] 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>
            <template v-else-if="!loading && data.length == 0">
                <div class="pb-3">
                    <w-empty />
                </div>
            </template>
        </card>
    </view>
</template>

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

const emit = defineEmits(['refresh'])

const { tabs, columns, data, loading, rankStyle, queryParams, handleChangeTab, fetchData } =
    useRank({
        width: 120,
        callback: () => {
            emit('refresh')
        }
    })
const dropdownIndex = ref([])
const dateTagFlag = ref('')
const handleMore = () => {
    const params = {
        ...queryParams.value,
        dropdownIndex: encodeURIComponent(dropdownIndex.value.join(',')),
        dateTag: encodeURIComponent(dateTagFlag.value)
    }
    const queryString = Object.keys(params)
        .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
        .join('&')
    uni.navigateTo({
        url: '/bundle/pages/rank-list/index?' + queryString
    })
}
const setSelectedIndexArr = (indexArr: [], dateTag?: string) => {
    dropdownIndex.value = indexArr
    dateTagFlag.value = dateTag ?? ''
}
defineExpose({
    fetchData,
    setSelectedIndexArr
})
</script>
<style scoped></style>
