import { postLists, rankListApi } from '@/api/admin'
import { apiCluseDetail } from '@/api/clue'
import { IForm } from '@/components/widgets/admin/team/index.vue'
import { PositionEnum } from '@/enums'
import { computed, ref, shallowRef } from 'vue'

// 获取线索详情
export function useClueDetail() {
    const clueDetailInfo = ref()
    const fetchClueDetail = async (id: number | string) => {
        uni.showLoading({
            title: '加载中'
        })
        try {
            const result = await apiCluseDetail({ id })
            clueDetailInfo.value = result
        } catch (error) {}
        uni.hideLoading()
    }
    return {
        clueDetailInfo,
        fetchClueDetail
    }
}

interface IRank {
    index: number
    name: string
    total: number
}
interface IRankTab {
    name: string
    value: number
    id: number
}
// 主账号排行榜
export function useRank({ width, callback }: { width: number; callback?: () => void }) {
    const tabs = ref<IRankTab[]>([])
    const activeTab = ref()
    const loading = ref(false)
    const data = ref<IRank[]>([])
    const totalLabel = computed(() => (activeTab.value == PositionEnum.TELESALE ? '意向' : '成交'))
    const rankStyle = computed(() => row => {
        const styleMap: Record<number, string> = {
            '1': '#FCAE3C',
            '2': '#BCC1D8',
            '3': '#EEB286'
        }
        return {
            color: row >= 4 ? '#3d3d3d' : '#fff',
            background: styleMap[row]
        }
    })
    const queryParams = ref()

    const handleChangeTab = item => {
        activeTab.value = item.id
        columns.value = generateColumns()
        callback && callback()
    }
    const generateColumns = () => {
        return [
            { name: 'rank', label: '排名', slot: true },
            { name: 'username', label: '姓名' },
            { name: 'clueCount', label: totalLabel.value + '客户数', width, align: 'right' }
        ]
    }

    const columns = ref()
    // 获取岗位列表
    const fetchTabs = async () => {
        try {
            const result = await postLists()
            tabs.value = result.lists.map(item => {
                const { name } = item
                return {
                    id: item.id,
                    name: name + '业绩排行榜'
                }
            })
            if (tabs.value.length > 0) activeTab.value = tabs.value[0].id
            columns.value = generateColumns()
        } catch (error) {}
    }
    // 获取每一个岗位前5名
    const fetchData = async (payload: IForm) => {
        queryParams.value = payload
        if (!tabs.value.length) await fetchTabs()
        data.value = []
        try {
            loading.value = true
            const newPayload = {
                ...payload,
                post: activeTab.value
            }
            const result = await rankListApi(newPayload)
            data.value = result ?? []
        } catch (error) {}
        loading.value = false
    }

    return {
        fetchData,
        rankStyle,
        activeTab,
        columns,
        tabs,
        data,
        loading,
        queryParams,
        handleChangeTab
    }
}

// 岗位
export function usePositions() {
    const positionList = ref()
    const postId = ref()
    const fetchPositions = async () => {
        try {
            const result = await postLists()
            positionList.value = result.lists.map(item => {
                return {
                    label: item.name,
                    id: item.id,
                    value: item.id
                }
            })
            if (positionList.value.length > 0) postId.value = positionList.value[0].id
        } catch (error) {}
    }

    return {
        positionList,
        postId,
        fetchPositions
    }
}