<template>
    <div class="seized-num-all">
        <div class="chart-container" ref="chart"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: 'SeizedNumAll',
    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: '15%',
                    right: '5%',
                    bottom: '15%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: this.chartsData.map(item => item.recordDate),
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(255, 255, 255, 0.5)',
                        fontSize: 9,
                        rotate: 30
                    }
                },
                yAxis: {
                    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
                    }
                },
                series: [
                    {
                        name: '查获数',
                        type: 'line',
                        data: this.chartsData.map(item => item.seizeQuantity),
                        smooth: true,
                        itemStyle: {
                            color: '#71B138'
                        },
                        lineStyle: {
                            color: '#71B138'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: 'rgba(113, 177, 56, 0.3)' },
                                    { offset: 1, color: 'rgba(113, 177, 56, 0)' }
                                ]
                            }
                        }
                    }
                ],
                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>
.seized-num-all {
    .chart-container {
        width: 100%;
        height: 450rpx;
    }
}
</style>
