<template>
    <div style="height: 100%;">
        <Chart ref="chart1" style="min-height: 600px;" :options="seriesData.chartData" constructor-type="stockChart"></Chart>
        <!-- <div style="text-align: center;margin-top: 20px;">{{ computedData }}</div> -->
    </div>
</template>

<script setup>
import emitter from "@/plugin/bus";
import { Chart } from 'highcharts-vue';
import { computed, onBeforeUnmount, reactive, watch } from "vue";
import { useMessage } from "naive-ui";
import {useStore} from 'vuex'
const message = useMessage()
const popData = defineProps({
    dataList: {
        type: Array,  
        default: () => [],
    }
})

const plotLinesData = reactive({
    tBottom:null,
    tTop:null
})
const store = useStore()
const plot = computed(() => store.state.plotLineList)
plotLinesData.tBottom = plot.value.tBottom
plotLinesData.tTop = plot.value.tTop


emitter.on("onMessage", (val) => {
    plotLinesData.tBottom = val.tBottom
    plotLinesData.tTop = val.tTop
});
//关闭
onBeforeUnmount(() => {
    emitter.off("onMessage");
});
const computedData = computed(() => {
    // console.log('计算属性',popData.dataList)
    if (popData.dataList.length != 0) {
        return computedDataFun()
    } else {
        return ''
    }
})
const computedDataFun = () => {
    let arr = popData.dataList
    let mapData = []
    for (const key of arr) {
        for (let i = 0; i < key.data.length; i++) {
            mapData.push(key.data[i][1])
        }
    }
    if (mapData.length == 0) {
        message.error('哎呀，没有可展示的数据哦')
        return
    }
    //求和
    let num = mapData.reduce((n, m) => n + m);//求和
    //最大值
    let maxData = Math.max(...mapData)
    //最小值
    let minData = Math.min(...mapData)
    //平均值
    let pingjun = (num / mapData.length).toFixed(1)

    return `最大值${maxData}，最小值${minData}，平均值${pingjun}`
}
watch(()=>popData.dataList, (newValue)=>{
    console.table('watch',seriesData.chartData)
    seriesData.chartData.series = newValue
    // chartOptions()
    // chart1.value.chart.userOptions.series = []
},{deep:true,immediate: false})

// const dataLists = reactive({ 
//     objData:[{
//         name:'',
//         data:[]
//     }],
//     arrData:[]
// })
// const funData = ()=>{
//     let t = ref(1681621260000)
//     for (let index = 0; index < 3000; index++) {
//         t.value = t.value + 60000
//         dataLists.arrData.push([t.value,Math.random()*10, "117", "117", Math.random()*100])
//     }
//     dataLists.objData[0].data = dataLists.arrData
//     console.log('显示的值1',dataLists.objData)
// }
// funData()
const seriesData = reactive({
    chartData:null
})
let chartOptions = () => {
    seriesData.chartData = {
        chart: {
            // renderTo : 'test_container',
            type : 'scatter',
            zoomType : 'x',//框选放大
            // panning: true, //禁用放大
            events: {
                selection :  function (event) {
                    console.log('1212121',event)
                // 获取操作chart
                // var chart = ''
                //  // 点击缩放重置
                // if(event.xAxis == undefined){
                //         // x轴最大值设为xMaxValue
                //         chart.xAxis[0].update({ max: xMaxValue});
                //  }
                //  // 选择x轴区域
                //     else{
                //         // x轴最大值设为null
                //         chart.xAxis[0].update({ max: null});
                //  }
                }
            }
            
        },
        time: {
            useUTC: true
        },
        
        boost: {
            useGPUTranslations: true
        },
        xAxis: {
            // labels: {
            //     format: '{value:%Y-%m-%d %H:%M:%S}',
            // },
            type: 'datetime',
        },
        yAxis: {
            opposite: false, //设置y轴提示在左边
            title: {
                // text: '温度℃'
            },
            plotLines:[{
                color: '#FF1D00', //线的颜色，定义为红色
                dashStyle: 'DashDot', //默认值，这里定义为实线
                value: plotLinesData.tTop, //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线  
                width: 2, //标示线的宽度，2px
                label: {
                    text: `温度上限（${plotLinesData.tTop}℃）`, //标签的内容
                    align: 'right', //标签的水平位置，水平居左,默认是水平居中center
                    // x: 10 //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px
                }
            },{
                color: '#FF1D00', //线的颜色，定义为红色
                dashStyle: 'DashDot', //默认值，这里定义为实线
                value: plotLinesData.tBottom, //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线  
                width: 2, //标示线的宽度，2px
                label: {
                    text: `温度下限（${plotLinesData.tBottom}℃）`, //标签的内容
                    align: 'right', //标签的水平位置，水平居左,默认是水平居中center
                    // x: 10 //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px
                }
            }]
           
        },
        plotOptions: {
            // line:{
            //     dataLabels:{
            //         enabled:true, //是否显示数据标签
            //         align:'left',
            //         verticalAlign: 'bottom'
            //     }
            //  },
            series: {
                turboThreshold: 0 //性能阈值检查,默认值为1000，当数据量超过这个值就会报错；如果需要关掉性能阈值检查，可以将此参数设置为 0
            },
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        rangeSelector: {
            buttons: [], // 不显示左边的zoom
            selected: 1,
            inputEnabled: false // 不显示日期输入框
            
        },
        title: {
            // text: '冷链温度曲线图'
        },
        subtitle: {
            useHTML: true,
            // text:'1111'//副标题
        },
        dataGrouping: {
            enabled: true // 取消根据日期进行数据分组
        },
        tooltip: {
            valueSuffix: ' ℃',
            xDateFormat: '%Y-%m-%d %H:%M:%S',
            // pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}%</b><br/>',
            shared: true,
            chart: {
                type: 'spline' //图表类型,column,line,spline,area等
            }
        },
        series: popData.dataList,//这是模拟得数据改成船舰来的
    }
    console.log('执行')
    // return obj
}
chartOptions()
</script>