<template>
    <el-container v-loading="loading" element-loading-text="数据加载中" id="dept" style="height: calc(100vh - 80px)">
        <el-aside v-show="view" width="300px" 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">
            <i
                :class="view ? 'el-icon-caret-left' : 'el-icon-caret-right'"
                style="
                    font-size: 18px;
                    cursor: pointer;
                    margin-right: 2%;
                    width: 80px;
                    height: 80px;
                    background: rgba(6, 70, 122, 0);
                "
                @click="changeview"
            ></i>
        </div>
        <el-main id="drag-dept-right">
            <div class="wzhi" v-if="falg">
                <i style="color: #339966; font-size: 20px" class="el-icon-location-information"></i>
                当前位置:
                <span class="zt">
                    {{ treenode.parent.parent.parent.data.name }}>{{ treenode.parent.parent.data.name }}>{{
                        treenode.parent.data.name
                    }}>{{ treenode.data.name }}
                </span>
            </div>
            <div class="wzhi" v-if="falg1">
                <i style="color: #339966; font-size: 20px" class="el-icon-location-information"></i>
                当前位置:
                <span class="zt">{{ wezhiname }}</span>
            </div>
            <el-tabs
                v-model="activeName"
                type="border-card"
                @tab-click="handleClick"
                style="'width: 100%; transform: translateX(0px);height:calc(100vh - 80px)"
            >
                <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 === '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
                                :view="view"
                                :number="number"
                                :treenode="treenode"
                                :linelist="linelist"
                                @menuTree="menuTree"
                                :name="'wtsjfx'"
                                :dataTree="dataTree"
                            ></trendanalysis>
                        </el-col>
                    </el-row>
                    <el-row v-if="item.id === 'xbpb'">
                        <el-col>
                            <harmonicspectrum
                                :view="view"
                                :treenode="treenode"
                                :name="'xbpb'"
                                :treeid="id"
                                :dataTree="dataTree"
                            ></harmonicspectrum>
                        </el-col>
                    </el-row>
                    <el-row v-if="item.id === 'traceability'">
                        <el-col>
                            <traceability
                                :view="view"
                                :treenode="treenode"
                                :name="'traceability'"
                                :treeid="id"
                                :dataTree="dataTree"
                            ></traceability>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
</template>
<script>
import Muentree from '@/views/cgy-components/menuTree/index1'
import TimePicker from '@/views/cgy-components/TimePicker/index4'
import steadyqualification from '@/views/cgy-components/steadyqualification'
import trendanalysis from '@/views/cgy-components/wtqsfenew'
import harmonicspectrum from '@/views/cgy-components/harmonicspectrum'
import traceability from '@/views/cgy-components/traceability'
import api1 from '@/api/pollution/pollution'
import { guanzhou } from '@/assets/commjs/token'
import api from '@/api/harmonic/onlineData'
import echarts, { number } from 'echarts'
export default {
    components: {
        TimePicker,
        Muentree,
        steadyqualification,
        trendanalysis,
        harmonicspectrum,
        traceability
    },
    watch: {
        treenode(a, b) {
            if (a) {
                this.falg = true
                this.falg1 = false
            }
        }
    },
    data() {
        return {
            tablename: 1,
            number: undefined,
            id: '',
            vh: null,
            vhh: null,
            checked: undefined,
            checkbox: undefined,
            asideheight: undefined,
            timeValue: undefined,
            screenWidth: undefined,
            screenHeight: undefined,
            activeName: 'wtsjfx',
            //title:'',
            loading: true,
            falg: false,
            falg1: true,
            view: true,
            dataTree: [],
            tabsData: [
                {
                    label: '稳态数据分析',
                    id: 'wtsjfx'
                },
                {
                    label: '稳态指标合格率',
                    id: 'wthgl'
                },

                {
                    label: '谐波频谱',
                    id: 'xbpb'
                },
                {
                    label: '谐波电流溯源',
                    id: 'traceability'
                }
                // {
                //   label: "告警数据统计",
                //   id: "ycsj",
                // },
                // {
                //   label: "监测点运行状态",
                //   id: "run",
                // },
                // {
                //   label: "稳态综合评估",
                //   id: "wtzhpg",
                // },
            ],
            treenode: undefined,
            linelist: [],
            treedata: [],
            deptIndex: '',
            wezhiname: ''
        }
    },
    created() {
        // this.guanzhou()
    },
    mounted() {
        var info = window.sessionStorage.getItem('Info')
        info = eval('(' + info + ')')
        this.deptIndex = info.deptId
        this.bindResize()
        this.vh = window.sessionStorage.getItem('appheight') - 70 + 'px'
        this.vhh = window.sessionStorage.getItem('appheight') - 70 + 'px'
    },
    methods: {
        guanzhou() {
            var data = {
                token: this.$route.query.token
            }
            api1.guanzhou(data).then(res => {
                if (res.code == 'A0000') {
                    return
                } else {
                    this.$router.push('/error/massege/403')
                }
            })
        },
        changeview() {
            if (this.view) {
                this.view = false
            } else {
                this.view = true
            }
        },
        menuTree(data) {
            //debugger
            if (data) {
                this.checkbox = true
                this.falg = false
                this.falg1 = false
                this.tablename = 0
            }
            if (!data) {
                this.checkbox = false
                this.tablename = 1
                this.falg = false
                this.falg1 = true
            }
        },
        handleClick(tab, event) {
            //debugger
            if (tab.name !== 'ycsj' && tab.name !== 'wtsjfx') {
                this.checkbox = false
                // this.falg1 = true;
                this.tablename = 1
            } else if (tab.name == 'ycsj') {
                this.falg = false
                this.falg1 = false
                this.checkbox = true
                this.number = 0
                this.tablename = 1
            } else if (tab.name == 'wtsjfx') {
                this.checkbox = false
                this.number = 1
                this.tablename = 1
            }
        },
        /**
         * 缩放条拖动进而改变左侧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('fist', id)
            this.linelist.push(id)
            this.treedata = data
            this.wezhiname = data[0].name + '>' + data[0].children[0].name + '>' + data[0].children[0].children[0].name
            this.loading = false
            //alert(this.wezhiname)
        },
        //二次点击触发点击事件
        getTreeText(menudata, treenode, nodeCom, id, name) {
            if (treenode.data.level == 6) {
                this.menudata = menudata
                this.treenode = treenode
                this.nodeCom = nodeCom
                this.id = id
                //this.wezhiname = name
                this.linelist = []
                this.linelist.push(id)
            } else {
                return
            }
        },
        //多选框触发
        treeckeckData(checkedarr) {
            //alert(checkedarr)
            this.linelist = []
            this.linelist = checkedarr
            // alert(this.linelist)
        },
        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
        }
    }
}
</script>
<style lang="scss" scoped>
.wzhi {
    position: fixed;
    z-index: 1;
    font-size: 14px;
    font-weight: 550;
    margin-top: 10px;
    right: 25px;
}
.zt {
    color: $themeColor;
}
</style>
<style lang="less" scoped>
@import url('../../../styles/common.less');

#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>
