<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>
        <dropdownPicker ref="dropdownPickerRef" v-model="form" @refresh-page="refreshPage" />
        <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-[20rpx] py-[6rpx] rounded-[4px]" :style="rankStyle(scope.row)">
                        {{ scope.row }}
                    </text>
                </template>
            </TTable>
        </template>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { nextTick, ref } from 'vue'
import dropdownPicker from '@/components/widgets/admin/dropdown-picker.vue'
import { useRank } from '@/hooks/useCommon'
import { IForm } from '@/components/widgets/admin/team/index.vue'

const dropdownPickerRef = ref<InstanceType<typeof dropdownPicker>>()
const form = ref<IForm>()

const { tabs, activeTab, columns, data, loading, rankStyle, handleChangeTab, fetchData } = useRank({
    width: 160,
    callback: () => {
        fetchData(form.value)
    }
})
const refreshPage = () => {
    fetchData(form.value)
}
onLoad(async options => {
    setFormData(options)
    await nextTick()
    dropdownPickerRef.value?.setDefaultValue(
        decodeURIComponent(options.dropdownIndex),
        decodeURIComponent(options.dateTag)
    )
    fetchData(form.value)
})
const setFormData = options => {
    form.value = Object.keys(options).reduce((acc, key) => {
        if (key == 'dropdownIndex' || key == 'dateTag') {
            return acc
        }
        acc[key] = decodeURIComponent(options[key])
        return acc
    }, {})
}
defineExpose({
    fetchData
})
</script>
<style scoped></style>
