<template>
    <div class="flex-1 w-full chart-card">
        <card title="成交客户统计">
            <v-charts style="height: 350px" ref="chartRef" v-loading="loading" :autoresize="true" />
        </card>
    </div>
</template>
<script setup lang="ts">
import { completedCustomerListApi } from '@/api/workbench'
import card from './card.vue'
import vCharts from 'vue-echarts'
import type { IForm } from '../index.vue'

function createBarSeries(data, name, field) {
    return {
        name,
        type: 'bar',
        data: data.map(item => item[field])
    }
}
const chartRef = ref()
const data = ref<any[]>([])
const xAxisData = ref([])
const loading = ref(false)

const fetchData = async (payload: IForm) => {
    loading.value = true
    try {
        const result = await completedCustomerListApi(payload)
        data.value = result.map((item: any) => {
            const { clientCount, transactionClient } = item.leadToCustomerStatisticsVo
            return {
                name: item.organizationName,
                clientCount,
                transactionClient
            }
        })
        xAxisData.value = result.map((item: any) => item.organizationName)
        if (!result.length) {
            chartRef.value.setOption({
                title: {
                    text: '暂无数据',
                    x: 'center',
                    y: 'center'
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [],
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        }
                    }
                ],
                legend: {
                    show: false
                },
                series: [createBarSeries([], '', ''), createBarSeries([], '', '')]
            })
        } else {
            chartRef.value.setOption({
                color: ['#0E66FB', '#96B2D9'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {},
                legend: {},
                title: {
                    text: ''
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xAxisData.value
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [createBarSeries(data.value, '客户数', 'clientCount'), createBarSeries(data.value, '成交客户数', 'transactionClient')]
            })
        }
    } catch (error) {}
    loading.value = false
}
defineExpose({
    fetchData
})
</script>

<style scoped lang="scss">
@media (max-width: 1000px) {
    .chart-card {
        flex: 1 0 100%;
    }
}
</style>
