<template>
    <!-- ITIC -->
    <view>

        <l-echart ref="echartRef" @finished="initChart"></l-echart>
    </view>
</template>
<script>


const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
export default {
    components: {},
    props: {
        data: {
            type: [Object],
        },
        index: {
            type: [Number],
        },
        unit: {
            type: [Array],
        }

    },
    data() {
        return {
            option: {
                backgroundColor: '#fff',
                grid: {
                    left: '0px',
                    right: '10rpx',
                    bottom: '0rpx',
                    top: '25px',
                    containLabel: true,
                },
                legend: {
                    right: '10px',
                    top: '0px',
                    icon: 'rect',
                    itemWidth: 20,
                    itemHeight: 2,
                    itemGap: 8,
                    itemStyle: {
                        borderWidth: 0,
                    },
                    textStyle: {
                        fontSize: 10,
                    },
                    padding: [5, 5, 5, 10],
                },


                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    splitLine: { show: false },
                    axisLine: { show: true },
                    axisTick: { show: false },
                    axisLabel: {
                        fontSize: 10,
                        interval: 0,
                    },
                },
                yAxis: {
                    type: 'value',
                    name: '',
                    nameLocation: 'end',
                    nameGap: 10,
                    minInterval: 1,
                    nameTextStyle: {
                        fontSize: 12,
                        padding: [28, 10, 0, 0],
                    },
                    axisLine: {
                        show: true,

                    },
                    axisTick: {
                        show: true,

                    },

                },
                series: [
                    {
                        name: 'A相',
                        type: 'line',
                        data: [

                        ],
                        showSymbol: false,
                        smooth: true,
                        tooltips: {
                            show: false,
                        },
                        color: '#DAA520',
                    },
                    {
                        name: 'B相',
                        type: 'line',
                        data: [

                        ],
                        showSymbol: false,
                        smooth: true,
                        tooltips: {
                            show: false,
                        },
                        color: '#2E8B57',
                    },
                    {
                        name: 'C相',
                        type: 'line',
                        data: [

                        ],
                        showSymbol: false,
                        smooth: true,
                        tooltips: {
                            show: false,
                        },
                        color: '#A52a2a',
                    },
                ],
            },
            status: 'loading',
            echartRef: null,
            pointI: [],
            xLabelShowIndices: new Set(),
        }
    },
    mounted() {
        // this.initChart()
        // console.log('🚀 ~ props.data:', this.props.data)
    },

    methods: {
        init() { },
        async initChart() {
            if (!this.$refs.echartRef) return
            try {
                this.echartRef = await this.$refs.echartRef.init(echarts)
                this.setOption()


                this.echartRef.setOption(this.option, true)
            } catch (error) {
                console.error('图表初始化失败:', error)
            }
        },
        formatXAxisLabel(val, index) {
            return this.xLabelShowIndices.has(index) ? String(val) : ''
        },
        getYAxisRange() {
            const values = []
                ;['A', 'B', 'C'].forEach((key) => {
                    ; (this.data[key] || []).forEach((p) => {
                        const v = p[1]
                        if (v !== null && v !== undefined && !Number.isNaN(Number(v))) {
                            values.push(Number(v))
                        }
                    })
                })
            if (!values.length) return {}
            const dataMax = Math.max(...values)
            const dataMin = Math.min(...values)
            let min = 0
            let max = 0
            if (dataMin > 0) {
                min = Math.floor(dataMin / 1.3)
            } else {
                min = Math.floor(dataMin * 1.3)
            }
            if (dataMax > 0) {
                max = Math.ceil(dataMax * 1.3)
            } else {
                max = Math.ceil(dataMax / 1.3)
            }

            
            if (min === max) {
                min -= 1
                max += 1
            }
            return { min, max }
        },
        buildXLabelShowIndices(xLabels) {
            const len = xLabels.length
            if (len === 0) return new Set()
            const showIndices = new Set([0, len - 1])
            const zeroIdx = xLabels.findIndex((x) => Number(x) === 0)
            if (zeroIdx >= 0) {
                showIndices.add(zeroIdx)
            } else if (len > 2) {
                showIndices.add(Math.floor((len - 1) / 2))
            }
            return showIndices
        },
        setOption() {
            if (!this.data) return
            if (this.index == 0) {
                this.option.legend.show = true
            } else {
                this.option.legend.show = false
            }
            this.option.yAxis.name = this.unit[this.index]

            const points = this.data.A || []
            const xLabels = points.map((p) => p[0])
            this.xLabelShowIndices = this.buildXLabelShowIndices(xLabels)

            this.option.xAxis.data = xLabels
            this.option.xAxis.axisLabel.formatter = (val, index) => this.formatXAxisLabel(val, index)
            this.option.series[0].data = points.map((p) => p[1])
            this.option.series[1].data = (this.data.B || []).map((p) => p[1])
            this.option.series[2].data = (this.data.C || []).map((p) => p[1])

            const { min, max } = this.getYAxisRange()
            this.option.yAxis.min = min
            this.option.yAxis.max = max
        },




    },

    computed: {},

    watch: {


    },
}
</script>
<style lang="scss" scoped></style>
