<template>
    <view class="flex flex-col gap-[24rpx] px-[32rpx]">
        <card title="数据简报">
            <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-else-if="!loading && data.length > 0">
                <view class="flex flex-wrap">
                    <view
                        class="flex flex-col w-1/3 justify-center items-center gap-[12rpx] mb-[20rpx]"
                        v-for="(item, index) in data"
                        :key="`unique_${index}`"
                    >
                        <text class="text-muted">{{ item.label }}</text>
                        <text class="font-bold text-[40rpx]">{{ item.value }}</text>
                    </view>
                </view>
            </template>
        </card>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import card from '../../card.vue'
import { apiDataOverview } from '@/api/admin'
import { IForm } from '../index.vue'

interface DataItem {
    label: string
    value: number
}
const loading = ref(false)
const data = ref<DataItem[]>([])
const dataMap: Record<string, string> = {
    followUpRecord: '新增跟进',
    newCustomer: '新增客户',
    transactionClient: '成交客户',
    convertingClient: '转化中客户',
    exceptionPending: '异常待处理',
    defeatedClient: '战败客户'
}

const fetchData = async (payload: IForm) => {
    if (data.value.length > 0) data.value = []
    loading.value = true
    try {
        const result = await apiDataOverview(payload)
        data.value = Object.keys(dataMap).map(key => {
            return {
                label: dataMap[key],
                value: result[key] || 0
            }
        })
    } catch (error) {}
    loading.value = false
}
defineExpose({
    fetchData
})
</script>
<style scoped lang="scss"></style>
