<template>
    <div v-loading="loading">
        <div>
            <div id="boxi" :style="`height:${vh};overflow: hidden;`">
                <div class="bx" id="wave"></div>
            </div>
            <el-tabs type="border-card">
                <el-tab-pane label="暂态波形上送" :style="'height:' + vhh">
                    <vxe-table
                        stripe
                        :data="Data"
                        :height="height"
                        border
                        style="width: 100%"
                        header-cell-class-name="table_header"
                    >
                        <vxe-column align="center" field="number" title="事件段"></vxe-column>
                        <vxe-colgroup align="center" field="number1" title="波形起始点相位(°)">
                            <vxe-column align="center" field="number2" title="A相"></vxe-column>
                            <vxe-column align="center" field="number3" title="B相"></vxe-column>
                            <vxe-column align="center" field="number4" title="C相"></vxe-column>
                        </vxe-colgroup>
                        <vxe-colgroup align="center" field="number" title="跳变段电压变化率(V/ms)">
                            <vxe-column align="center" field="number5" title="A相"></vxe-column>
                            <vxe-column align="center" field="number6" title="B相"></vxe-column>
                            <vxe-column align="center" field="number7" title="C相"></vxe-column>
                        </vxe-colgroup>
                        <vxe-colgroup align="center" field="number" title="相位跳变(°)">
                            <vxe-column align="center" field="number8" title="A相"></vxe-column>
                            <vxe-column align="center" field="number9" title="B相"></vxe-column>
                            <vxe-column align="center" field="number10" title="C相"></vxe-column>
                        </vxe-colgroup>
                        <vxe-column align="center" field="number11" title="总分段数目"></vxe-column>
                        <vxe-column
                            align="center"
                            field="number12"
                            title="三相电压不平衡度(%)"
                            width="180"
                        ></vxe-column>
                        <vxe-column align="center" field="number13" title="触发类型"></vxe-column>
                        <vxe-column align="center" field="number14" title="暂降原因"></vxe-column>
                    </vxe-table>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import { downloadWaveFile, getMonitorEventAnalyseWave } from '@/api/event-boot/transient'
import { mainHeight } from '@/utils/layout'
import * as echarts from 'echarts'
import url from '@/assets/img/point.png'
import $ from 'jquery'
export default {
    props: {
        flag: {
            type: Boolean,
            default: false
        },
        DColor: {
            type: Boolean,
            default: false
        },
        boxoList: {
            type: [Object, Array]
        },
        GJList: {
            type: [Object, Array]
        }
    },
    data() {
        return {
            loading: true,

            valA: 0,
            isOpen: false,
            time: '',
            type: '',
            severity: '',
            iphasic: '',
            eventValue: '',
            persistTime: '',
            lineName: '',
            subName: '',
            waveDatas: [],

            Data: [
                {
                    number: 1,
                    number1: 0,
                    number2: 0,
                    number3: 0,
                    number4: 0,
                    number5: 0,
                    number6: 0,
                    number7: 0,
                    number8: 0,
                    number9: 0,
                    number10: 0,
                    number11: 1,
                    number12: 0,
                    number13: '其他',
                    number14: '其他'
                }
            ],
            height: null,
            vhh: null,
            ptpass: '',
            waveHeight: undefined,
            $wave: undefined,
            color: '#006565',
            charts: {},
            arrpoints: [],
            titles: '',
            vh: null,
            vw: null,
            zoom: ''
        }
    },
    created() {},
    watch: {
        value: function (a, b) {
            if (a == 2) {
                // $("#wave1").remove();
                this.initWaves()
            } else {
                $('#wave1').remove()
                this.initWaves()
            }
        }
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.$wave = $('#wave').eq(0)
        this.$nextTick(() => {
            this.query()
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.zoom = 1 / document.body.style.zoom
            if (this.flag) {
                // console.log(123);
                this.vh = mainHeight(280).height
            } else {
                // console.log(3333);
                this.vh = mainHeight(305).height
            }
        },
        query() {
            this.loading = true
            this.initWave()
        },

        //开始画图
        initWave() {
            //清除之前增加的div
            // $("#wave ~ .bx1").remove();
            $('div.bx1').remove()
            //设置暂降触发点的位置 一次值与二次值Y轴不同（不是计算出来的）
            // var height = $(window).height() - 90;
            var picHeight
            var show = true

            //var v = $("#interval").val();
            var isvisible = false

            picHeight = this.vh
            // this.$wave.css('height', picHeight)
            // this.$wave.css('width', '100%')
            $('#wave').css('height', picHeight)
            $('#wave').css('width', this.vw)

            var adata = []
            var bdata = []
            var cdata = []
            var max = 0
            var min = 0
            //绘制横向第一个波形图
            this.GJList.smp_x.forEach((item, ind) => {
                if (this.GJList.smp_a[ind] > max) {
                    max = this.GJList.smp_a[ind]
                } else if (this.GJList.smp_a[ind] < min) {
                    min = this.GJList.smp_a[ind]
                }
                if (this.GJList.smp_b[ind] > max) {
                    max = this.GJList.smp_b[ind]
                } else if (this.GJList.smp_b[ind] < min) {
                    min = this.GJList.smp_b[ind]
                }
                if (this.GJList.smp_c[ind] > max) {
                    max = this.GJList.smp_c[ind]
                } else if (this.GJList.smp_c[ind] < min) {
                    min = this.GJList.smp_c[ind]
                }

                adata.push([item, this.GJList.smp_a[ind]])
                bdata.push([item, this.GJList.smp_b[ind]])
                cdata.push([item, this.GJList.smp_c[ind]])
            })
            //绘制瞬时波形图
            // const echarts = require('echarts')
            let wave = document.getElementById('wave')
            let _this = this
            var myChartes = echarts.init(wave)
            let echartsColor = {
                WordColor: '#000',
                thread: '#000000',
                FigureColor: [
                    '#07CCCA ',
                    '#00BFF5',
                    '#FFBF00',
                    '#77DA63',
                    '#D5FF6B',
                    '#Ff6600',
                    '#FF9100',
                    '#5B6E96',
                    '#66FFCC',
                    '#B3B3B3',
                    '#FF00FF',
                    '#CC00FF',
                    '#FF9999'
                ]
            }
            console.log('🚀 ~ this.boxoList:', this.boxoList)

            var option = {
                tooltip: {
                    top: '10px',
                    trigger: 'axis',
                    borderColor: 'grey',
                    backgroundColor: '#fff',
                    style: {
                        color: '#000',
                        fontSize: '15px',
                        padding: 10
                    },
                    formatter: function (params) {
                        // console.log(params)
                        var tips = ''
                        tips += '时刻:' + params[0].data[0] + '</br/>'

                        for (var i = 0; i < params.length; i++) {
                            if (params[i].seriesName != '暂降触发点') {
                                tips += params[i].seriesName + ':' + params[i].value[1] + '<br/>'
                            }
                        }
                        return tips
                    },
                    // 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
                },

                title: {
                    left: 'center',
                    text: '发生时刻：' + this.boxoList.startTime + ' PT变化:' + this.boxoList.pt,
                    textStyle: {
                        fontSize: 16,
                        color: _this.DColor ? '#fff' : echartsColor.WordColor
                    }
                },
                legend: {
                    left: '5%',
                    top: '20',
                    verticalAlign: 'top',
                    enabled: true,
                    itemDistance: 5,
                    textStyle: {
                        color: _this.DColor ? '#fff' : echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },

                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                toolbox: {
                    show: false,
                    feature: {
                        //restore: {},
                        saveAsImage: {
                            iconStyle: {
                                borderColor: _this.DColor ? '#fff' : echartsColor.WordColor
                            }
                        }
                    }
                },
                xAxis: {
                    type: 'value',
                    name: '时刻',
                    boundaryGap: false,
                    min: this.GJList.smp_x[0],
                    max: this.GJList.smp_x[this.GJList.smp_x.length - 1] + 1,
                    title: {
                        text: 'ms',
                        textStyle: {
                            fontSize: 12,
                            color: _this.DColor ? '#fff' : echartsColor.WordColor
                        },
                        enabled: true,
                        align: 'high'
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: _this.DColor ? '#fff' : echartsColor.thread
                        },
                        onZero: false //-----------重点
                    },
                    axisLabel: {
                        color: _this.DColor ? '#fff' : echartsColor.WordColor,
                        formatter: function (value, index) {
                            if (_this.valA != (value - 0).toFixed(0)) {
                                _this.valA = (value - 0).toFixed(0)
                                return (value - 0).toFixed(0)
                            }
                        }
                        //rotate:39
                    }
                    // data: this.syncExtremes,
                },
                yAxis: {
                    type: 'value',
                    name: 'kV',
                    title: {
                        align: 'high',
                        offset: 0,
                        text: 'kV',
                        rotation: 0,
                        y: -10
                    },

                    boundaryGap: [0, '100%'],
                    showLastLabel: true,
                    max: (max + 10).toFixed(2),
                    min: (min - 10).toFixed(2),
                    opposite: false,
                    nameTextStyle: {
                        color: _this.DColor ? '#fff' : echartsColor.WordColor
                    },
                    //minInterval: 1,
                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: _this.DColor ? '#fff' : echartsColor.thread
                        },
                        onZero: false //-----------重点
                    },
                    axisLabel: {
                        color: _this.DColor ? '#fff' : echartsColor.WordColor,
                        formatter: function (value, index) {
                            return (value - 0).toFixed(2)
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [_this.DColor ? '#fff' : echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                grid: {
                    left: '1%',
                    right: '40px',
                    bottom: '40px',
                    top: '55px',
                    containLabel: true
                },
                dataZoom: [
                    {
                        type: 'inside',
                        height: 13,
                        start: 0,
                        bottom: '20px',
                        end: 100
                    },
                    {
                        start: 0,
                        height: 13,
                        bottom: '20px',
                        end: 100
                    }
                ],
                series: [
                    {
                        name: '跳变期',
                        type: 'line',
                        data: [],
                        showSymbol: true, // 强制显示标记
                        symbol: 'rect', // 标记形状为方块
                        symbolSize: 10, // 方块大小
                        itemStyle: {
                            color: '#888888', // 方块颜色为灰色
                            borderWidth: 0
                        },

                        markArea: {
                            silent: true, // 不响应交互
                            itemStyle: { color: '#ccc' },
                            data: [
                                [
                                    { xAxis: '0' }, // 第一个跳变期起始
                                    { xAxis: '5' } // 第一个跳变期结束
                                ],
                                [
                                    { xAxis: '210' }, // 第二个跳变期起始
                                    { xAxis: '220' } // 第二个跳变期结束
                                ]
                            ]
                        }
                    },
                    {
                        name: 'A相',
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: '#DAA520'
                        },
                        data: adata
                    },
                    {
                        name: 'B相',
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: '#2E8B57'
                        },
                        data: bdata
                    },
                    {
                        name: 'C相',
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: '#A52a2a'
                        },
                        data: cdata
                    },
                    {
                        name: '暂降触发点',
                        type: 'scatter',
                        symbol: 'image://' + url,
                        itemStyle: {
                            width: 16,
                            height: 16
                        },
                        data: [[0, min]]
                    }
                ]
            }

            myChartes.setOption(option)
            // window.echartsArr.push(myChartes)
            setTimeout(() => {
                myChartes.resize()
                this.loading = false
            }, 400)

            //第一个波形图数据绘制完毕后，绘制后续的波形图

            // let waveDatasTemp = waveDatas.slice(1);
            // waveDatasTemp.reverse();
        }
    }
}
</script>
