<template>
    <div class="interception-distribution">
        <div class="chart-container" ref="chart"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

const countryColors = ['#6DA6FE', '#9963FB', '#FCE661', '#F801FA', '#95E530', '#22C2CC', '#F76723']

export default {
    name: 'InterceptionDistribution',
    props: {
        chartsData: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    watch: {
        chartsData: {
            deep: true,
            handler() {
                this.$nextTick(() => {
                    if (this.chart) this.chart.dispose()
                    this.initChart()
                })
            }
        }
    },
    methods: {
        initChart() {
            if (!this.$refs.chart) return
            this.chart = echarts.init(this.$refs.chart)
            const option = {
                responsive: true,
                maintainAspectRatio: false,
                grid: {
                    left: '25%',
                    right: '10%',
                    bottom: '10%',
                    top: '10%'
                },
                xAxis: {
                    type: 'value',
                    axisLine: { show: false },
                    axisTick: { show: false },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.05)'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(255, 255, 255, 0.5)',
                        fontSize: 9
                    }
                },
                yAxis: {
                    type: 'category',
                    data: this.chartsData.map(item => item.name),
                    axisLine: { show: false },
                    axisTick: { show: false },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.05)'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(255, 255, 255, 0.6)',
                        fontSize: 9,
                        formatter: function (value) {
                            return value.length > 5 ? value.substring(0, 6) + '...' : value
                        }
                    }
                },
                series: [
                    {
                        name: '拦截数量',
                        type: 'bar',
                        data: this.chartsData.map(item => item.num),
                        itemStyle: {
                            borderRadius: [0, 5, 5, 0],
                            color: function (param) {
                                return countryColors[param.dataIndex % countryColors.length]
                            }
                        },
                        label: {
                            show: true,
                            position: 'right',
                            color: '#FFF',
                            fontSize: 9,
                            fontWeight: 500
                        }
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(13,80,122,0.95)',
                    borderColor: '#70CFE7',
                    textStyle: { color: '#fff' }
                }
            }
            this.chart.setOption(option)
        }
    },
    beforeDestroy() {
        if (this.chart) this.chart.dispose()
    }
}
</script>

<style lang="scss" scoped>
.interception-distribution {
    .chart-container {
        width: 100%;
        height: 250rpx;
    }
}
</style>
