<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],
        },
        filterValue: {
            type: [String],
        },
    },
    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],
                },

                yAxis: {
                    type: 'log',
                    min: '0.001',
                    max: '1000',
                    name: 's',
                    inverse: true,
                    axisLabel: {
                        rotate: -90,
                    },
                    splitLine: { show: false },
                },
                xAxis: {
                    type: 'value',
                    splitNumber: 10,
                    minInterval: 20,
                    position: 'top',
                    rotate: 90,
                    max: 140,
                    axisLabel: {
                        rotate: -90,
                    },
                    name: '%',
                },
                series: [
                    {
                        name: '分割线',
                        type: 'line',
                        data: [
                            [0, 0.05],
                            [50, 0.05],
                            [50, 0.2],
                            [70, 0.2],
                            [70, 0.5],
                            [80, 0.5],
                            [80, 10],
                            [80, 1000],
                        ],
                        showSymbol: false,
                        tooltips: {
                            show: false,
                        },
                        color: '#DAA520',
                    },
                    {
                        name: '可容忍事件',
                        type: 'scatter',
                        symbol: 'circle',
                        // data: this.pointF,
                        data: [],
                        color: 'green',
                    },
                    {
                        name: '不可容忍事件',
                        type: 'scatter',
                        symbol: 'circle',
                        // data: this.pointFun,
                        data: [],
                        color: 'red',
                    },
                ],
            },
            status: 'loading',
            echartRef: null,
            pointF: [],
            pointFun: [],
            data: [],
            maxXAxis: 140,
        }
    },
    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() {
            var standF = 0
            var unstandF = 0
            this.pointF = []
            this.pointFun = []
            var total = 0
            let dataList = [0]
            total = this.data.length
            if (total == 0) {
            } else {
                for (var i = 0; i < this.data.length; i++) {
                    var point = []
                    var xx = this.data[i].evtParamTm.replace(/s/g, '')
                    var yy = this.data[i].evtParamVVaDepth.replace(/%/g, '')
                    var time = this.data[i].startTime.replace('T', ' ')
                    dataList.push(yy)
                    point = [yy, xx, time, this.data[i]]

                    if (xx < 0.05) {
                        standF++
                        this.pointF.push({
                            value: point,
                            itemStyle: { normal: { color: 'green' } },
                        })
                    } else if (xx < 0.2) {
                        if (yy > 50) {
                            standF++
                            this.pointF.push({
                                value: point,
                                itemStyle: { normal: { color: 'green' } },
                            })
                        } else {
                            unstandF++
                            this.pointFun.push({
                                value: point,
                                itemStyle: { normal: { color: 'red' } },
                            })
                        }
                    } else if (xx < 0.5) {
                        if (yy > 70) {
                            standF++
                            this.pointF.push({
                                value: point,
                                itemStyle: { normal: { color: 'green' } },
                            })
                        } else {
                            unstandF++
                            this.pointFun.push({
                                value: point,
                                itemStyle: { normal: { color: 'red' } },
                            })
                        }
                    } else {
                        if (yy > 80) {
                            standF++
                            this.pointF.push({
                                value: point,
                                itemStyle: { normal: { color: 'green' } },
                            })
                        } else {
                            unstandF++
                            this.pointFun.push({
                                value: point,
                                itemStyle: { normal: { color: 'red' } },
                            })
                        }
                    }
                }
            }

            this.option.xAxis.max = Math.max(
                140,
                Math.ceil(
                    Math.max(
                        ...dataList
                            .filter((item) => {
                                return item !== '-' && !isNaN(Number(item))
                            })
                            .map((item) => Number(item)),
                    ) / 10,
                ) * 10,
            ) //this.maxXAxis

            this.option.series[1].data = this.pointF
            this.option.series[2].data = this.pointFun

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

        bindChartClickEvent() {
            if (!this.echartRef) return
            this.echartRef.on('click', (params) => {
                // 点击查看详情
                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 || []).filter((k) =>
                    this.filterValue == '' ? k : k.showName == this.filterValue,
                )
                this.gongfunction()
            },
            deep: true,
            immediate: true,
        },
        filterValue: {
            handler(val, oldVal) {
                this.data = (this.store.data || []).filter((k) => (val == '' ? k : k.showName == val))
                this.gongfunction()
            },
        },
    },
}
</script>
<style lang="scss" scoped></style>
