<template>
    <div>
        <!-- <MyEChart style="height: 400px;width: 100%" v-for="item in echartsList" :options="item" /> -->
        <div id="container0" style="height:400px;width:100%;"></div>
        <div id="container1" style="height:400px;width:100%;"></div>


    </div>

</template>
<script setup lang='ts'>
import MyEChart from '@/components/echarts/MyEchart.vue'

import Highcharts from 'highcharts';
import { ref, reactive, onUnmounted } from 'vue'
const props = defineProps({
    wp: {
        type: Object,

    },
    boxoList: {
        type: Object,

    },
    value: {
        type: Number,
        default: 1
    },

})
// let data = [[-100, -3.41, -3.39, -3.34, 1, 2, 3], [-99.92, -5.19, -5.23, -5.19, 4, 5, 6], [-99.84, -7.28, -7.26, -7.26, 10, 20, 30]]






const echartsList: any = ref([])
const SA:any = ref([])
const SB:any = ref([])
const SC:any = ref([])
const info = () => {


    let result = props.wp?.listWaveData.map(item => {
        let A = [[item[0], item[1]], [item[0], item[4]],];
        let B = [[item[0], item[2]], [item[0], item[5]],]; // 注意：item[7] 会是 undefined，需要确保数据长度或调整索引
        let C = [[item[0], item[3]], [item[0], item[6]],]; // 根据要求，这里 C 的第二个和第三个子数组的第二个元素取自 subArray[4] 和 subArray[6]

        // 由于 subArray[7] 在原始数据中不存在，我们可以使用 subArray[5] 的下一个有效索引 subArray[6]（对于 B 的第三个子数组的第二个元素）
      

        return { A, B, C };
    }).reduce((acc, { A, B, C }) => {
        acc.A[0].push(A[0]);
        acc.A[1].push(A[1]);
        acc.B[0].push(B[0]);
        acc.B[1].push(B[1]);
        acc.C[0].push(C[0]);
        acc.C[1].push(C[1]);
        return acc;
    }, { A: [[],[]], B: [[],[]], C: [[],[]] });

     SA.value = result.A;
     SB.value = result.B;
     SC.value = result.C;

    console.log( SA.value );
    console.log( SB.value );
    console.log( SC.value);

    let num = (props.wp?.waveTitle.length - 1) / 3

    for (let i = 0; i < num; i++) {
        // A.value = []
        // B.value = []
        // C.value = []
        // props.wp?.listWaveData.forEach((item: any,) => {
        //     A.value.push([item[0], item[i * 3 + 1]])
        //     B.value.push([item[0], item[i * 3 + 2]])
        //     C.value.push([item[0], item[i * 3 + 3]])
        // })
        setTimeout(() => {

            // echartsList.value.push({
            //     title: {
            //         text: i == 0 ? '123' : '',
            //         x: 'center',
            //     },
            //     tooltip: {
            //         axisPointer: {
            //             type: 'cross',
            //             label: {
            //                 color: '#fff',
            //                 fontSize: 16
            //             }
            //         },
            //         textStyle: {
            //             color: '#fff',
            //             fontStyle: 'normal',
            //             opacity: 0.35,
            //             fontSize: 14
            //         },
            //         backgroundColor: 'rgba(0,0,0,0.55)',
            //         borderWidth: 0,
            //     },
            //     dataZoom: [
            //         {
            //             type: 'inside',
            //             height: 13,
            //             start: 0,
            //             bottom: '20px',
            //             end: 25
            //         },
            //         {
            //             start: 0,
            //             height: 13,
            //             bottom: '20px',
            //             end: 25
            //         }
            //     ],
            //     xAxis: {

            //         // data: data.filter(item => item.phaseType == 'A').map(item => item.time),
            //         name: '时间',
            //         type: 'value',
            //         axisLine: {
            //             show: true,
            //             onZero: false //-----------重点
            //         },
            //         // splitLine: {
            //         //     show: false,
            //         // }

            //     },
            //     yAxis: {
            //         type: 'value',
            //         name: name,
            //         // splitLine: {
            //         //     show: false,
            //         // }
            //         // max: max,
            //         // min: min

            //     },
            //     // legend: {
            //     //     data: ['A', 'B', 'C']
            //     //     // selectedMode: false,
            //     // },
            //     grid: {
            //         top: '30px',
            //         left: '30px'
            //     },
            //     color: ['#DAA520', '#2E8B57', '#A52a2a'],
            //     series: [
            //         {
            //             name: 'A相',
            //             type: 'line',
            //             smooth: true,
            //             symbol: 'none',
            //             // 开启渐进式渲染
            //             progressive: 2000,
            //             // 渲染阈值，大于此值则启动渐进渲染
            //             progressiveThreshold: 5000,
            //             sampling: 'average',
            //             data: A

            //         },
            //         {
            //             name: 'B相',
            //             type: 'line',
            //             smooth: true,
            //             symbol: 'none',
            //             // 开启渐进式渲染
            //             progressive: 2000,
            //             // 渲染阈值，大于此值则启动渐进渲染
            //             progressiveThreshold: 5000,
            //             sampling: 'average',
            //             data: B
            //         },
            //         {
            //             name: 'C相',
            //             type: 'line',
            //             smooth: true,
            //             symbol: 'none',
            //             // 开启渐进式渲染
            //             progressive: 2000,
            //             // 渲染阈值，大于此值则启动渐进渲染
            //             progressiveThreshold: 5000,
            //             sampling: 'average',
            //             data: C
            //         }
            //     ],
            //     options: {
            //         animation: false,
            //         dataZoom: [{
            //             type: 'inside',
            //             height: 13,
            //             start: 0,
            //             bottom: '20px',
            //             end: 10
            //         },
            //         {
            //             start: 0,
            //             height: 13,
            //             bottom: '20px',
            //             end: 10
            //         }]
            //     }
            // })
            Highcharts.chart(`container${i}`, {

                chart: {
                    zooming: {
                        type: 'x'
                    }
                },

                title: {
                    text: '123',
                    align: 'left'
                },

                subtitle: {
                    text: 'Using the Boost module',
                    align: 'left'
                },

                accessibility: {
                    screenReaderSection: {
                        beforeChartFormat: '<{headingTagName}>' +
                            '{chartTitle}</{headingTagName}><div>{chartSubtitle}</div>' +
                            '<div>{chartLongdesc}</div><div>{xAxisDescription}</div><div>' +
                            '{yAxisDescription}</div>'
                    }
                },

                tooltip: {

                },

                xAxis: {
                    type: 'datetime'
                },

                series: [
                    {
                        name: 'A相',
                        type: 'line',
                        lineWidth: 0.5,
                        data: SA.value[i]

                    },
                    {
                        name: 'B相',
                        type: 'line',
                        lineWidth: 0.5,
                        data: SB.value[i]
                    },
                    {
                        name: 'C相',
                        type: 'line',
                        lineWidth: 0.5,
                        data: SC.value[i]
                    }
                ],

            });
        }, 0);
    }
}

var init = () => {
    Highcharts.chart('container', {
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Snow depth at Vikjafjellet, Norway'
        },
        subtitle: {
            text: 'Irregular time data in Highcharts JS'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                // don't display the year
                month: '%e. %b',
                year: '%b'
            },
            title: {
                text: 'Date'
            }
        },
        yAxis: {
            title: {
                text: 'Snow depth (m)'
            },
            min: 0
        },
        // tooltip: {
        //     headerFormat: '<b>{series.name}</b><br>',
        //     pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
        // },

        plotOptions: {
            series: {
                marker: {
                    symbol: 'circle',
                    fillColor: '#FFFFFF',
                    enabled: true,
                    radius: 2.5,
                    lineWidth: 1,
                    lineColor: null
                }
            }
        },

        colors: ['#6CF', '#39F', '#06C', '#036', '#000'],


        series: [

        ]
    });



}

onMounted(() => {
    info()

    // init();
})
onUnmounted(() => {
    SA.value = []
    SB.value = []
    SC.value = []
})



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