<template>
    <div>
        <el-container id="dept" v-show="view1">
            <el-aside v-show="view" style="width: 315px" id="drag-dept-left">
                <muentree
                    @eleMenuData="getTreeText"
                    @chushiData="chushiData"
                    @ckeckData="ckeckData"
                    @treeckeckData="treeckeckData"
                    :checkbox="checkbox"
                    :number="number"
                    :tablename="tablename"
                    ref="commonTree"
                ></muentree>
            </el-aside>
            <div id="drag-dept">
                <el-tooltip class="item" effect="dark" :content="view ? '收缩' : '展开'" placement="top-start">
                    <i
                        :class="view ? 'el-icon-caret-left' : 'el-icon-caret-right'"
                        style="
                            font-size: 18px;
                            z-index: 2000;
                            cursor: pointer;
                            margin-right: 0px;
                            width: 30px;
                            height: 30px;
                            background: rgba(6, 70, 122, 0);
                        "
                        @click="changeview"
                    ></i>
                </el-tooltip>
            </div>
            <el-main
                id="drag-dept-right"
                class="pd10"
                v-loading="loading"
                style="padding-left: 5px"
                element-loading-text="数据加载中"
            >
                <div class="wzhixx" v-show="falg">
                    <div>
                        <div style="float: left; margin-top: -2px">
                            <i style="color: #339966; font-size: 20px" class="el-icon-location-information"></i>
                            <span style="color: #000">当前位置:</span>
                        </div>
                        <div style="height: auto; overflow: hidden">
                            <p class="zt animate h3">
                                <!-- {{ treenode!=undefined?treenode.parent.parent.parent.parent.data.name +`>` +treenode.parent.parent.parent.data.name +`>` +treenode.parent.parent.data.name +`>` +treenode.parent.data.name+`>` +treenode.data.name:wezhiname}} -->
                                {{
                                    treenode != undefined
                                        ? treenode.parent.parent.parent.data.name +
                                          `>` +
                                          treenode.parent.parent.data.name +
                                          `>` +
                                          treenode.parent.data.name +
                                          `>` +
                                          treenode.data.name
                                        : wezhiname
                                }}
                            </p>
                        </div>
                    </div>
                </div>

                <el-tabs
                    v-model="activeName"
                    type="border-card"
                    @tab-click="handleClick"
                    :style="'width: 100%; transform: translateX(0px);height:' + vh"
                >
                    <el-tab-pane
                        v-for="(item, index) in tabsData"
                        :label="item.label"
                        :key="item.id"
                        :name="item.id"
                        :index="index"
                        :lazy="true"
                    >
                        <el-row v-if="item.id === 'wtzhpg'">
                            <el-col>
                                <steadyevealuation
                                    id="wt"
                                    @chufaload="chufaload"
                                    :view="view"
                                    :treenode="treenode"
                                    :name="'wtzhpg'"
                                    :treeid="id"
                                    :dataTree="dataTree"
                                ></steadyevealuation>
                            </el-col>
                        </el-row>
                        <el-row v-if="item.id === 'wthgl'">
                            <el-col>
                                <steadyqualification
                                    :view="view"
                                    :treenode="treenode"
                                    :name="'wtzbhgl'"
                                    :treeid="id"
                                    :dataTree="dataTree"
                                ></steadyqualification>
                            </el-col>
                        </el-row>
                        <el-row v-if="item.id === 'wtsjfx'">
                            <el-col>
                                <trendanalysis
                                    @BoXi="BoXi"
                                    :view="view"
                                    :number="number"
                                    :ptType="ptType"
                                    :treenode="treenode"
                                    :linelist="linelist"
                                    @menuTree="menuTree"
                                    :name="'wtzbhgl'"
                                    :dataTree="dataTree"
                                ></trendanalysis>
                            </el-col>
                        </el-row>
                        <el-row v-if="item.id === 'xbpb'">
                            <el-col>
                                <harmonicspectrum
                                    :view="view"
                                    :treenode="treenode"
                                    :name="'wtzhpg'"
                                    :treeid="id"
                                    :dataTree="dataTree"
                                ></harmonicspectrum>
                            </el-col>
                        </el-row>
                        <el-row v-if="item.id === 'ycsj'">
                            <el-col>
                                <abnormaldata
                                    :view="view"
                                    :number="number"
                                    :ptType="ptType"
                                    @menuTree="menuTree"
                                    :treenode="treenode"
                                    :linelist="linelist"
                                    :dataTree="dataTree"
                                ></abnormaldata>
                            </el-col>
                        </el-row>
                        <el-row v-if="item.id === 'run'" :name="'sjwzx'">
                            <el-col>
                                <runningstate
                                    :view="view"
                                    :treenode="treenode"
                                    :treeid="id"
                                    :dataTree="dataTree"
                                ></runningstate>
                            </el-col>
                        </el-row>
                        <el-row v-if="item.id === 'sssj'">
                            <el-col>
                                <realtimedata
                                    :view="view"
                                    :treenode="treenode"
                                    :treeid="id"
                                    :dataTree="dataTree"
                                ></realtimedata>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
        <div v-if="view2" class="pd10">
            <el-row>
                <el-col :span="12">
                    <span v-if="view2" style="font-size: 14px; font-weight: ; line-height: 30px">值类型选择:</span>
                    <el-select v-if="view2" v-model="value" @change="changeView1" placeholder="请选择值类型">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-col>
                <el-col :span="12">
                    <el-button @click="backbxlb" type="primary" class="el-icon-refresh-right" style="float: right">
                        返回
                    </el-button>
                </el-col>
            </el-row>
            <el-tabs v-model="bxactiveName" @tab-click="bxhandleClick">
                <el-tab-pane label="瞬时波形" name="ssbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'">
                    <shushiboxi
                        v-if="bxactiveName == 'ssbx' && showBoxi"
                        :value="value"
                        :boxoList="boxoList"
                        :wp="wp"
                        :flag="2"
                    ></shushiboxi>
                </el-tab-pane>
                <el-tab-pane label="RMS波形" name="rmsbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'">
                    <rmsboxi
                        v-if="bxactiveName == 'rmsbx' && showBoxi"
                        :value="value"
                        :boxoList="boxoList"
                        :wp="wp"
                        :flag="2"
                    ></rmsboxi>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import Muentree from '../../components/menuTree/index1'
import runningstate from '../../components/runningstate'
import steadyevealuation from '../../components/steadyevaluation'
import steadyqualification from '../../components/steadyqualification'
import trendanalysis from '../../components/wtqsfenew'
import harmonicspectrum from '../../components/harmonicspectrum'
import realtimedata from '../../components/realtimedata'
import abnormaldata from '../../components/abnormaldata'
import rmsboxi from '@/views/Event-boot/components/echarts/rmsboxi'
import shushiboxi from '@/views/Event-boot/components/echarts/shushiboxi'
import { getMonitorEventAnalyseWave, getTransientDetailById } from '@/api/monitoringpointStatistics/echart'
import api from '@/api/harmonic/onlineData'
export default {
    name: 'nowmonitoring',
    components: {
        Muentree,
        rmsboxi,
        shushiboxi,
        runningstate,
        steadyevealuation,
        steadyqualification,
        trendanalysis,
        harmonicspectrum,
        realtimedata,
        abnormaldata
    },
    watch: {
        treenode(a, b) {
            if (a) {
                this.falg = true
                this.falg1 = false
            }
        }
    },
    data() {
        return {
            boxoList: {},
            wp: {},
            view1: true,
            bxecharts: undefined,
            view2: false,
            bxactiveName: 'ssbx',
            value: 1,
            options: [
                {
                    value: 1,
                    label: '一次值'
                },
                {
                    value: 2,
                    label: '二次值'
                }
            ],
            loading: false,
            showBoxi: true,
            treenode: undefined,
            tablename: 1,
            vh: null,
            number: undefined,
            id: '',
            checked: undefined,
            checkbox: undefined,
            asideheight: undefined,
            timeValue: undefined,
            screenWidth: undefined,
            screenHeight: undefined,
            activeName: 'wtzhpg',
            //title:'',
            falg: true,
            falg1: true,
            view: true,
            dataTree: [],
            tabsData: [
                {
                    label: '稳态综合评估',
                    id: 'wtzhpg'
                },
                {
                    label: '稳态指标合格率',
                    id: 'wthgl'
                },
                {
                    label: '稳态数据分析',
                    id: 'wtsjfx'
                },
                {
                    label: '谐波频谱',
                    id: 'xbpb'
                },
                {
                    label: '告警数据统计',
                    id: 'ycsj'
                },
                {
                    label: '监测点运行状态',
                    id: 'run'
                },
                {
                    label: '实时数据',
                    id: 'sssj'
                }
            ],
            treenode: undefined,
            linelist: [],
            treedata: [],
            deptIndex: '',
            wezhiname: null,
            ptType: 0,
            boxFlg: false
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        var info = window.sessionStorage.getItem('Info')
        info = eval('(' + info + ')')
        this.deptIndex = info.deptId
        this.bindResize()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.bxecharts = window.sessionStorage.getItem('appheight') + 'px'

            this.vh = window.sessionStorage.getItem('appheight') - 10 + 'px'
        },
        changeView1() {
            this.showBoxi = false
            setTimeout(() => {
                this.showBoxi = true
            }, 0)
        },
        async BoXi(e) {
            // this.boxoList = e;
            await getTransientDetailById({
                eventId: e,
                sysType: 0,
                smallType: 0
            }).then(res => {
                if (res == undefined) {
                    return
                } else {
                    this.boxoList = res.data
                }
            })
            await getMonitorEventAnalyseWave({
                id: e,
                systemType: 0,
                type: 0
            }).then(res => {
                if (res != undefined) {
                    this.wp = res.data
                    setTimeout(() => {
                        this.view1 = false
                        // console.log(123123);
                        this.view2 = true
                    }, 0)
                }

                //  this.initWaves()
            })
        },
        //里层波形tab标签页触发事件
        bxhandleClick(tab, event) {
            if (tab.name == 'ssbx') {
                this.bxactiveName = 'ssbx'
            } else if (tab.name == 'rmsbx') {
                this.bxactiveName = 'rmsbx'
            }
        },
        chufaload(data) {
            this.loading = data
        },
        changeview() {
            if (this.view) {
                this.view = false
            } else {
                this.view = true
            }
        },
        backbxlb() {
            this.view1 = true
            this.view2 = false
            this.value = 1
        },
        menuTree(data) {
            if (data) {
                this.checkbox = true
                this.falg = false

                this.tablename = 0
            }
            if (!data) {
                this.checkbox = false
                this.tablename = 1
                this.falg = true
            }
        },
        handleClick(tab, event) {
            this.checkbox = false
            //this.falg = false;
        },

        /**
         * 缩放条拖动进而改变左侧div宽度方法
         */
        bindResize() {
            /**开始坐标 */
            let startX
            /**开始宽度 */
            let startWidth = getScalableDivWidth()

            document.querySelector('#drag-dept').addEventListener('mousedown', startDrag)

            function startDrag(e) {
                startX = e.clientX
                startWidth = getScalableDivWidth()

                document.documentElement.addEventListener('mousemove', onDrag)
                document.documentElement.addEventListener('mouseup', stopDrag)
            }

            function onDrag(e) {
                let newWidth = startWidth + e.clientX - startX
                document.querySelector('#drag-dept-left').style.width = newWidth + 'px'
            }

            function stopDrag() {
                document.documentElement.removeEventListener('mousemove', onDrag)
                document.documentElement.removeEventListener('mouseup', stopDrag)
            }

            /**获取宽度 */
            function getScalableDivWidth() {
                return parseInt(window.getComputedStyle(document.querySelector('#drag-dept-left')).width, 10)
            }
        },
        //初始化树节点默认点击
        chushiData(id, data) {
            this.id = id
            window.sessionStorage.setItem('nodeid', id)
            this.linelist.push(id)
            this.treedata = data
            this.wezhiname =
                data[0].children[0].name +
                '>' +
                data[0].children[0].children[0].name +
                '>' +
                data[0].children[0].children[0].children[0].name +
                '>' +
                data[0].children[0].children[0].children[0].children[0].name
        },
        //二次点击触发点击事件
        getTreeText(menudata, treenode, nodeCom, id) {
            // console.log(menudata, treenode, nodeCom, id);
            if (treenode.data.level == 6) {
                // console.log('点击',treenode,nodeCom,menudata)
                // console.log('数据',menudata.ptType)
                this.ptType = menudata.ptType
                this.menudata = menudata
                this.treenode = treenode
                this.id = id
                this.linelist = []
                this.linelist.push(id)
            } else {
                return
            }
        },
        //多选框触发
        treeckeckData(checkedarr) {
            this.linelist = []
            this.linelist = checkedarr
        },
        ckeckData(checkedarr) {
            this.linelist = []
            //this.linelist = checkedarr
            this.linelist = this.unique(checkedarr)
        },
        //去重
        unique(arr) {
            if (!Array.isArray(arr)) {
                return
            }
            var array = []
            for (var i = 0; i < arr.length; i++) {
                if (array.indexOf(arr[i]) === -1) {
                    array.push(arr[i])
                }
            }
            return array
        },
        //获取5层树
        fiveTreeData() {
            var data = {
                deptIndex: this.deptIndex,
                monitorFlag: 2,
                powerFlag: 2,
                loadType: null,
                manufacturer: null,
                serverName: 'harmonic-boot',
                statisticalType: '',
                scale: null
            }
            api.getTerminalTreeForFive(data).then(res => {
                if (res.code === 'A0000') {
                    res.data.forEach(m => {
                        m.icon = 'el-icon-s-data'
                        m.children.forEach(n => {
                            n.icon = 'el-icon-delete'
                            n.children.forEach(d => {
                                d.icon = 'el-icon-user'
                                d.children.forEach(f => {
                                    f.icon = 'el-icon-warning'
                                    f.children.forEach(e => {
                                        e.icon = 'el-icon-phone-outline'
                                    })
                                })
                            })
                        })
                    })

                    this.treedata = res.data
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep.wzhixx {
    position: fixed;
    width: 400px;
    z-index: 1;
    font-size: 14px;
    font-weight: 550;
    margin-top: 10px;
    right: 15px;
}
::v-deep.boxd {
    height: auto;
    overflow: hidden;
} //自适应高度
::v-deep.animate {
    padding-left: 20px;
    font-size: 12px;
    color: #000;
    display: inline-block;
    white-space: nowrap;
    animation: 10s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
    0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}

@-webkit-keyframes wordsLoop {
    0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}

::v-deep.zt {
    color: $themeColor;
}
</style>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}

#drag-dept-left {
    min-width: 220px;
    max-width: 35%;
}

/**拖拽条样式 */
#drag-dept {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 10;
    right: 0;
    width: 5px;
    background: #868788;
    background-color: #04607c2a;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.35);
    cursor: col-resize;
}

#drag-dept i {
    display: inline-block;
    height: 14px;
    width: 5px;
    background-color: #e9e9e9;
    margin: 0 1px;
}

::v-deep .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: auto;
    cursor: pointer;
}
::v-deep .el-tabs__nav {
    white-space: nowrap;
    width: 100%;
    position: relative;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    float: left;
    z-index: 2;
}
</style>
