<template>
    <div class="pd10" style="margin-right: -5px">
        <el-row>
            <el-col :span="6" v-if="this.quyunames != undefined">
                <el-switch
                    style="top: 10px"
                    :width="150"
                    class="tableScopeSwitch"
                    :active-value="2"
                    :inactive-value="0"
                    @change="handleStatusChange"
                    :active-text="quyuname"
                    :inactive-text="quyunames"
                    inactive-color="#007878"
                    active-color="#666666"
                    v-model="formData.monitorFlag"
                ></el-switch>
            </el-col>
            <el-col :span="this.quyunames != undefined ? 18 : 24">
                <el-select
                    v-model="formData.statisticalType"
                    placeholder="选择分类方式"
                    @change="selectChanged"
                    style="width: 100%"
                >
                    <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 style="top: 10px" placeholder="输入关键字检索" v-model="filterText" clearable>
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <!-- <div style="overflow-y: auto"> -->
        <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
            class="filter-tree"
            v-loading="loading"
            element-loading-text="数据加载中"
            :style="'height:' + vh2 + 'px'"
            :data="treeMenuData"
            :props="{ children: 'children', label: 'name' }"
            :default-expanded-keys="expandID"
            :expand-on-click-node="true"
            :highlight-current="true"
            :filter-node-method="filterNode"
            :current-node-key="currentNode"
            @node-click="handleNodeClick"
            :default-checked-keys="checkedarr"
            ref="menuTree"
            node-key="id"
            accordion
        >
            <span class="span-ellipsis" slot-scope="{ node, data }">
                <!-- <i :class="data.icon" :style="`color:${data.comFlag == 0 && data.level == 6 ? 'red' : 'green'}`"></i> -->
                <!-- <img src="@/assets/jcd3.png" v-if="data.level == 3" 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>
                <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" :title="node.label">{{ node.label }}</span>
            </span>
        </el-tree>
        <!-- </div> -->
    </div>
</template>
<script>
import api from '@/api/harmonic/onlineData'
import { dicData } from '@/assets/commjs/dictypeData'
export default {
    data() {
        return {
            quyuname: undefined,
            quyunames: undefined,
            ExpandedNum: 2,
            filterText: '',
            zoom: '',
            vh2: undefined,
            loading: false,
            treeMenuData: [],
            tree: [],
            expandID: [],
            checkedarr: [],
            classificationData: [],
            currentNode: '',
            formData: {
                //后面需要修改
                deptIndex: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                monitorFlag: 2,
                powerFlag: 2,
                loadType: null,
                manufacturer: null,
                serverName: 'harmonic-boot',
                statisticalType: '',
                scale: null
            }
        }
    },
    props: {
        tablename: {
            type: Number,
            tablename: undefined
        },
        number: {
            type: Number,
            default: undefined
        }
    },
    created() {
        let data = window.sessionStorage.getItem('sysData')
        let yudata = eval('(' + data + ')')
        let str = yudata.dataReport.split('，')
        this.quyuname = str[1]
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.getclassificationData()

        this.fiveTreeData()
        let data = window.sessionStorage.getItem('sysData')
        let yudata = eval('(' + data + ')')
        //debugger
        let str = yudata.dataReport.split('，')
        this.quyuname = str[0]
        this.quyunames = str[1]
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh2 = window.sessionStorage.getItem('appheight') - 100
        },
        //获取统计类型
        getclassificationData() {
            var code = 'Statistical_Type'
            this.classificationData = dicData(code, ['Report_Type'])
            this.formData.statisticalType = this.classificationData[0]
        },
        //判断需要展开层级
        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)
                    }
                }
            }
        },
        //获取5层树
        fiveTreeData() {
            this.loading = true
            api.getTerminalTreeForFive(this.formData).then(res => {
                if (res.code === 'A0000') {
                    if (res.data[0].children[0].children[0].children[0].children.length > 0) {
                        this.treeMenuData = [
                            {
                                name: '电网拓扑',
                                level: -1,
                                id: 0,
                                children: res.data
                            }
                        ]

                        //this.treeMenuData[0].children =
                        //设置树节点点一个最字节的被选中
                        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) {
                        this.treeMenuData = [
                            {
                                name: '电网拓扑',
                                level: -1,
                                id: 0,
                                children: res.data
                            }
                        ]
                        //设置树节点点一个最字节的被选中
                        this.currentNode = res.data[0].children[0].children[0].children[0].id
                        this.tree = JSON.stringify(res.data)
                    }
                    //this.$store.state.treeid = this.currentNode
                    //   this.$bus.$emit(
                    //     "chushicurrenrNode",
                    //     this.currentNode,
                    //     this.treeMenuData
                    //   );
                    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('chushiData', this.currentNode, this.treeMenuData)
                    // console.log(this.currentNode,res.data)
                    this.loading = false
                }
            })
        },
        handleNodeClick(data, node, nodeCom) {
            // console.log(data, node, nodeCom);
            this.$emit('eleMenuData', this.menudata, node, nodeCom, this.checkedarr)
        },
        //开关触发
        handleStatusChange(val) {
            this.formData.monitorFlag = val
            this.fiveTreeData()
        },
        //类型触发
        selectChanged(value) {
            this.treeMenuData[0].name = value.name
            this.formData.statisticalType = value
            this.fiveTreeData()
        },
        /**筛选节点 */
        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)
            }
        }
    },
    watch: {
        filterText(val) {
            this.$refs.menuTree.filter(val)
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
</style>
<style lang="scss" scoped>
::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 .iconfont {
    color: $themeColor !important;
    font-size: 16px;
}
::v-deep .left .el-tooltip__popper,
.right .el-tooltip__popper {
    padding: 30px 50px;
}
::v-deep .el-tree {
    width: 100%;
    margin-top: 20px;
    font-size: 14px !important;
    padding-top: 10px;
    color: #000 !important;
    background: rgba(204, 200, 200, 0.164);
    font-weight: 400 !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; */
}
</style>
