<template>
  <div>
    <el-tree
      ref="vuetree"
      :data="deviceShowList1"
      :default-expand-all = 'true'
      @node-contextmenu='rightClick'
      :render-content="renderContent"
      nodeKey="key"
      class="el-tree"
      :highlightCurrent="true"
      :expand-on-click-node = "false"
      @node-click = 'handleClick'
      @node-dblclick="handleDoubleClick">
      <!--      <span style="padding-right:10px;" slot-scope="{ node,data }" :id=data.key >-->
      <!--        &lt;!&ndash;@dblclick="handleDoubleClick(data,node)"&ndash;&gt;-->
      <!--        <img :src=data.picUrl height = "18" width = "18" >-->
      <!--        <span>{{node.label}}</span>-->
      <!--      </span>-->

    </el-tree>
    <!--<pl-table ref="plTreeTable"-->
    <!--:data="deviceShowList1"-->
    <!--height-->
    <!--selectTrClass="selectTr"-->
    <!--row-key="key"-->
    <!--bigDataCheckbox-->
    <!--:treeConfig="{children: 'children', expandAll: false}"-->
    <!--:use-virtual="true"-->
    <!--:default-expand-all="true"-->
    <!--header-drag-style-->
    <!--fixedColumnsRoll-->
    <!--highlight-current-row="true"-->
    <!--inverse-current-row-->
    <!--@cell-click = "handleClick"-->
    <!--@row-contextmenu="rightClick">-->
    <!--<template slot="empty">-->
    <!--没有查询到符合条件的记录-->
    <!--</template>-->
    <!--&lt;!&ndash;pl-table大数据表格 你需要在列上指定某个列显示展开收起 treeNode属性&ndash;&gt;-->
    <!--<pl-table-column-->
    <!--v-for="item in columns"-->
    <!--:treeNode="item.treeNode"-->
    <!--:key="item.id"-->
    <!--:prop="item.prop"-->
    <!--:label="item.label">-->
    <!--<template slot-scope="scope">-->
    <!--<span style="padding-right:10px;">-->
    <!--<img :src="scope.row.picUrl" height = "18" width = "18" />-->
    <!--<span>{{scope.row.label}}</span>-->
    <!--</span>-->
    <!--</template>-->
    <!--</pl-table-column>-->

    <!--</pl-table>-->
    <!-- 右键单击网元 菜单栏 -->
    <v-contextmenu id="menu" v-show="menuVisible">
      <v-contextmenu-item v-for="command in contextCommands" :key="command.key" @click="command.execute" :disabled="command.disabled">{{command.name}}</v-contextmenu-item>
    </v-contextmenu>

    <CommandExecuteContext v-bind:commands="commandContext"></CommandExecuteContext>
  </div>
</template>

<script>
import deviceManager from '../../domain/models/DeviceManager'
import subnetManager from '../../domain/models/SubnetManager'
import LinkManager from '../../domain/models/LinkManager'
import AlarmManager from '../../domain/models/AlarmManager'
import DeviceCommands from '@/commands/DeviceCommands'
import SubnetCommands from '@/commands/SubnetCommands'
import CommandExecuteContext from '@/commands/CommandExecuteContext'
import DeviceService from '@/domain/services/DeviceService.js'
import SubnetService from '@/domain/services/SubnetService.js'
import { EventBus } from '../../domain/EventBus'
import ElTree from '@/components/Common/el-tree.vue'
import HelperUtil from '../../utils/HelperUtil'
import Vue from 'vue'

let curThis = null
let d3 = require('d3')
let svg = '', g = ''
export default {
  data () {
    return {
      commandContext: {},
      contextCommands: [],
      selectDevice: {},
      selectSubnet: {},
      // 最终显示的结果的树形数组
      deviceShowList1: [],
      my_clickDeviceId: this.curClickDeviceId,
      my_clickSubnetId: this.curClickSubnetId,
      menuVisible: false,
      deviceList: [], // 设备列表
      subnetList: [], // 子网列表
      menuTop: -1, // 菜单的上边距
      menuLeft: -1, // 菜单的左边距

      clickSidebar: false, // 记录是否点击侧边栏
      columns: [
        {prop: 'label', label: '', image: 'picUrl', treeNode: true}
      ]
    }
  },
  components: {
    CommandExecuteContext,
    'el-tree': ElTree
  },
  props: [
    'deviceCollection',
    'modifyDevice',
    'addDevice',
    'deleteDevice',
    'subnetCollection',
    'linkCollection',
    'alarmCollection',
    'alarmLevelConfig',
    'curClickSubnetId',
    'curClickDeviceId'
  ],
  methods: {
    /**
       * @Description  ：对侧边栏的左键点击事件
       * @author       : yjz
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    handleClick (data, node, el) {
      // 只有子网有children这个字段
      if (data.children) {
        curThis.my_clickSubnetId = data.key
      } else {
        curThis.my_clickDeviceId = data.key
        // 进入子网视图
        let data_subnet = {
          type: 1,
          key: node.parent.key
        }
        curThis.handleDoubleClick(data_subnet, node.parent)
      }
      this.menuVisible = false
      this.clickSidebar = true // 是否单击了侧边栏
      EventBus.$emit('i-click-sidebar', this.clickSidebar)// 通过全局事件总线将点击的传送给拓扑图
    },
    /**
       * 双击事件处理,高亮
       */
    handleDoubleClick (data, node) {
      this.menuVisible = false
      if (data.type === 0 || data.type === 2) {
        return
      }
      if (!(data.linkAddress === null || data.linkAddress === undefined || data.linkAddress === '')) {
        // 更换跳转的地址
        window.open(data.linkAddress + '?userName=' + window.sessionStorage.getItem('userName') + '&passWord=' + window.sessionStorage.getItem('passWord') + '&id=' + data.key, '_blank')
        // window.open('http://localhost:8081/login' + '?userName=' + window.sessionStorage.getItem('userName') + '&passWord=' + window.sessionStorage.getItem('passWord') + '&id=' + data.key, '_blank');
        // cookie
        // HelperUtil.setCookie('userName', window.sessionStorage.getItem('userName'), 'localhost')
        // HelperUtil.setCookie('passWord', window.sessionStorage.getItem('passWord'), 'localhost')
        // window.open('http://localhost:8081/', '_blank');
        // this.openLinkAddress('http://localhost:8082/login/', '_blank')
        return
      }
      if (document.getElementsByClassName('high-light-subnet-node').length > 0) {
        document.getElementsByClassName('high-light-subnet-node')[0].classList.remove('high-light-subnet-node')
      }
      if (data.key !== '') {
        document.getElementById(data.key).classList.add('high-light-subnet-node')
      }
      // 双击当前组件中的节点触发，而不是其它组件中代码触发
      if (node !== undefined) {
        let data_subnet = {
          nodeType: 1,
          elementKey: data.key
        }
        EventBus.$emit('i-got-doubleClickSubnet', data_subnet)
      }
    },
    // 以post方式给新页面传值，暂时没用
    openLinkAddress (url, name) {
      var tempForm = document.createElement('form')
      tempForm.id = 'form'
      tempForm.method = 'post'
      tempForm.action = url
      tempForm.target = name

      var nameInput = document.createElement('input')
      nameInput.type = 'hidden'
      nameInput.name = 'userName'
      nameInput.value = window.sessionStorage.getItem('userName')
      tempForm.appendChild(nameInput)

      var pswInput = document.createElement('input')
      pswInput.type = 'hidden'
      pswInput.name = 'passWord'
      pswInput.value = window.sessionStorage.getItem('passWord')
      tempForm.appendChild(pswInput)

      // 监听事件的方法  打开页面window.open(name);
      tempForm.addEventListener('onsubmit', function () {
        window.open('about:blank', name, 'width=' + (window.screen.availWidth - 10) +
            ',height=' + (window.screen.availHeight - 30) +
            ',top=0,left=0,resizable=yes,status=yes,menubar=yes,scrollbars=yes,location=yes,toolbar=yes')
      })
      document.body.appendChild(tempForm)

      tempForm.submit()
      document.body.removeChild(tempForm)
    },
    /**
       * 解决右键弹出菜单问题和页面刷新问题
       */
    doNothing () {
      document.oncontextmenu = function () {
        return false
      }
      document.onkeydown = function () {
        var e = event || window.event || arguments.callee.caller.arguments[0]
        if (e && e.keyCode == 116) {
          return false
        }
        //            if(e && e.keyCode==123) {
        //              return false;
        //            }
      }
    },
    /**
       * @Description  ：
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    renderContent (h, {node, data, store}) {
      // <img src = {data.picUrl} height = "18" width = "18" ></img>
      return (
        <span style="padding-right:10px;" id={data.key}>
          <span style={{color: data.myColor, marginRight: '5px'}}><icon name={data.picUrl} w="18" h="18"></icon></span>
          <span>{node.label}</span>
        </span>
      )
    },
    /**
       * @Description  ：处理导航树数据，输出一个树形数组
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    handleDeviceData: function () {
      let deviceMgr = deviceManager(curThis.deviceCollection)
      let subnetWithDeviceListAndNoDeviceList = deviceMgr.getSubnetWithDeviceListAndNoDeviceList(curThis.subnetCollection)
      let subnetWithDeviceListAndNoDeviceListArray = Object.values(subnetWithDeviceListAndNoDeviceList)
      subnetWithDeviceListAndNoDeviceListArray = subnetWithDeviceListAndNoDeviceListArray.reverse()
      /** 0.建立根节点 */
      if (this.deviceShowList1.length === 0) {
        var subnetRoot = new Object() // 声明一个新的/
        subnetRoot.key = '1'
        subnetRoot.label = this.$t('TheLayoutSidebar.subnetRootLabel')
        subnetRoot.picUrl = 'subnet'
        subnetRoot.myColor = '' // todo
        subnetRoot.children = []
        subnetRoot.type = 0// 代表第一级节点
        this.deviceShowList1.push(subnetRoot)
      }

      var subnetInSubnetWithDevice = $.extend(true, [], subnetWithDeviceListAndNoDeviceListArray)
      for (var n = 0; n < subnetInSubnetWithDevice.length; n++) {
        subnetInSubnetWithDevice[n].key = subnetInSubnetWithDevice[n].subnetKey
        subnetInSubnetWithDevice[n].label = subnetInSubnetWithDevice[n].subnetName
        subnetInSubnetWithDevice[n].picUrl = 'subnet'
        subnetInSubnetWithDevice[n].myColor = curThis.alarmLevelConfig[subnetInSubnetWithDevice[n].status].alarmColor
        subnetInSubnetWithDevice[n].children = []
        subnetInSubnetWithDevice[n].type = 1 // 代表第二级节点，子网
        let deviceArray = Object.values(subnetInSubnetWithDevice[n].deviceList)
        // let g1Update = g.selectAll('.node').data(deviceArray, function (d) { return d.deviceKey });
        //
        // // 返回多出的dom集合并处理
        // g1Update.exit().remove();
        //
        // // 返回多出的数据集合并处理
        // let g1Enter = g1Update.enter().append('g')
        // g1Update = g1Update.merge(g1Enter);
        // g1Update.selectAll('.node-image').nodes().forEach(n => {
        //   d3.xml('./static/SWITCH.svg').mimeType("image/svg+xml").get((error, xml) => {
        //     if (error) throw error
        //     n.childNodes[0].setAttribute('width', this.drawGraphSizeConfig.imageWidth)
        //     n.childNodes[0].setAttribute('height', this.drawGraphSizeConfig.imageHeight)
        //     n.childNodes[0].style.fill = 'red';
        //   })
        // })

        for (var i = 0; i < deviceArray.length; i++) {
          let m = new Object()
          m.key = deviceArray[i].deviceKey
          // m.label = deviceArray[i].deviceName;
          m.label = deviceArray[i].displayName
          if (deviceArray[i].deviceTypeKey === '*' || deviceArray[i].deviceTypeKey === 'OTHER') {
            m.picUrl = 'other'
          } else {
            m.picUrl = deviceArray[i].deviceTypeKey
          }
          m.myColor = curThis.alarmLevelConfig[deviceArray[i].status]['alarmColor']
          m.type = 2 // 代表第三级节点，设备
          subnetInSubnetWithDevice[n].children.push(m)
        }
      }
      this.deviceShowList1[0].children = subnetInSubnetWithDevice

      curThis.$emit('update:curClickDeviceId', '')
      curThis.$emit('update:curClickSubnetId', '')
      // 链接跳转
      let subnetId = HelperUtil.getDesCookie('subnetId')
      if (curThis.subnetCollection !== undefined && curThis.subnetCollection !== null) {
        let subnets = Object.values(curThis.subnetCollection)
        let isExist = subnets.find((n) => {
          return n.subnetKey === subnetId
        })
        if (subnetId !== '' && isExist) {
          curThis.$nextTick(function () {
            let subnet = {
              type: 1,
              key: subnetId
            }
            curThis.handleDoubleClick(subnet)
          })
        }
      }
    },

    addShowList: function (newVal, oldVal) {
      // for (let subnetLength = 0; subnetLength < curThis.deviceShowList1[0].children.length; subnetLength++) {
      //   for (let length = 0; length < curThis.addDevice.length; length++) {
      //     if (curThis.deviceShowList1[0].children[subnetLength].subnetKey === curThis.addDevice[length].subnetKey) {
      //       Vue.set(curThis.deviceShowList1[0].children[subnetLength].deviceList, curThis.addDevice[length].deviceKey, curThis.addDevice[length])
      //     }
      //   }
      // }
      let device = {}
      for (let newValLength = 0; newValLength < newVal.length; newValLength++) {
        for (let subnetLength = 0; subnetLength < curThis.deviceShowList1[0].children.length; subnetLength++) {
          if (newVal[newValLength].subnetKey === curThis.deviceShowList1[0].children[subnetLength].key) {
            device.key = newVal[newValLength].deviceKey
            device.label = newVal[newValLength].displayName
            if (newVal[newValLength].deviceTypeKey === '*' || newVal[newValLength].deviceTypeKey === 'OTHER') {
              device.picUrl = 'other'
            } else {
              device.picUrl = newVal[newValLength].deviceTypeKey
            }
            device.myColor = curThis.alarmLevelConfig[newVal[newValLength].status]['alarmColor']
            device.type = 2 // 代表第三级节点，设备
            curThis.deviceShowList1[0].children[subnetLength].children.push(device)
          }
        }
      }
    },

    deleteShowListDevice: function (newVal, oldVal) {
      for (let length = 0; length < newVal.length; length++) {
        for (let i = 0; i < curThis.deviceShowList1[0].children.length; i++) {
          if (newVal[length].subnetKey === curThis.deviceShowList1[0].children[i].key) {
            //  找到删除设备所在子网 遍历showList 找到要删除的对象
            for (let showListLength = 0; showListLength < curThis.deviceShowList1[0].children[i].children.length; showListLength++) {
              // 删除配置信息
              if (curThis.deviceShowList1[0].children[i].children[showListLength].key === newVal[length].deviceKey) {
                curThis.deviceShowList1[0].children[i].children.splice(showListLength, 1)
              }
              // 删除设备
              // if (curThis.deviceShowList1[0].children[i].deviceList[showListLength].deviceKey === newVal[length].deviceKey) {
              //   curThis.deviceShowList1[0].children.splice(i, 1)
              // }
            }
            // 删除设备
            for (let showListLength = 0; showListLength < curThis.deviceShowList1[0].children[i].children.length; showListLength++) {
              for (let showListLength = 0; showListLength < curThis.deviceShowList1[0].children[i].children.length; showListLength++) {
                if (newVal[length].subnetKey === curThis.deviceShowList1[0].children[i].key) {
                  if (curThis.deviceShowList1[0].children[i].deviceList.hasOwnProperty(newVal[length].deviceKey)) {
                    Vue.delete(curThis.deviceShowList1[0].children[i].deviceList, newVal[length].deviceKey)
                  }
                }
              }
            }
          }
        }
      }
    },

    updateSubnetNode: function () {
      let deviceMgr = deviceManager(curThis.deviceCollection)
      let subnetWithDeviceListAndNoDeviceList = deviceMgr.getSubnetWithDeviceListAndNoDeviceList(curThis.subnetCollection)
      if (Object.values(subnetWithDeviceListAndNoDeviceList).length === curThis.deviceShowList1[0].children.length) {
        // 修改
        for (var n = 0; n < curThis.deviceShowList1[0].children.length; n++) {
          curThis.deviceShowList1[0].children[n].label = subnetWithDeviceListAndNoDeviceList[curThis.deviceShowList1[0].children[n].key].subnetName
          curThis.deviceShowList1[0].children[n].myColor = curThis.alarmLevelConfig[subnetWithDeviceListAndNoDeviceList[curThis.deviceShowList1[0].children[n].key].status].alarmColor
          curThis.updateDeviceNode(n, subnetWithDeviceListAndNoDeviceList[curThis.deviceShowList1[0].children[n].key].deviceList)
        }
      } else if (Object.values(subnetWithDeviceListAndNoDeviceList).length > curThis.deviceShowList1[0].children.length) {
        // 新建
        for (let subnetKey in subnetWithDeviceListAndNoDeviceList) {
          let flag = true
          for (let n = 0; n < curThis.deviceShowList1[0].children.length; n++) {
            if (subnetKey === curThis.deviceShowList1[0].children[n].key) {
              flag = false
              curThis.deviceShowList1[0].children[n].label = subnetWithDeviceListAndNoDeviceList[subnetKey].subnetName
              curThis.deviceShowList1[0].children[n].myColor = curThis.alarmLevelConfig[subnetWithDeviceListAndNoDeviceList[subnetKey].status].alarmColor
              curThis.updateDeviceNode(n, subnetWithDeviceListAndNoDeviceList[curThis.deviceShowList1[0].children[n].key].deviceList)
              break
            }
          }
          // 新建
          if (flag) {
            let subnet = {}
            subnet.key = subnetWithDeviceListAndNoDeviceList[subnetKey].subnetKey
            subnet.label = subnetWithDeviceListAndNoDeviceList[subnetKey].subnetName
            subnet.picUrl = 'subnet'
            subnet.myColor = curThis.alarmLevelConfig[subnetWithDeviceListAndNoDeviceList[subnetKey].status].alarmColor
            subnet.children = []
            subnet.type = 1 // 代表第二级节点，子网
            curThis.deviceShowList1[0].children.splice(curThis.deviceShowList1[0].children.length - 1, 0, subnet)
          }
        }
      } else {
        // 删除
        for (let n = 0; n < curThis.deviceShowList1[0].children.length; n++) {
          let flag = true
          for (let subnetKey in subnetWithDeviceListAndNoDeviceList) {
            if (subnetKey === curThis.deviceShowList1[0].children[n].key) {
              flag = false
              curThis.deviceShowList1[0].children[n].label = subnetWithDeviceListAndNoDeviceList[subnetKey].subnetName
              curThis.deviceShowList1[0].children[n].myColor = curThis.alarmLevelConfig[subnetWithDeviceListAndNoDeviceList[subnetKey].status].alarmColor
              curThis.updateDeviceNode(n, subnetWithDeviceListAndNoDeviceList[curThis.deviceShowList1[0].children[n].key].deviceList)
              break
            }
          }
          // 删除
          if (flag) {
            curThis.deviceShowList1[0].children.splice(n, 1)
            n--
          }
        }
      }
    },

    updateDeviceNode: function (i, deviceList) {
      let showDeviceList = curThis.deviceShowList1[0].children[i].children
      if (showDeviceList.length === Object.values(deviceList).length) {
        // 修改
        for (let n = 0; n < showDeviceList.length; n++) {
          showDeviceList[n].label = deviceList[showDeviceList[n].key].displayName
          if (deviceList[showDeviceList[n].key].deviceTypeKey === '*' || deviceList[showDeviceList[n].key].deviceTypeKey === 'OTHER') {
            showDeviceList[n].picUrl = 'other'
          } else {
            showDeviceList[n].picUrl = deviceList[showDeviceList[n].key].deviceTypeKey
          }
          showDeviceList[n].myColor = curThis.alarmLevelConfig[deviceList[showDeviceList[n].key].status]['alarmColor']
        }
      } else if (curThis.deviceShowList1[0].children[i].children.length < Object.values(deviceList).length) {
        // 新建
        let device = {}
        for (let deviceKey in deviceList) {
          let flag = true
          for (var n = 0; n < showDeviceList.length; n++) {
            if (deviceKey === showDeviceList[n].key) {
              flag = false
              showDeviceList[n].label = deviceList[showDeviceList[n].key].displayName
              if (deviceList[showDeviceList[n].key].deviceTypeKey === '*' || deviceList[showDeviceList[n].key].deviceTypeKey === 'OTHER') {
                showDeviceList[n].picUrl = '*'
              } else {
                showDeviceList[n].picUrl = deviceList[showDeviceList[n].key].deviceTypeKey
              }
              showDeviceList[n].myColor = curThis.alarmLevelConfig[deviceList[showDeviceList[n].key].status]['alarmColor']
              break
            }
          }
          // 新建
          if (flag) {
            device.key = deviceList[deviceKey].deviceKey
            device.label = deviceList[deviceKey].displayName
            if (deviceList[deviceKey].deviceTypeKey === '*' || deviceList[deviceKey].deviceTypeKey === 'OTHER') {
              device.picUrl = 'other'
            } else {
              device.picUrl = deviceList[deviceKey].deviceTypeKey
            }
            device.myColor = curThis.alarmLevelConfig[deviceList[deviceKey].status]['alarmColor']
            device.type = 2 // 代表第三级节点，设备
            showDeviceList.push(device)
          }
        }
      } else {
        // 删除
        for (let n = 0; n < showDeviceList.length; n++) {
          let flag = true
          for (let subnetKey in deviceList) {
            if (subnetKey === showDeviceList[n].key) {
              flag = false
              showDeviceList[n].label = deviceList[showDeviceList[n].key].displayName
              if (deviceList[showDeviceList[n].key].deviceTypeKey === '*' || deviceList[showDeviceList[n].key].deviceTypeKey === 'OTHER') {
                showDeviceList[n].picUrl = 'other'
              } else {
                showDeviceList[n].picUrl = deviceList[showDeviceList[n].key].deviceTypeKey
              }
              showDeviceList[n].myColor = curThis.alarmLevelConfig[deviceList[showDeviceList[n].key].status]['alarmColor']
              break
            }
          }
          if (flag) {
            showDeviceList.splice(n, 1)
            n--
          }
        }
      }
    },

    calSubnetColor: function (deviceList) {
      let index = -1
      let alarmMgr = AlarmManager(curThis.alarmCollection)
      let alarmLevelList = alarmMgr.getNumberByAlarmLevel(alarmMgr.findAlarmBySubnet(deviceList))
      if (alarmLevelList[1] !== 0) {
        index = 1
      }
      if (alarmLevelList[2] !== 0) {
        index = 2
      }
      if (alarmLevelList[0] !== 0) {
        index = 0
      }
      if (index === -1) {
        return 'blue'
      }
      return curThis.alarmLevelConfig[index]['alarmColor']
    },
    /***
       * @Description  : 获取所有设备列表
       * @author       : lxy
       * @date         : 2018/12/24 11:29
       */
    getAllDevice: function () {
      // 调用domin函数
      DeviceService.getAllDeviceCollection().then(result => {
        // 成功
        this.deviceList = result
      }).catch(err => {
        // 失败
      })
    },

    /***
       * @Description  : 获取所有子网列表
       * @author       : lxy
       * @date         : 2018/12/24 11:29
       */
    getAllSubnet: function () {
      // 调用domin函数
      SubnetService.getAllSubnetCollection().then(result => {
        // 成功
        this.subnetList = result
      }).catch(err => {
        // 失败
      })
    },

    /**
       * 功能描述: 右击触发事件，获取右击的设备信息，处理相应的信息
       * @param: object，里面有三个值，设备key、设备名称、设备显示图片的地址
       * @return:
       * @auther: xinyuan
       * @date: 2019/1/10 11:15
       */
    rightClick (event, object, value, element) {
      // if (document.getElementById('linkMenu') !== null) {
      //   document.getElementById('linkMenu').style.display = 'none'
      // }
      // if (document.getElementById('nodeMenu') !== null) {
      //   document.getElementById('nodeMenu').style.display = 'none'
      // }
      //
      // if (object.type === 1) { // 点击为子网
      //   this.getAllSubnet()
      //   let subnetMgr = subnetManager(this.subnetCollection)
      //   this.selectSubnet = subnetMgr.findSubnetByKey(object.key)
      //   let flag = 0 // 0是子网有设备，1没有设备
      //   if (object.children.length === 0) {
      //     flag = 1
      //   }
      //   this.contextCommands = SubnetCommands.generateCommandsForSubnet(this.selectSubnet, this.commandContext, flag)
      //   this.menuVisible = true
      // } else if (object.type === 0) { // 点击为平台
      //   this.selectSubnet = {
      //     'subnetKey': '',
      //     'subnetName': '',
      //     'domain': '',
      //     'delFlag': '',
      //     'modifyTime': ''
      //   }
      //   this.contextCommands = []
      //   this.contextCommands.push(SubnetCommands.createAndCopySubnetCommand(this.$t('TheLayoutSidebar.subnetCreate'), this.selectSubnet, this.commandContext))
      //   this.menuVisible = true
      // } else if (object.type === 2) { // 点击为设备
      //   let enableLinkList = []// 需要加入规划的链路集合
      //   let disableFlag = 0// 链路加入规划 这一项是否disable的标识；0--disable/1--enable
      //   if (this.deviceCollection[object.key].deviceStatus !== 2) { // 此时当前设备状态为已激活
      //     let linkMgr = LinkManager(this.linkCollection)
      //     enableLinkList = linkMgr.findLinkByDeviceKey(this.deviceCollection, object.key)
      //     if (enableLinkList.length !== 0) { // 此时链路集合里面有链路
      //       disableFlag = 1
      //     }
      //   }
      //   this.getAllDevice()
      //   let deviceMgr = deviceManager(this.deviceCollection)
      //   this.selectDevice = deviceMgr.findDeviceByKey(object.key)
      //   this.contextCommands = DeviceCommands.generateCommandsForDevice(this.selectDevice, this.commandContext, disableFlag, enableLinkList)
      //   this.menuVisible = true
      // }
      if (object.type === 2) {
        let enableLinkList = []// 需要加入规划的链路集合
        let disableFlag = 0// 链路加入规划 这一项是否disable的标识；0--disable/1--enable
        // if (this.deviceCollection[object.key].deviceStatus !== 2) { // 此时当前设备状态为已激活
        //   let linkMgr = LinkManager(this.linkCollection)
        //   enableLinkList = linkMgr.findLinkByDeviceKey(this.deviceCollection, object.key)
        //   if (enableLinkList.length !== 0) { // 此时链路集合里面有链路
        //     disableFlag = 1
        //   }
        // }
        // this.getAllDevice()
        // let deviceMgr = deviceManager(this.deviceCollection)
        // this.selectDevice = deviceMgr.findDeviceByKey(object.key)
        curThis.selectDevice = curThis.deviceCollection[object.key]
        // let disableFlag = 0
        disableFlag = curThis.handleDisa(disableFlag, curThis.selectDevice)
        this.contextCommands = DeviceCommands.generateCommandsForDevice(this.selectDevice, this.commandContext, disableFlag, enableLinkList)
        this.menuVisible = true
      }
      /* 菜单位置的边界检测 */
      curThis.menuTop = event.clientY
      curThis.menuLeft = event.clientX
    },
    /**
     * @Description  : handleDisa
     * @author       : ls
     * @date         : 2021/3/2 14:13
     * @param        :
     * @return       :
     */
    handleDisa: function (val, device) {
      let alarmList = []
      alarmList = Object.values(curThis.alarmCollection)
      for (var i = 0; i < alarmList.length; i++) {
        if (alarmList[i].elementKey === device.deviceKey && alarmList[i].alarmCode === 'A_DEVICE_STATUS') {
          val = 1
          break
        }
      }
      return val
    },

    /***
       *  点击当前的节点展开
       */
    clickNodeExpand (data) {
      let deviceMgr = deviceManager(curThis.deviceCollection)
      let subnetMgr = subnetManager(curThis.subnetCollection)
      let subnetWithDeviceListAndNoDeviceList = deviceMgr.getSubnetWithDeviceListAndNoDeviceList(curThis.subnetCollection)
      let devicesNoSubnet1 = subnetMgr.functionDeviceWithoutSubnet()
      let subnetWithDeviceListAndNoDeviceListArray = Object.values(subnetWithDeviceListAndNoDeviceList)

      // 找到deviceKey所属的子网
      // 使用flag标记,0是未找到，1是找到
      let flag = 0
      let subnetIdForDevicekey = '' // 设备所属的子网ID
      for (let i = 0; i < subnetWithDeviceListAndNoDeviceListArray.length; i++) {
        let deviceListInSubnet = Object.values(subnetWithDeviceListAndNoDeviceListArray[i].deviceList)
        for (let j = 0; j < deviceListInSubnet.length; j++) {
          if (deviceListInSubnet[j].deviceKey === data) { // 找到
            flag = 1
            subnetIdForDevicekey = subnetWithDeviceListAndNoDeviceListArray[i].subnetKey
          }
        }
      }

      // 如果该设备有所属的子网
      if (flag === 1) {
        this.$refs.vuetree.$children[0].store.nodesMap[subnetIdForDevicekey].expanded = true
      }
    },
    locationScroll () {
      // 定位滚动
      setTimeout(function () {
        if (document.getElementsByClassName('is-current').length > 0) {
          // 每个节点的高度
          var nodeHeight = document.getElementsByClassName('is-current')[0].firstElementChild.clientHeight
          // 选中节点到容器顶部的高度
          var nodeOffsetTop = document.getElementsByClassName('is-current')[0].firstElementChild.offsetTop
          // 侧边栏容器dom元素
          var sidebar = document.getElementsByClassName('sidebar')[0]
          if (nodeOffsetTop + nodeHeight - sidebar.firstElementChild.firstElementChild.scrollTop > sidebar.offsetHeight - 100) {
            // 选中节点的底部低于侧边栏底部的可视区域，则滚动到选中节点在侧边栏底部显示的位置
            sidebar.firstElementChild.firstElementChild.scrollTo(0, nodeOffsetTop + nodeHeight - sidebar.offsetHeight + sidebar.offsetHeight / 2)
          } else if (nodeOffsetTop - sidebar.firstElementChild.firstElementChild.scrollTop < 100) {
            // 选中节点的顶部高于侧边栏顶部的可视区域，则滚动到选中节点在侧边栏顶部显示的位置
            sidebar.firstElementChild.firstElementChild.scrollTo(0, nodeOffsetTop - sidebar.offsetHeight / 2)
          }
        }
      }, 300)
    }
  },
  // 监视data数据变化,任何一个数据变化都会导致重绘
  watch: {
    deviceCollection: {
      handler (newVal, OldVal) {
        let time1 = new Date()
        console.log('sidebar deviceCollection ============' + time1.getMinutes() + 'm' + time1.getSeconds() + 's' + time1.getMilliseconds() + 'ms')
        // this.handleDeviceData()
      },
      deep: true
    },
    // addDevice: {
    //   handler (newVal, OldVal) {
    //     curThis.addShowList(newVal, OldVal)
    //   },
    //   deep: true
    // },
    // deleteDevice: {
    //   handler (newVal, OldVal) {
    //     this.deleteShowListDevice(newVal, OldVal)
    //   },
    //   deep: true
    // },
    // modifyDevice: {
    //   handler (newVal, OldVal) {
    //     for (let length = 0; length < newVal.length; length++) {
    //       for (let i = 0; i < curThis.deviceShowList1[0].children.length; i++) {
    //         if (newVal[length].subnetKey === curThis.deviceShowList1[0].children[i].key) {
    //           let j
    //           for (j = 0; j < curThis.deviceShowList1[0].children[i].children.length; j++) {
    //             if (newVal[length].deviceKey === curThis.deviceShowList1[0].children[i].children[j].key) {
    //               curThis.deviceShowList1[0].children[i].children[j].label = newVal[length].displayName
    //               curThis.deviceShowList1[0].children[i].children[j].myColor = curThis.alarmLevelConfig[newVal[length].status]['alarmColor']
    //               break
    //             }
    //           }
    //         }
    //       }
    //     }
    //
    //   },
    //   deep: true
    // },
    subnetCollection: {
      handler (newVal, OldVal) {
        curThis.updateSubnetNode()
        // this.handleDeviceData()
      },
      deep: true
    },
    alarmLevelConfig: {
      handler (newVal, OldVal) {
        this.handleDeviceData()
      },
      deep: true
    },
    curClickDeviceId: {
      handler (newVal, OldVal) {
        curThis.my_clickDeviceId = newVal
        curThis.clickNodeExpand(newVal)
        curThis.$nextTick(function () {
          // this.$refs.vuetree.$children[0].setCurrentKey(newVal)
          curThis.$refs.vuetree.$children[0].setCurrentKey(newVal)
          curThis.locationScroll()
        })
      },
      deep: true
    },
    my_clickDeviceId: {
      handler (newVal, OldVal) {
        // curThis.my_clickDeviceId = newVal
        curThis.$emit('update:curClickDeviceId', newVal)
      },
      deep: true
    },
    curClickSubnetId: {
      handler (newVal, OldVal) {
        this.my_clickSubnetId = newVal
        this.$nextTick(function () {
          this.$refs.vuetree.$children[0].setCurrentKey(newVal)
          this.locationScroll()
        })
      },
      deep: true
    },
    my_clickSubnetId: {
      handler (newVal, OldVal) {
        // this.my_clickSubnetId = newVal
        this.$emit('update:curClickSubnetId', newVal)
      },
      deep: true
    },
    '$i18n.locale' () {
      this.deviceShowList1[0].label = this.$t('TheLayoutSidebar.subnetRootLabel')
    }
  },
  // 生命周期，调用绘制树形数组函数
  created: function () {
    curThis = this
    this.doNothing()
    this.handleDeviceData()
    this.getAllDevice()
    this.getAllSubnet()
  },
  mounted () {
    let _this = this
    /***
       * @Description  : 监听左键点击事件
       * @author       : zf
       * @date         : 2019/05/20 15:20
       */
    document.addEventListener('click', (e) => {
      this.menuVisible = false
    })

    /***
       * @Description  : 监听右键点击事件
       * @author       : zf
       * @date         : 2019/05/20 15:21
       */
    document.addEventListener('contextmenu', (e) => {
      this.menuVisible = false
    })
    // 双击子网节点的处理
    EventBus.$on('i-got-doubleClickSubnetId', _this.handleDoubleClick)
  },
  updated () {
    /** 侧边栏右键菜单位置的边界检测 */
    let menu = document.getElementById('menu')
    const contextmenuWidth = menu.offsetWidth
    const contextmenuHeight = menu.offsetHeight
    let top = curThis.menuTop
    let left = curThis.menuLeft
    if (contextmenuHeight + top >= window.innerHeight) {
      top -= contextmenuHeight
    }
    if (contextmenuWidth + left >= window.innerWidth) {
      left -= contextmenuWidth
    }
    /** 菜单定位 */
    menu.style.left = left + window.scrollX + 'px'
    menu.style.top = top + 'px'
    menu.style.position = 'absolute' // 为新创建的DIV指定绝对定位
  }
}
</script>

<style scoped lang="scss">
  /deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: #66b1ff87 !important;
  }

</style>
<style>
  /*-----------------侧边栏高亮--------------------*/
  .high-light-subnet-node{
    font-weight: 700 !important;
  }
</style>
