<template>
    <div style="height: 100%;" id="Chartid">
    <Chart ref="chart1" style="min-height: 600px" :options="chartOptions()" constructor-type="stockChart"></Chart>
    </div>
</template>

<script>
import { Chart } from 'highcharts-vue';
import moment from 'moment';



export default {
    props:['higData'],
    components: { Chart },
    data() {
        return {
            seriesData:[],
            selfshow:true,//true显示默认显示温度
        }
    },
    watch:{
        higData:{
            handler(newVal){
                this.TidyUpData(newVal)
            },
            deep:true
        }
    },
    mounted(){
        
    },
    methods: {
        seIfchart(){//切换温湿度
            console.log('切换',this.seriesData,this.selfshow)
            this.selfshow = !this.selfshow
           
        },
        



        async TidyUpData(arr){
            const loading = this.$loading({
                lock: true,
                text: '图表数据渲染中，请稍后...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.seriesData = []
            for (let i = 0; i < arr.length; i++) {
                let resIt = await this.setDataFun(arr[i])
                this.seriesData.push(resIt)
            }
            loading.close()
        },
        
        setDataFun(arr){
            return new Promise(resolve=>{
                const obj = {
                    name:arr[0].T_sn,
                    data:[]
                }
                arr.forEach(item => {
                    obj.data.push([new Date(item.T_time).getTime(),item.T_rh,item.T_t,item.T_sn,item.T_id,item.ID])
                });
                
                setTimeout(() => {
                    resolve(obj)
                }, 500);
            }) 
        },
        chartOptions() {
            let seIf = this
            var obj = {
                chart: {
                    zoomType: 'x',//框选放大
                    panning: true, //禁用放大
                    // zooming: {
                    //     singleTouch: true,
                    //     resetButton: {},
                    //     type: 'x',
                    //     panning: true, //禁用放大
                    // },
                    events: {
                        selection(event) {
                            let maxTime1 = moment(Math.floor(event.xAxis[0].min)).format('YYYY-MM-DD HH:mm:ss');
                            let maxTime2 = moment(Math.floor(event.xAxis[0].max)).format('YYYY-MM-DD HH:mm:ss')
                            console.log('时间区间选择',maxTime1,maxTime2)
                            let timearr = [maxTime1,maxTime2]
                            seIf.$emit("setTime",timearr)
                        },
                    },
                },
                time: {
                    useUTC: false
                },
                boost: {
                    useGPUTranslations: true
                },
                // xAxis: {
                //     labels: {
                //         format: '{value:%Y-%m-%d %H:%M:%S}',
                //     },
                // },
                yAxis: {
                    title: {
                        text: '湿度Rh'
                    },
                    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: 'Rh',
                    xDateFormat: '%Y-%m-%d %H:%M:%S',
                    // chart: {
                    //     type: 'spline' //图表类型,column,line,spline,area等
                    // }
                },
                series:this.seriesData
            }
            // window.onresize = resize;
            return obj
        },
    }
}
</script>