<template>
    <div class="flex-1 w-full chart-card">
        <card title="线索转客户统计">
            <v-charts ref="chartRef" v-loading="loading" style="height: 350px" :autoresize="true" />
        </card>
    </div>
</template>
<script setup lang="ts">
import { convertProcessApi } 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])
    }
}

function createLineSeries(data, name, field) {
    return {
        name,
        type: 'line',
        tooltip: {
            valueFormatter: function (value) {
                return value as number
            }
        },
        data: data.map(item => item[field]),
        yAxisIndex: 1
    }
}
const loading = ref(false)
const data = ref([])
const xAxisData = ref([])

const chartRef = ref()
const fetchData = async (payload: IForm) => {
    loading.value = true
    try {
        const result = await convertProcessApi(payload)
        if (result.length > 0) {
            data.value = result.map((item: any) => {
                const { clueCount, transactionClient, percentConversion } = item.leadToCustomerStatisticsVo
                return {
                    name: item.organizationName,
                    clueNumber: clueCount,
                    client: transactionClient,
                    rate: percentConversion
                }
            })
            xAxisData.value = result.map((item: any) => item.organizationName)
            chartRef.value.setOption({
                color: ['#0E66FB', '#FAC858', '#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}'
                        }
                    },
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    createBarSeries(data.value, '线索数', 'clueNumber'),
                    createBarSeries(data.value, '线索转客户数', 'client'),
                    createLineSeries(data.value, '线索转客户率', 'rate')
                ]
            })
        } else {
            chartRef.value.setOption({
                legend: {},
                title: {
                    text: '暂无数据',
                    x: 'center',
                    y: 'center'
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [],
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        }
                    }
                ],
                yAxis: [],
                series: [createBarSeries([], '', ''), createBarSeries([], '', ''), createLineSeries([], '', '')]
            })
        }
    } catch (error) {}
    loading.value = false
}
defineExpose({
    fetchData
})
</script>
<style scoped lang="scss">
@media (max-width: 1000px) {
    .chart-card {
        flex: 1 0 100%;
    }
}
</style>
