<template>
    <!-- ITIC -->
    <view>
        <l-echart v-if="status != 'loading'" ref="echartRef" @finished="initChart"></l-echart>
        <uni-load-more v-else :status="status"></uni-load-more>
    </view>
</template>
<script>
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
export default {
    components: {},
    props: {
        store: {
            type: [Object],
        },
 
    },
    data() {
        return {
            option: {
                backgroundColor: '#fff',
                grid: {
                    left: '10px',
                    right: '40rpx',
                    bottom: '40rpx',
                    top: '10px',
                    containLabel: true,
                },
                legend: {
                    data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
                    right: '10px',
                    bottom: '10px',
                    textStyle: {
                        fontSize: 10,
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 8,
                    padding: [5, 5, 5, 10],
                },

                color: ['#FF8C00', '#00BFFF', 'green', 'red'],
                yAxis: {
                    type: 'log',
                    min: '0.001',
                    max: '1000',
                    name: 's',
                    inverse: true,
                    axisLabel: {
                        rotate: -90,
                    },
                    splitLine: { show: false },
                },
                xAxis: {
                    type: 'value',
                    splitNumber: 10,
                    minInterval: 3,
                    position: 'top',
                    rotate: 90,
                    axisLabel: {
                        rotate: 90,
                    },
                    name: '%',
                },
                series: [
                    {
                        name: '上限',
                        type: 'line',
                        data: [
                            [200, 0.001],
                            [140, 0.003],
                            [120, 0.003],
                            [120, 0.5],
                            [110, 0.5],
                            [110, 10],
                            [110, 1000],
                        ],
                        showSymbol: false,
                        tooltips: {
                            show: false,
                        },
                        color: '#FF8C00',
                    },
                    {
                        name: '下限',
                        type: 'line',
                        data: [
                            [0, 0.02],
                            [70, 0.02],
                            [70, 0.5],
                            [80, 0.5],
                            [80, 10],
                            [90, 10],
                            [90, 1000],
                        ],
                        showSymbol: false,
                        tooltips: {
                            show: false,
                        },
                        color: '#00BFFF',
                    },
                    {
                        name: '可容忍事件',
                        type: 'scatter',
                        symbol: 'circle',
                        // data: this.pointI,
                        data: [],
                        color: 'green',
                    },
                    {
                        name: '不可容忍事件',
                        type: 'scatter',
                        symbol: 'circle',
                        // data: this.pointIun,
                        data: [],
                        color: 'red',
                    },
                ],
            },
            status: 'loading',
            echartRef: null,
            pointI: [],
            pointIun: [],
            data: [],
        }
    },
    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.bindChartClickEvent()
                this.echartRef.setOption(this.option, true)
            } catch (error) {
                console.error('图表初始化失败:', error)
            }
        },

        gongfunction() {
            // 初始化计数与数据数组
            let normalCount = 0
            let abnormalCount = 0
            this.normalPoints = []
            this.abnormalPoints = []

            if (!this.data || this.data.length === 0) {
                this.updateChartOption()
                return
            }

            // 缓存长度，遍历数据
            const len = this.data.length
            for (let i = 0; i < len; i++) {
                const item = this.data[i]
                // 建议确认正则意图，/s/g 仅移除字母 s，若去空格应为 /\s/g
                const xx = parseFloat(item.evtParamTm.replace(/s/g, ''))
                const yy = parseFloat(item.evtParamVVaDepth.replace(/%/g, ''))
                const time = item.startTime.replace('T', ' ')

                const pointData = [yy, xx, time, item]
                const isNormal = this.checkPointStatus(xx, yy)
                const pointObj = {
                    value: pointData,
                    itemStyle: { normal: { color: isNormal ? 'green' : 'red' } },
                }

                if (isNormal) {
                    normalCount++
                    this.normalPoints.push(pointObj)
                } else {
                    abnormalCount++
                    this.abnormalPoints.push(pointObj)
                }
            }

            this.updateChartOption()
        },

        // 提取判断逻辑为独立方法
        checkPointStatus(xx, yy) {
            if (xx <= 0.003) {
                const line = 230 - 30000 * xx
                return yy <= line
            } else if (xx <= 0.02) {
                return yy <= 120
            } else if (xx <= 0.5) {
                return yy > 70 && yy < 120
            } else if (xx <= 10) {
                return yy > 80 && yy < 110
            } else {
                return yy > 90 && yy < 110
            }
        },

        updateChartOption() {
            // 建议避免硬编码 series 索引，可通过 seriesName 查找
            this.option.series[2].data = this.normalPoints
            this.option.series[3].data = this.abnormalPoints

            if (this.echartRef) {
                this.echartRef.setOption(this.option, true)
            } else {
                this.initChart()
            }
        },

        bindChartClickEvent() {
            if (!this.echartRef) return
            this.echartRef.on('click', (params) => {
                console.log('🚀 ~ params:', params.value[3])
                // 点击查看详情
                let item = params.value[3]
                let str = JSON.stringify(item).replace(/%/g, '百分比')
                // uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
            })
        },
    },

    computed: {},

    watch: {
        store: {
            handler(val, oldVal) {
                this.status = val.status
                this.data = (val.data || [])
                this.gongfunction()
            },
            deep: true,
            immediate: true,
        },
      
    },
}
</script>
<style lang="scss" scoped></style>
