<template>
    <card title="数据简报">
        <div class="data-overview" v-loading="loading">
            <div
                class="flex-1 bg-[#F7F8FA] flex flex-col gap-[12px] p-[20px] rounded-[8px]"
                v-for="(item, index) in dataOverview"
                :key="`unique-${index}`"
            >
                <span>{{ item.label }}</span>
                <span class="text-[20px]">{{ item.value }}</span>
            </div>
        </div>
    </card>
</template>

<script setup lang="ts">
import card from './card.vue'
import type { IForm } from '../index.vue'
import { dataOverviewApi } from '@/api/workbench'

const loading = ref(false)
const dataOverview = ref<any[]>([])
const dataMap: Record<string, string> = {
    followUpRecord: '新增跟进记录（个）',
    unclaimedQuantity: '未领取（个）',
    // newCustomer: '新增客户（个）',
    transactionClient: '成交客户（个）',
    convertingClient: '转化中客户（个）',
    exceptionPending: '异常待处理（个）',
    defeatedClient: '战败客户（个）'
}
const fetchData = async (payload: IForm) => {
    loading.value = true
    try {
        const result = await dataOverviewApi(payload)
        dataOverview.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">
.data-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    min-height: 100px;
}
</style>
