<template>
    <div class="flex-1 w-full">
        <card title="线索转化情况统计">
            <v-charts ref="chartRef" v-loading="loading" style="height: 350px" :option="option" :autoresize="true" />
        </card>
    </div>
</template>

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

const chartRef = ref()
const data = ref<any[]>([])
const option = ref({
    color: ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'],
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        top: 'center',
        right: 0
    },
    series: [
        {
            name: '',
            type: 'pie',
            radius: ['25%', '55%'],
            center: ['45%', '50%'],
            avoidLabelOverlap: false,
            label: {
                show: true,
                position: 'outside',
                formatter: params => {
                    return `${params.name}：${params.percent}%`
                }
            },
            data
        }
    ]
})
const loading = ref(false)
const dataMap: Record<string, string> = {
    unclaimedCount: '待领取',
    conversionCount: '转化中',
    addedCount: '已添加',
    abnormalCount: '异常待处理',
    tradedCount: '已成交',
    failCount: '已战败'
}
const fetchData = async (payload: IForm) => {
    try {
        loading.value = true
        const result = await clueStatusApi(payload)
        data.value = Object.keys(dataMap).map(item => {
            return {
                name: dataMap[item],
                value: result[item] || 0
            }
        })
        // 检查数组中的每一项是否都为 0
        // const allZero = data.value.every(item => item.value === 0)
        // if (allZero) {
        //     chartRef.value.setOption({
        //         title: {
        //             text: '暂无数据',
        //             x: 'center',
        //             y: 'center'
        //         },
        //         legend: {
        //             show: false
        //         },
        //         series: []
        //     })
        // }
    } catch (error) {}
    loading.value = false
}
defineExpose({
    fetchData
})
</script>
<style scoped></style>
