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

<script setup>
import { Chart } from 'highcharts-vue';
import { computed } from "vue";
import { useMessage } from "naive-ui";
const message = useMessage()
const popData = defineProps({
    dataList:{
        type:Array,
        default: () => [],
    }
})
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
    
    return `最大值${maxData}，最小值${minData}，平均值${pingjun}`
}
const chartOptions = () => {
    var obj = {
        chart: {
            zoomType: 'x',//框选放大
            panning: true, //禁用放大
            // zooming: {
            //     singleTouch: true,
            //     resetButton: {},
            //     type: 'x',
            //     panning: true, //禁用放大
            // },
            events: {
                selection(event) {
                    console.log('时间区间选择', event.xAxis)
                },
            },
        },
        time: {
            useUTC: false
        },
        boost: {
            useGPUTranslations: false
        },
        xAxis: {
            // labels: {
            //     format: '{value:%Y-%m-%d %H:%M:%S}',
            // },
            type: 'datetime',
        },
        yAxis: {
            title: {
                // text: '温度℃'
            },
            opposite: false, //设置y轴提示在左边
        },
        plotOptions: {
            series: {
                turboThreshold: 0 //性能阈值检查,默认值为1000，当数据量超过这个值就会报错；如果需要关掉性能阈值检查，可以将此参数设置为 0
            },
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        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
    }
    return obj
}



</script>