<template>
    <div class="rank flex-1">
        <card title="TOP5">
            <template #title>
                <div class="flex gap-[40px] title flex-1 mb-[6px]">
                    <div class="item relative" v-for="item in positionOptions" :key="item.id" @click="postId = item.id">
                        <span :class="{ active: postId == item.id }">{{ item.name + 'TOP5' }}</span>
                    </div>
                </div>
            </template>
            <template #right>
                <span class="text-primary cursor-pointer" @click="handleMore">查看更多</span>
            </template>
            <!-- <template #right>
                <div class="positions">
                    <span
                        class="default"
                        :class="{ active: item.id == postId }"
                        v-for="item in positionOptions"
                        :key="item.id"
                        @click="postId = item.id"
                    >
                        {{ item.name }}
                    </span>
                </div>
            </template> -->
            <template v-if="!loading && tableData.length > 0">
                <el-table :data="tableData" v-loading="loading" style="min-height: 300px">
                    <el-table-column prop="rank" label="排名" width="70" />
                    <el-table-column prop="username" label="负责人" width="180" />
                    <el-table-column prop="clueCount" :label="parseLabel" />
                </el-table>
            </template>
            <template v-if="!loading && tableData.length == 0">
                <el-empty description="暂无数据" />
            </template>
        </card>
    </div>
    <rankListDialog ref="rankListDialogRef" />
</template>

<script setup lang="ts">
import { rankListApi } from '@/api/workbench'
import card from './card.vue'
import rankListDialog from './rank-list-dialog.vue'
import type { IForm } from '../index.vue'
import { usePositionData } from '@/hooks/useCommon'
import { templateTypeEum } from '@/enums'

const { positionOptions, postId, fetchPostionData } = usePositionData()

const emit = defineEmits(['refresh'])

const rankListDialogRef = ref<InstanceType<typeof rankListDialog>>()
const tableData = ref([])
const loading = ref(false)
const queryParams = ref()
const parseLabel = computed(() => (postId.value == templateTypeEum.TELE ? '意向客户数' : '成交客户数'))
const fetchData = async (payload: IForm) => {
    if (!positionOptions.value.length) await fetchPostionData()
    if (tableData.value.length > 0) tableData.value = []
    loading.value = true
    try {
        const newPayload = {
            ...payload,
            post: postId.value
        }
        const result = await rankListApi(newPayload)
        tableData.value = result ?? []
        queryParams.value = newPayload // 记录查询参数
    } catch (error) {}
    loading.value = false
}
const handleMore = () => {
    rankListDialogRef.value?.openDialog({
        title: '排行榜',
        width: 1100,
        data: { ...queryParams.value }
    })
}
watch(
    () => postId.value,
    (newVal, oldVal) => {
        if (newVal !== oldVal) {
            emit('refresh')
        }
    }
)
defineExpose({
    fetchData
})
</script>
<style scoped lang="scss">
.rank {
    min-height: 350px;
    .item {
        position: relative;
        cursor: pointer;
        > span {
            &.active {
                position: relative;
                color: var(--el-color-primary);
                &::after {
                    content: '';
                    position: absolute;
                    bottom: -10px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 46px;
                    height: 3px;
                    border-radius: 3px;
                    background-color: var(--el-color-primary);
                }
            }
        }
        .active {
        }
    }
    .positions {
        display: flex;
        cursor: pointer;
        span {
            padding: 5px 10px;
            border: 1px solid var(--color-gray);
            &:first-child {
                border-right-color: transparent;
            }
            &:last-child {
                border-left-color: transparent;
            }
            &.active {
                color: var(--color-primary);
                border-color: var(--color-primary);
                border-right-color: var(--color-primary);
            }
        }
    }
}
</style>
