<template>
    <div class="pd10" style="margin-right: -5px">
        <!-- <el-row :gutter="10">
      <el-col :span="5" style="margin-top:2%">
          <el-switch 
            class="tableScopeSwitch"
            :active-value="2"
            :inactive-value="0"
            @change="handleStatusChange"
            :active-text="quyuname"
            inactive-text="超高压"
            inactive-color="#007878"
            v-model="formData.monitorFlag">
        </el-switch>
      </el-col>        
      <el-col :span="19">
          <el-select v-model="formData.statisticalType" placeholder="选择分类方式" style="margin-left:10px" @change="selectChanged" >
            <el-option
            v-for="item in classificationData"
            :key="item.id"
            :label="item.name"
            :value="{label:item.name,value:item.id,name:item.name,id:item.id,code:item.code,sort:item.sort}"
            >
            </el-option>
          </el-select>
      </el-col> 
    </el-row> -->
        <el-input placeholder="输入关键字检索" v-model="filterText" style="top: 0px" clearable>
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-select
            v-show="false"
            v-model="ExpandedNum"
            @change="handleExpandNumChange"
            placeholder="选择展开级别"
            size="mini"
            style="width: 100px; left: 0px"
        >
            <el-option label="不展开" :value="0"></el-option>
            <el-option label="展开1" :value="1"></el-option>
            <el-option label="展开2" :value="2"></el-option>
            <el-option label="展开3" :value="3"></el-option>
        </el-select>
        <el-tree
            v-loading="loading"
            element-loading-text="数据加载中"
            class="ele-tree-menu"
            :data="treeMenuData"
            :show-checkbox="kztree"
            :default-expanded-keys="expandID"
            node-key="id"
            :check-strictly="false"
            :highlight-current="true"
            :filter-node-method="filterNode"
            :current-node-key="currentNode"
            @node-click="handleNodeClick"
            :default-checked-keys="checkedarr"
            @check="treeckeck"
            :props="{ label: 'name', children: 'children' }"
            ref="menuTree"
            :style="'height:' + (vh - heights) + 'px ;'"
            accordion
        >
            <!-- <span class="span-ellipsis" slot-scope="{node,data}">
          <i :class='data.icon'></i> <span class="title" :title="node.label">{{ node.label }}</span>
       </span> -->
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <div v-if="data.level == -1 || data.level == 0 || data.level == 1 || data.level == 2">
                    <span
                        style="
                            flex: 1;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding-right: 8px;
                        "
                        @mouseenter="mouseenteract(data)"
                        @mouseleave="mouseleaveact(data)"
                    >
                        <span class="span-ellipsis">
                            <!-- <img src="@/assets/sjdb.png" v-if="data.level == 0" alt="" />
              <img src="@/assets/sjqy.png" v-if="data.level == 1" alt="" />
              <img src="@/assets/sjqy.png" v-if="data.level == 2" alt="" /> -->
                            <i class="iconfont icon-home" v-if="data.level == -1"></i>
                            <i class="iconfont icon-dc-icon-shengjigongchengyanjiuzhongxin" v-if="data.level == 0"></i>
                            <i class="iconfont icon-dc-icon-shiji" v-if="data.level == 1"></i>
                            <i class="iconfont icon-dc-icon-shiji" v-if="data.level == 2"></i>
                            <span class="title" style="font-size: 14px">{{ node.label }}</span>
                        </span>
                    </span>
                </div>

                <div v-else>
                    <el-tooltip
                        class="item"
                        effect="light"
                        popper-class="atooltip"
                        placement="bottom-start"
                        :visible-arrow="false"
                        :open-delay="500"
                        @command="quetymonitor"
                    >
                        <div slot="content" v-if="data.level == 3 || data.level == 6">
                            <el-button @click="quetymonitor(data)">{{ label }}</el-button>
                        </div>
                        <span
                            style="flex: 1; display: flex; align-items: center; justify-content: space-between"
                            @mouseenter="mouseenteract(data)"
                            @mouseleave="mouseleaveact(data)"
                        >
                            <span class="span-ellipsis">
                                <!-- <i
                  :class="data.icon"
                  :style="`color:${
                    data.comFlag == 0 && data.level == 6 ? 'red' : 'green'
                  }`"
                ></i> -->
                                <!-- <img src="@/assets/jcd.png" v-if="data.level == 3" alt="" /> -->
                                <i class="iconfont icon-biandianzhan" v-if="data.level == 3"></i>
                                <img v-if="data.comFlag == 2 && data.level == 6" src="@/assets/ty.png" alt="" />
                                <img
                                    v-else-if="data.comFlag == 1 && data.level == 6"
                                    src="@/assets/txzcwzj.png"
                                    alt=""
                                />
                                <img
                                    v-else-if="data.comFlag == 0 && data.level == 6"
                                    src="@/assets/txzdwzj.png"
                                    alt=""
                                />
                                <span class="title" style="font-size: 14px">{{ node.label }}</span>
                            </span>
                        </span>
                    </el-tooltip>
                </div>
            </span>
        </el-tree>

        <!--监测点-->
        <el-dialog
            :close-on-click-modal="false"
            style="padding: 10px 10px 10px 10px"
            title="监测点详情"
            :visible.sync="dialogVisible"
            width="60%"
            class="eldialot"
            :before-close="handleClose"
        >
            <h4 style="color: #0099cc; margin-top: -0.5%" align="center">
                {{ titlename }}
            </h4>
            <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="监测点详情" name="tab1">
                    <el-descriptions class="margin-top" :column="3" border>
                        <el-descriptions-item>
                            <template slot="label" align="center">工程</template>
                            {{ details.areaName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">单位</template>
                            {{ details.gdName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">部门</template>
                            {{ details.bdName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">电压等级</template>
                            {{ details.scale }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">厂家</template>
                            {{ details.manufacturer }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">终端名称</template>
                            {{ details.devName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">网络参数</template>
                            {{ details.ip }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">监测点名称</template>
                            {{ details.lineName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">监测点序号</template>
                            {{ details.id }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">通讯状态</template>
                            {{ details.comFlag }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">干扰源类型</template>
                            {{ details.loadType }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">监测点对象名称</template>
                            {{ details.objName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">接线方式</template>
                            {{ details.ptType }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">PT变比</template>
                            {{ details.pt }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">CT变比</template>
                            {{ details.ct }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">基准容量（MVA）</template>
                            {{ details.standardCapacity }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">最小短路容量（MVA）</template>
                            {{ details.shortCapacity }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">供电设备容量（MVA）</template>
                            {{ details.devCapacity }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">用户协议容量（MVA）</template>
                            {{ details.dealCapacity }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-tab-pane>
                <el-tab-pane label="监测点限值" name="tab2">
                    <el-descriptions class="margin-top" :column="2" size="small" border>
                        <el-descriptions-item :span="2">
                            <template slot="label" align="center">电压偏差上限值（%）</template>
                            {{ limitValue.voltageDev }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">电压偏差下限值（%）</template>
                            {{ limitValue.uvoltageDev }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">频率偏差限值（Hz）</template>
                            {{ limitValue.freqDev }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">三相电压不平衡度限值（%）</template>
                            {{ limitValue.ubalance }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">负序电流限值（A）</template>
                            {{ limitValue.ineg }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">长时闪变限值（%）</template>
                            {{ limitValue.flicker }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">电压总畸变率限值（%）</template>
                            {{ limitValue.uaberrance }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">奇次谐波电压含有率限值（%）</template>
                            {{ limitValue.oddHarm }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">偶次谐波电压含有率限值（%）</template>
                            {{ limitValue.evenHarm }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">3次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm3 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">4次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm4 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">5次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm5 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">6次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm6 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">7次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm7 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">8次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm8 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">9次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm9 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">10次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm10 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">11次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm11 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">12次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm12 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">13次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm13 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">14次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm14 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">15次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm15 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">16次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm16 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">17次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm17 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">18次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm18 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">19次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm19 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">20次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm20 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">21次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm21 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">22次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm22 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">23次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm23 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">24次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm24 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">25次谐波电流幅值限值（A）</template>
                            {{ limitValue.iharm25 }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">0.5-1.5次间谐波电压含有率（%）</template>
                            {{ limitValue.inUharm }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center">2.5-15.5次谐波电压含有率（%）</template>
                            {{ limitValue.inUharm16 }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
        <!--变电站-->
        <el-dialog
            :close-on-click-modal="false"
            :title="titlename + '详情'"
            width="30%"
            :visible.sync="dialogFormVisible1"
        >
            <el-form :model="form">
                <el-form-item label="变电站名称:" :label-width="formLabelWidth">
                    <el-input v-model="form.srbName" disabled auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="电压等级:" class="top" :label-width="formLabelWidth">
                    <el-input v-model="form.scale" disabled auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="纬度:" class="top" :label-width="formLabelWidth">
                    <el-input v-model="form.coordY" disabled auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="经度:" class="top" :label-width="formLabelWidth">
                    <el-input v-model="form.coordX" disabled auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import api from '@/api/tree'
import { dicData } from '@/assets/commjs/dictypeData'
//import { number } from 'node_modules/echarts';
export default {
    data() {
        return {
            vh: undefined,
            i: 1,
            ExpandedNum: 2,
            loading: false,
            quyuname: undefined,
            expandID: [],
            checkedarr: [],
            //status:2,
            activeName: 'tab1',
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            kztree: false,
            form: {
                name: '',
                scale: '',
                lng: '',
                lat: ''
            },
            //详情
            details: {
                //工程名称
                areaName: '江苏省',
                //部门
                bdName: '南京市',
                //行业类型
                businessType: '电力行业',
                //通讯状态
                comFlag: '正常',
                //	CT变比
                ct: '300/700',
                //用户协议容量
                dealCapacity: '234',
                //供电设备容量
                devCapacity: '556',
                //	终端名称
                devName: '设备1',
                //单位
                gdName: '南京供电公司',
                //监测点序号
                id: '2',
                //	网络参数
                ip: '192.168.2.109',
                //监测点名称
                lineName: '测试监测点',
                //干扰源类型
                loadType: '测试电压',
                //厂家
                manufacturer: '南京灿能',
                //监测点对象名称
                objName: '测试',
                //PT变比
                pt: '100/400',
                //	接线方式
                ptType: '星型接线',
                //	终端运行状态
                runFlag: '正常',
                //电压等级
                scale: '10kV',
                //最小短路容量
                shortCapacity: '34',
                //基准容量
                standardCapacity: '568'
            },
            //限值
            limitValue: {
                //偶次谐波含有率限值
                evenHarm: 0,
                //长时闪变限值
                flicker: 0,
                //频率限值
                freqDev: 0,
                //10次谐波电流幅值限值
                iharm10: 0,
                //11次谐波电流幅值限值
                iharm11: 0,
                //12次谐波电流幅值限值
                iharm12: 0,
                //13次谐波电流幅值限值
                iharm13: 0,
                //14次谐波电流幅值限值
                iharm14: 0,
                //15次谐波电流幅值限值
                iharm15: 0,
                //16次谐波电流幅值限值
                iharm16: 0,
                //17次谐波电流幅值限值
                iharm17: 0,
                //18次谐波电流幅值限值
                iharm18: 0,
                //19次谐波电流幅值限值
                iharm19: 0,
                //2次谐波电流幅值限值
                iharm2: 0,
                //20次谐波电流幅值限值
                iharm20: 0,
                //21次谐波电流幅值限值
                iharm21: 0,
                //22次谐波电流幅值限值
                iharm22: 0,
                //23次谐波电流幅值限值
                iharm23: 0,
                //24次谐波电流幅值限值
                iharm24: 0,
                //25次谐波电流幅值限值
                iharm25: 0,
                //3次谐波电流幅值限值
                iharm3: 0,
                //4次谐波电流幅值限值
                iharm4: 0,
                //5次谐波电流幅值限值
                iharm5: 0,
                //	6次谐波电流幅值限值
                iharm6: 0,
                //7次谐波电流幅值限值
                iharm7: 0,
                //8次谐波电流幅值限值
                iharm8: 0,
                //9次谐波电流幅值限值
                iharm9: 0,
                //0.5-1.5次间谐波电压幅值限值
                inUharm: 0,
                //2.5-15.5次间谐波电压幅值限值
                inUharm16: 0,
                //奇次谐波含有率限值
                oddHarm: 0,
                //电压总谐波畸变率限值
                uaberrance: 0,
                //三相电压不平衡度限值
                ubalance: 0,
                //电压下偏差限值
                uvoltageDev: 0,
                //电压上偏差限值
                voltageDev: 0
            },
            classvalue: '',
            dialogVisible: false,
            dialogFormVisible1: false,
            formLabelWidth: '120px',
            onlinename: '',
            onliedata: {},
            menudata: {},
            isact: '',
            level: undefined,
            label: '',
            filterText: '',
            currentNode: '',
            classificationData: [],
            titlename: '',
            treeMenuData: [
                {
                    name: '电网拓扑',
                    level: -1,
                    id: 0,
                    children: []
                }
            ],
            tree: [],
            id: '',
            checkedMenuIds: [],
            falag: false,
            formData: {
                //后面需要修改
                deptIndex: '',
                monitorFlag: 2,
                powerFlag: 2,
                loadType: null,
                manufacturer: null,
                serverName: 'event-boot',
                statisticalType: '',
                scale: null
            }
        }
    },
    props: {
        checkbox: {
            type: Boolean,
            checkbox: undefined
        },
        tablename: {
            type: Number,
            tablename: undefined
        },
        number: {
            type: Number,
            default: undefined
        },
        heights: {
            type: Number,
            default: 165
        }
    },
    watch: {
        //当前的树节点
        currentNode2(newValue) {
            this.treeMenuData = newValue
            if (val) {
                this.$nextTick(() => {
                    this.$refs.menuTree.setCurrentKey(val)
                    this.$nextTick(() => {
                        document.querySelector('.is-current').firstChild.click()
                    })
                })
            }
        },
        filterText(val) {
            this.$refs.menuTree.filter(val)
        },
        checkbox: function (a, b) {
            if (a) {
                this.kztree = true
                this.checkedarr = []
                api.getTerminalTreeForFive(this.formData).then(res => {
                    if (res.code === 'A0000') {
                        if (res.data[0].children[0].children[0].children[0].children.length > 0) {
                            res.data.forEach(m => {
                                m.icon = 'el-icon-s-data'
                                m.children.forEach(n => {
                                    n.icon = 'el-icon-menu'
                                    n.children.forEach(d => {
                                        d.icon = 'el-icon-s-flag'
                                        d.children.forEach(f => {
                                            f.icon = 'el-icon-share'
                                            f.children.forEach(h => {
                                                h.icon = 'el-icon-warning'
                                            })
                                            // h.jxfs = 0
                                            // })
                                        })
                                    })
                                })
                            })
                            this.treeMenuData = res.data
                            //设置树节点点一个最字节的被选中
                            this.currentNode = res.data[0].children[0].children[0].children[0].children[0].id
                        } else if (res.data[0].children[0].children[0].children[0].children.length == 0) {
                            res.data.forEach(m => {
                                m.icon = 'el-icon-s-data'
                                m.children.forEach(n => {
                                    n.icon = 'el-icon-menu'
                                    n.children.forEach(d => {
                                        d.icon = 'el-icon-s-flag'
                                        d.children.forEach(f => {
                                            f.icon = 'el-icon-warning'
                                            f.jxfs = 0
                                            // })
                                        })
                                    })
                                })
                            })
                            this.treeMenuData = res.data
                            //设置树节点点一个最字节的被选中
                            this.currentNode = res.data[0].children[0].children[0].children[0].id
                        }
                        this.treeMenuData = res.data
                    }
                })
            }
            if (!a) {
                this.kztree = false
            }
        }
    },
    created() {
        // let data = window.sessionStorage.getItem("sysData");
        // let yudata = eval("(" + data + ")");
        // //debugger
        // // let str = yudata.dataReport.split("，")
        // // this.quyuname= str[1]
        // this.quyuname = "";
        var info = window.sessionStorage.getItem('Info')
        info = eval('(' + info + ')')

        this.formData.deptIndex = info.deptId
        this.getclassificationData()
        this.fiveTreeData()
    },
    mounted() {
        this.vh = window.sessionStorage.getItem('appheight')

        //  this.setCheckedKeys()
    },
    methods: {
        // // 回显
        //      setCheckedKeys() {
        //       console.log(`====`,this.treeMenuData);
        //     this.$refs.menuTree.setCheckedKeys([this.$store.state.user.lineID]);
        //   },
        //判断需要展开层级
        handleExpandNumChange(treeMenuData) {
            if (this.ExpandedNum > 0) {
                this.setExpandKeys(treeMenuData)
            }
        },
        //层级展开递归方法
        setExpandKeys(dataList, n) {
            if (!n) n = 1
            for (let i = 0; i < dataList.length; i++) {
                if (n <= this.ExpandedNum) {
                    //this.expandID=[]
                    this.expandID.push(`${dataList[i].id}`)
                    if (dataList[i].hasOwnProperty('children')) {
                        const children = dataList[i].children
                        this.setExpandKeys(children, n + 1)
                    }
                }
            }
        },
        //获取统计类型
        getclassificationData() {
            var code = 'Statistical_Type'
            this.classificationData = dicData(code, ['Report_Type'])
            this.formData.statisticalType = this.classificationData[0]
            this.$emit('statisticalType', this.classificationData[0])
        },
        //获取5层树
        async fiveTreeData() {
            this.loading = true
            await api.getTerminalTreeForFive(this.formData).then(res => {
                if (res.code === 'A0000') {
                    if (res.data[0].children[0].children[0].children[0].children.length > 0) {
                        res.data.forEach(m => {
                            m.icon = 'el-icon-s-data'
                            m.children.forEach(n => {
                                n.icon = 'el-icon-menu'
                                n.children.forEach(d => {
                                    d.icon = 'el-icon-s-flag'
                                    d.children.forEach(f => {
                                        f.icon = 'el-icon-share'
                                        f.children.forEach(h => {
                                            h.icon = 'el-icon-warning'
                                        })
                                        // h.jxfs = 0
                                        // })
                                    })
                                })
                            })
                        })
                        this.treeMenuData[0].children = res.data
                        //设置树节点点一个最字节的被选中
                        this.currentNode = res.data[0].children[0].children[0].children[0].children[0].id
                    } else if (res.data[0].children[0].children[0].children[0].children.length == 0) {
                        res.data.forEach(m => {
                            m.icon = 'el-icon-s-data'
                            m.children.forEach(n => {
                                n.icon = 'el-icon-menu'
                                n.children.forEach(d => {
                                    d.icon = 'el-icon-s-flag'
                                    d.children.forEach(f => {
                                        f.icon = 'el-icon-warning'
                                        f.jxfs = 0
                                        // })
                                    })
                                })
                            })
                        })

                        this.treeMenuData[0].children = res.data
                        // console.log(
                        //   this.treeMenuData
                        // );
                        //设置树节点点一个最字节的被选中
                        this.currentNode = res.data[0].children[0].children[0].children[0].id
                        // this.currentNode = this.$store.state.user.lineID ==''?res.data[0].children[0].children[0].children[0].id:this.$store.state.user.lineID
                        this.tree = JSON.stringify(this.treeMenuData)
                    }
                    //this.$store.state.treeid = this.currentNode
                    window.sessionStorage.setItem('tree', this.tree)
                    window.sessionStorage.setItem('nodeid', this.currentNode)
                    this.expandID.push(this.currentNode)
                    this.handleExpandNumChange(this.treeMenuData)
                    this.$nextTick(() => {
                        this.$refs.menuTree.setCurrentKey(this.currentNode)
                        this.$emit('trigger', {
                            id: this.currentNode
                        })
                    })
                    let dateList = []
                    this.treeMenuData.forEach(item => {
                        dateList.push(...item.children)
                    })
                    this.treeMenuData[0].children = dateList
                    //初始化触发默认点击方法

                    this.$emit('chushiData', this.currentNode, this.treeMenuData)
                    // console.log(this.currentNode,res.data)
                    this.loading = false
                }
            })
            //     let dateList=[]
            //    this.treeMenuData.forEach(item=>{
            //       dateList.push(...item.children)
            //     })
            //     this.treeMenuData=dateList
        },
        //对话框关闭事件
        handleClose() {
            this.dialogVisible = false
            this.activeName = 'tab1'
        },
        //点击节点触发事件
        handleNodeClick(data, node, nodeCom) {
            this.$emit('treeClick', data)
            if (this.kztree && !this.falag) {
                api.getTerminalTreeForFive(this.formData).then(res => {
                    if (res.code === 'A0000') {
                        // for(var i=0;i<this.checkedMenuIds.length;i++){
                        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.jxfs = 0
                                    })
                                })
                            })
                        })
                        // }

                        this.treeMenuData = res.data
                        this.i = this.i - 1
                        // this.currentNode = res.data[0].children[0].children[0].children[0].children[0].id
                    }
                })
            }
            this.menudata = data
            //  if(node.level==4 || node.level==5){
            //   var id = node.data.id
            //  }
            var id = data.id
            //var name = node.data.name +''+node.data.children[0].name+''+node.data.children[0].children[0].name
            //console.log("====",node)
            //console.log("====",id)
            this.$emit('eleMenuData', this.menudata, node, nodeCom, id, name, this.checkedarr)
        },
        filterNode(value, data, node) {
            if (!value) {
                return true
            }
            let _array = [] //这里使用数组存储 只是为了存储值。
            this.getReturnNode(node, _array, value)
            let result = false
            _array.forEach(item => {
                result = result || item
            })
            return result
        },
        getReturnNode(node, _array, value) {
            let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1
            isPass ? _array.push(isPass) : ''
            this.index++
            if (!isPass && node.name != 1 && node.parent) {
                this.getReturnNode(node.parent, _array, value)
            }
        },
        //点击复选框时触发
        treeckeck() {
            // debugger
            if (this.i == 3 && this.falag) {
                this.$message.warning('最多选择3个监测点')
                //this.$refs.fx.condition
                setTimeout(() => {
                    this.$message.warning('只能选择一个指标')
                }, 2000)
                api.getTerminalTreeForFive(this.formData).then(res => {
                    if (res.code === 'A0000') {
                        if (res.data[0].children[0].children[0].children[0].children.length > 0) {
                            res.data.forEach(m => {
                                m.icon = 'el-icon-s-data'
                                m.children.forEach(n => {
                                    n.icon = 'el-icon-menu'
                                    n.children.forEach(d => {
                                        d.icon = 'el-icon-s-flag'
                                        d.children.forEach(f => {
                                            f.icon = 'el-icon-share'
                                            f.children.forEach(h => {
                                                h.icon = 'el-icon-warning'
                                            })
                                            f.jxfs = 0
                                            for (var i = 0; i < this.checkedMenuIds.length; i++) {
                                                if (this.checkedMenuIds[i].id === f.id) {
                                                    // e.disabled = false
                                                    arr.push(f.id)
                                                } else {
                                                    f.disabled = true
                                                }
                                            }
                                        })
                                    })
                                })
                            })
                        } else if (res.data[0].children[0].children[0].children[0].children.length == 0) {
                            var arr = []
                            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-s-flag'
                                        d.children.forEach(f => {
                                            f.icon = 'el-icon-warning'
                                            //  f.children.forEach(e=>{
                                            //   e.icon = 'el-icon-phone-outline'
                                            f.jxfs = 0
                                            for (var i = 0; i < this.checkedMenuIds.length; i++) {
                                                if (this.checkedMenuIds[i].id === f.id) {
                                                    // e.disabled = false
                                                    arr.push(f.id)
                                                } else {
                                                    f.disabled = true
                                                }
                                            }
                                            // })
                                        })
                                    })
                                })
                            })
                        }
                        this.checkedarr = arr
                        this.treeMenuData = res.data
                        this.i = this.i - 1
                        this.falag = false
                        this.$emit('treeckeckData', this.checkedarr)
                        // this.currentNode = res.data[0].children[0].children[0].children[0].children[0].id
                    }
                })
            }
            if (this.i < 4 && this.number == 1) {
                this.i++
                this.falag = true
                this.checkedMenuIds = this.$refs.menuTree.getCheckedNodes(true, true).map(node => node)
                //  console.log(this.checkedMenuIds)
            } else {
                this.falag = false
            }
            if (this.i < 4 && this.number == 0) {
                this.falag = true
                this.checkedMenuIds = this.$refs.menuTree.getCheckedNodes(true, true).map(node => node)
                // console.log(this.checkedMenuIds)
            } else {
                this.falag = true
            }
            for (var k = 0; k < this.checkedMenuIds.length; k++) {
                this.checkedarr.push(this.checkedMenuIds[k].id)
            }
            this.$emit('ckeckData', this.checkedarr)
        },
        //类型触发
        selectChanged(value) {
            this.formData.statisticalType = value
            this.fiveTreeData()
            this.$emit('statisticalType', value)
        },
        exportCsv() {},
        renderContent(h, { node, data, store }) {
            this.onlinename = node.label
            return (
                <span
                    style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;"
                    on-mouseenter={() => this.mouseenteract(data)}
                    on-mouseleave={() => this.mouseleaveact(data)}
                >
                    <span class="span-ellipsis">
                        <i
                            class={data.icon}
                            style={data.comFlag == 0 && data.level == 6 ? { color: 'red' } : { color: 'green' }}
                        ></i>
                        <span class="title">{node.label}</span>
                    </span>
                    {this.isact == data ? (
                        <span>
                            <el-button
                                type="text"
                                style="z-index:20000;color:#33FFFF;margin-left:5%"
                                on-click={() => this.quetymonitor(data, event)}
                            >
                                {this.label}
                            </el-button>
                        </span>
                    ) : (
                        <span></span>
                    )}
                </span>
            )
        },
        mouseenteract(data) {
            this.isact = data
            this.level = data.level
            if (data.level == 0) {
                this.label = ''
            } else if (data.level == 1) {
                this.label = ''
            } else if (data.level == 2) {
                this.label = ''
            } else if (data.level == 3) {
                this.label = '变电站详情'
            } else if (data.level == 6) {
                this.label = '监测点详情'
            }
        },
        mouseleaveact(da) {
            this.isact = ''
            this.level = undefined
        },
        quetymonitor(data, event) {
            if (data.level == 3) {
                // console.log(data)
                this.titlename = data.name
                // event.stopPropagation()
                let id = data.id
                api.getSubstationData(id).then(res => {
                    if (res.code == 'A0000') {
                        this.form = res.data[0]
                    }
                })
                this.dialogFormVisible1 = true
            }
            if (data.level == 6) {
                // console.log(data)
                this.titlename = data.name
                this.onlinename = data.name
                let id = data.id
                this.id = data.id
                // console.log(id)
                // event.stopPropagation();
                api.getLineDetailData(id).then(res => {
                    if (res.code == 'A0000') {
                        this.details = res.data
                    }
                })
                this.dialogVisible = true
            }
        },
        handleClick(val) {
            if (val.index == '1') {
                let id = this.id
                api.getLineOverLimitData(id).then(res => {
                    if (res.code == 'A0000') {
                        this.limitValue = res.data
                    }
                })
            }
        },
        //开关触发
        handleStatusChange(val) {
            this.formData.monitorFlag = val
            this.fiveTreeData()
        }
    },
    beforeDestroy() {
        this.$destroy()
    }
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');

::v-deep ::-webkit-scrollbar {
    width: 5px !important;
    height: 14px;
}
::v-deep .el-descriptions--small.is-bordered .el-descriptions-item__cell {
    padding: 6px 8px;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #808080;
}
::v-deep .el-tooltip__popper.is-dark {
    background: #59a1af !important;
    color: #fff !important;
}
::v-deep .item {
    margin: 2px;
}

::v-deep .left .el-tooltip__popper,
.right .el-tooltip__popper {
    padding: 30px 50px;
}
// ::v-deep .el-tree {
//   width: 100%;
//   margin-top: 10px;
//   padding-top: 10px;
//   color: #000000 !important;
//   font-weight: bold  !important;
//   overflow-y: auto;
//   overflow-x: hidden;
// }

.span-ellipsis {
    width: 100%;
    /* overflow: hidden; */
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    img {
        vertical-align: top;
        height: 16px;
    }
    /* overflow: auto;
  overflow-x: auto; */
}
::v-deep .title {
    //color: #000000;
    font-size: 16px;
}

::v-deep.tableScopeSwitch .el-switch__label {
    position: absolute;
    display: none;
    color: #fff !important;
}
/*打开时文字位置设置*/
::v-deep.tableScopeSwitch .el-switch__label--right {
    z-index: 1;
    /*不同场景下可能不同，自行调整*/
}
/*关闭时文字位置设置*/
::v-deep.tableScopeSwitch .el-switch__label--left {
    z-index: 1;
    left: 80px; /*不同场景下可能不同，自行调整*/
}
/*显示文字*/
::v-deep.tableScopeSwitch .el-switch__label.is-active {
    display: block;
}
::v-deep.tableScopeSwitch.el-switch .el-switch__core,
::v-deep.el-switch .el-switch__label {
    width: 200px !important; /*开关按钮的宽度大小*/
}
::v-deep.tableScopeSwitch.el-switch .el-switch__core,
.el-switch .el-switch__label {
    width: 64px !important;
}
</style>
<style lang="scss" scoped>
::v-deep .iconfont {
    color: $themeColor_8 !important;
    font-size: 21px;
}
</style>
<style></style>

<style lang="scss" scoped>
::v-deep .iconfont {
    color: $themeColor !important;
    font-size: 16px;
}
::v-deep .el-tree {
    width: 100%;
    margin-top: 10px;
    font-size: 14px !important;
    padding-top: 10px;
    color: #000 !important;
    font-weight: 400 !important;
    overflow-y: auto;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    display: block;
    width: 8px !important;
    height: 14px;
}
.ele-tree-menu {
    cursor: pointer;
}
::v-deep.el-tree .is-leaf {
    visibility: hidden !important;
}
</style>
