<template>
    <div class="flex-1 w-full chart-card">
        <card title="线索转客户统计">
            <v-charts ref="chartRef" v-loading="loading" style="height: 350px" :autoresize="true" :option="option" />
        </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) {
    return {
        name,
        type: 'line',
        tooltip: {
            valueFormatter: function (value) {
                return value as number
            }
        },
        data: data.map(item => item.client),
        yAxisIndex: 1
    }
}
const loading = ref(false)
const data = ref([])
const xAxisData = ref([])

const series = [
    createBarSeries(data.value, '线索数', 'clueNumber'),
    createBarSeries(data.value, '线索转客户数', 'client'),
    createLineSeries(data.value, '线索转客户率')
]

const option = ref({
    color: ['#0E66FB', '#FAC858', '#96B2D9'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {},
    legend: {},
    xAxis: [
        {
            type: 'category',
            data: xAxisData.value
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        }
    ],
    series
})

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)
            if (series[2].data.length === 0) {
                chartRef.value.setOption({
                    title: {
                        text: '暂无数据',
                        x: 'center',
                        y: 'center'
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: [],
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            }
                        }
                    ],
                    legend: {
                        show: false
                    }
                })
            }
        }
    } catch (error) {}
    loading.value = false
}
defineExpose({
    fetchData
})
</script>
<style scoped lang="scss">
@media (max-width: 1000px) {
    .chart-card {
        flex: 1 0 100%;
    }
}
</style>
