<template lang="pug">
div(onselectstart="return false;"  @mousedown="regionMousedown" @mousemove="regionMousemove" @mouseup="regionMouseup")
  div(class="top_button" style="width:100%;height:40px; padding-top:3px")
    div(style="float:left;margin-left:16px;")
      div(:class="item.value" name="iconListNow" :title="item.name" :style="{cursor:editable?'move':''}" :id="item.id" v-for="item in typeList")
    div(style="float:right; margin-top:6px;")
      //- <el-tooltip class="item" effect="dark" :content="editable?'禁用':'启用'" placement="bottom">
      //-   <el-button :type="editable?'info':'primary'" size='mini' style="margin-right:10px;" icon="el-icon-edit" circle @click="changeEditable"></el-button>
      //- </el-tooltip>
      el-button(type="primary" size='mini' style="margin-right:10px;" @click="changeEditable" v-if="!editable") 编辑
      el-button(type="primary" size='mini' style="margin-right:10px;" @click="deleteHandle" v-if="editable" :disabled="delflag") 删除
      //- <el-button type="primary" size='mini' style="margin-right:10px;" :disabled='!editable' @click="clickAdd">添加新图标</el-button>
      el-button(type="primary" size='mini' style="margin-right:10px;" @click="saveResourceList" v-if="editable") 保存
  div(style="clear:both")
  el-container( style='padding-left:0px;')
    el-aside(width="18vw" style='height:750px')
      el-card.treeCard.tree-container(style='min-height:630px;background:#f4f4f4;')
        div(class="monitor_point_left_top")
          div.title-bold(slot='header' class="monitor_point_left_topL") 资源列表
          div(class="monitor_point_left_topR")
            el-input(suffix-icon="el-icon-search" size='mini' placeholder="" v-model="searchInput" clearable)
        //- el-tree(style='background:#f4f4f4;' :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :check-on-click-node='true' :props="defaultProps" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' )
        el-tree.dic_tree( :data="treeData"  ref='tree' :accordion='true' :highlight-current='true' :filter-node-method="filterNode" :check-on-click-node='true' :props="defaultProps" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' )
          span(class="custom-tree-node" style='width:90%;line-height: 18px;' slot-scope="{ node, data }")
              span(v-if="node.data.level == 3" class="el-icon-zhandian xa-icon")
              //- span(v-if="node.data.level == 3 && node.data.iconB" class="el-icon-wq-treeIcon1")
              span(v-if="node.data.level == 4 && node.data.iconB" class="el-icon-wq-treeIcon1 xa-icon")
              span(v-if="node.data.level == 4 && !node.data.iconB" class="el-icon-wq-treeIcon xa-icon")
              span(v-if="node.data.level == 5 && node.data.name == '视频监控'" class="el-icon-shipin xa-icon")
              span(v-if="node.data.level == 5 && node.data.name == '出入口控制'" class="el-icon-churukoukongzhi xa-icon")
              span(v-if="node.data.level == 5 && node.data.name == '入侵报警'" class="el-icon-ruqinbaojing xa-icon")
              span(v-if="node.data.level == 5 && node.data.name == '安全检查'" class="el-icon-anquanjiancha xa-icon")
              span(v-if="node.data.level == 6 " :class="node.data.icon+'7'" class='xa-icon')
              span() &nbsp;{{node.label}}
              span(v-if=" node.data.iconB" class='el-icon-my-treeFlag')
    el-main(style="padding:0px;")
      el-card.tableCard
        div(slot='header'  ref="sprtDom" )
          el-row(:span="24")
            el-col(:md='12' :sm="5" class='tier-btn')
                el-button(type="primary" size='mini' plain :class="[checkedData.tierId===item.id?'active-tier':'']" style="float:left;margin:6px 10px 0 0; " v-for="item in mapList" :key='item.id' @click="changeMap(item)") {{item.name}}
            el-col(:md='12' :sm="5")
                  div(style="float:right;")
                    div( :class="item.value" :title="item.name" style="margin:5px 5px 0 0;" v-for="item in iconNameListBottom" @click="iconClick(item)")
        el-row(style="padding-bottom:15px;height:680px" ,:span="24")
          //- el-col(class="resource-container" :style="obj" ref="drag")
          el-col(class="resource-container"  ref="drag")
            img(style="width:100%;pointer-events:none" :src="stationMap?stationMap.readPath:''")
            div(:class="{'span-box':true}" v-if='!isDone' v-for="item in list" :id='item.id' :title="item.name" :dataKey="item.key" :key="item.key" @click="queryDetail(item.id)" :style="{'left':item.xpoint?item.xpoint+'px':0,'top':item.ypoint?item.ypoint+'px':0}")
              span(v-if="item.active && (item.name !== '振动光纤' && item.name !== '红外对射')" :class="item.icon+'6'")
              span(v-if="!item.active && (item.name !== '振动光纤' && item.name !== '红外对射')" :class="item.icon+'5'")

              //- div(v-if="item.active && (item.name === '振动光纤' || item.name === '红外对射')" :style="{'width':item.width+'px','height':'5px','background':'#409EFF','cursor':'pointer'}")
              div(  class='line_warp'  v-if="item.active && (item.name === '振动光纤' || item.name === '红外对射')"   )
                div(class='point_left'  :class="item.icon+'6'")
                div( ref='line'  :style="{'width':item.width+'px','height':'5px','background':'#409EFF','cursor':'pointer'}")
                div(class='point_right' :class="item.icon+'6'")
              //- div(v-if="!item.active && (item.name === '振动光纤' || item.name === '红外对射')" :style="{'width':item.width+'px','height':'3px','background':'rgb(102, 177, 255)','cursor':'pointer'}")
              div(  class='line_warp'  v-if="!item.active && (item.name === '振动光纤' || item.name === '红外对射')"   )
                div(class='point_left'  :class="item.icon+'5'")
                div(:style="{'width':item.width+'px','height':'3px','background':'rgb(102, 177, 255)','cursor':'pointer'}")
                div(class='point_right' :class="item.icon+'5'" )

            div(:class="{'span-box':true}" v-if='isDone' v-for="item in list" :id='item.id' :title="item.name" :dataKey="item.key" :key="item.key" disabled :style="{'left':item.xpoint?item.xpoint+'px':0,'top':item.ypoint?item.ypoint+'px':0}"   v-drag)
              span(v-if="item.active && (item.name !== '振动光纤' && item.name !== '红外对射')" :class="item.icon+'6'")
              span(v-if="!item.active && (item.name !== '振动光纤' && item.name !== '红外对射')" :class="item.icon+'5'")

              //- div(   class='line_warp'  v-if="item.active && (item.name === '振动光纤' || item.name === '红外对射')"  ref='lineWarp' style='cursor: w-resize;' )

              vue-drag-resize( class='line_warp' :sticks='sticksArr'   v-if="item.active && (item.name === '振动光纤' || item.name === '红外对射')"  ref='lineWarp'   )
                  div(class='point_left' style='width:40px;height:40px;'  :class="item.icon+'6'")
                  //- div( ref='line'  @mousewheel="handwheel($event,item)" :style="{'width':item.width+'px','height':'5px','background':'#409EFF','cursor':'pointer'}")
                  div( ref='line'   :style="{'height':'5px','background':'#409EFF','cursor':'pointer'}" style='width:100%')
                  div(class='point_right' style='width:40px;height:40px;' :class="item.icon+'6'" )
                  //- el-button(icon="el-icon-right" style="cursor:e-resize;float:right;margin-top:-11px;" size="mini" circle type="primary" @click="iconMousedown(item)")

              vue-drag-resize(  class='line_warp'  v-if="!item.active && (item.name === '振动光纤' || item.name === '红外对射')"  )
                  div(class='point_left' style='width:40px;height:40px;'  :class="item.icon+'5'")
                  //- div( ref='line'  @mousewheel="handwheel($event,item)" :style="{'width':item.width+'px','height':'5px','background':'#409EFF','cursor':'pointer'}")
                  div(:style="{'height':'3px','background':'rgb(102, 177, 255)','cursor':'pointer'}" style='width:100%')
                  div(class='point_right' style='width:40px;height:40px;' :class="item.icon+'5'")
                  //- el-button(icon="el-icon-right" style="cursor:e-resize;float:right;margin-top:-11px;" size="mini" circle type="primary" @click="iconMousedown(item)")
          el-col()

        // 弹窗, 新增 / 修改
        add-or-update(v-if='addOrUpdateVisible', ref='addOrUpdate', @refreshdatalist='updateList')
        query-detail(v-if='queryDetailVisible', ref='queryDetail')
    span(:class="spanDragData.name" v-if="spanDragData.show" :style="{left:spanDragData.x+'px',top:spanDragData.y+'px',position:'fixed'}")
</template>

<script>
import AddOrUpdate from './add-or-update'
import QueryDetail from './query-detail'
import { getUUID } from '@/util'
import VueDragResize from 'vue-drag-resize'
import Vue from 'vue'
let that
export default {
  data() {
    return {
      sticksArr: ['mr', 'ml'],
      isRotate: false,
      ssId: '',
      isDone: false,
      drawer: false,
      isCollapse: true,
      delflag: true,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      queryDetailVisible: false,
      treeData: [],
      systemList: [],
      defaultExpandedKeys: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        level: 'level'
      },
      nodeKey: 'id',
      station: {}, //当前选择的站点
      mapList: [], //当前站点的所有层
      stationMap: {}, //当前选择的层
      resource: {}, //当前选择的资源点
      typeList: [],
      checkedData: {
        lineId: '',
        lineName: '',
        stationId: '',
        stationName: '',
        subCode: '',
        subSystem: '',
        tierId: '',
        tierName: '',
        resourceId: '',
        sId: localStorage.getItem('stationId')
      },
      currentNode: {},
      dragAble: false,
      list: [],
      searchInput: '',
      obj: 'pointer-events:none',
      editable: false,
      clickItem: {},
      iconNameListBottom: [],
      spanDragData: {
        x: 0,
        y: 0,
        show: false,
        name: ''
      },
      spanDragListNow: {},
      mousemoveStatus: false
    }
  },
  components: {
    AddOrUpdate,
    QueryDetail,
    VueDragResize
  },
  watch: {
    searchInput(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    that = this
    this.initTree()
    this.initResourceTypeDicList()
    this.initSubSystemDicList()
    // this.getDataList()
  },
  methods: {
    handClick() {
      console.log(111)
      this.$nextTick(() => {
         this.$refs.lineWarp.style.transform = ' rotate(90deg)'
      })
    },
    handwheel(e, item) {
      let str = e.wheelDelta
      if (str < 0) {
        // 下滚动 100
        item.width = parseInt(item.width) - 10
        if (item.width <= 40) {
          item.width = 40
        }
        console.log(item.width)
      }
      if (str > 0) {
        // 上滚动 -100
        item.width = parseInt(item.width) + 10
        if (item.width >= 600) {
          item.width = 600
        }
        console.log(item.width)
      }
    },
    //新建资源点对象
    getNewBox(item, x, y) {
      return {
        id: '',
        key: getUUID(),
        level: 6,
        name: item.name,
        password: '',
        port: '',
        remark: '',
        lineId: this.checkedData.lineId,
        lineName: this.checkedData.lineName,
        stationId: this.checkedData.stationId,
        stationName: this.checkedData.stationName,
        subCode: this.checkedData.subCode,
        subSystem: this.checkedData.subSystem,
        tierId: this.checkedData.tierId,
        tierName: this.checkedData.tierName,
        type: item.id,
        icon: item.value,
        iconPath: '',
        username: 'admin',
        xpoint: x || '100',
        ypoint: y || '100',
        width: 200
      }
    },
    // 树节点过滤
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    initTree() {
      // console.log('stationId：', this.checkedData.sId)
      this.$http({
        url: this.$http.adornUrl('/liResource/getTreeList'),
        method: 'post',
        data: {
          stationId: this.checkedData.sId,
          name: this.searchInput
        }
      }).then(data => {
        if (data && data.code === 0) {
          this.treeData = data.tree
          if (!this.checkedData.sId) {
            Vue.set(this.treeData[0].children[0], 'iconB', true)
            // this.defaultExpandedKeys = [this.treeData[0].children[0].id]
            //设置选中的节点
            // this.$refs.tree.setChecked(this.treeData[0].children[0].id)
            this.$refs.tree.setCurrentNode(this.treeData[0].children[0])
          }
          // console.log('初始化线路树：', this.treeData)
          this.initStation(this.treeData[0].id, null, 1)
          // console.log(this.treeData)
        }
      })
    },
    //初始化站点下的资源点
    // initTreeStationMap (node, flag) {
    //   this.$http({
    //     url: this.$http.adornUrl('/liResource/getStationMapTreeList'),
    //     method: 'post',
    //     data: {
    //       stationId: node.id
    //     }
    //   })
    //     .then(data => {
    //       // console.log('初始化线路树：', data.nodes)
    //       if (data && data.code === 0) {
    //         this.$refs.tree.updateKeyChildren(node.id, data.nodes)
    //       }
    //     })
    //     .then(() => {
    //       if (this.checkedData.sId && flag) {
    //         this.defaultExpandedKeys = [this.treeData[0].children[0].id]
    //         //设置选中的节点
    //         // console.log('默认选中节点', this.treeData[0].children[0])
    //         this.$refs.tree.setCurrentNode(this.treeData[0].children[0])
    //         // console.log('this', this)
    //       }
    //       this.initStation(node.id, null, 1)
    //     })
    // },
    initTreeResource(node) {
      let data = {
        lineId: this.checkedData.lineId,
        stationId: this.checkedData.stationId,
        tierId: this.checkedData.tierId,
        subCode: this.checkedData.subCode
      }
      // console.log('初始化线路树请求参数：', data)
      this.$http({
        url: this.$http.adornUrl('/liResource/getResourceTreeList'),
        method: 'post',
        data: data
      }).then(data => {
        // console.log('初始化线路树：', data.nodes)
        if (data && data.code === 0) {
          this.$refs.tree.updateKeyChildren(node.id, data.nodes)
        }
      })
    },
    initStation(id, res, subId) {
      // console.log('初始化站点id：', id)
      this.$http({
        url: this.$http.adornUrl(`/liStation/getId/${id}`),
        method: 'get',
        params: this.$http.adornParams()
      })
        .then(data => {
          if (data && data.code === 0) {
            this.station = data.bean
            this.mapList = data.bean.mapList
            this.checkedData.lineId = this.station.lineId
            this.checkedData.lineName = this.station.lineName
            this.checkedData.stationId = this.station.id
            this.checkedData.stationName = this.station.stationName
            if (res) {
              this.mapList.forEach(e => {
                if (res.tierId === e.id) {
                  this.checkedData.tierId = e.id
                  this.checkedData.tierName = e.name
                  this.stationMap = e
                }
              })
            } else {
              this.checkedData.tierId = this.mapList[0].id
              this.checkedData.tierName = this.mapList[0].name
              this.stationMap = this.mapList[0]
            }
            // console.log('站点地图：', this.mapList)
          }
        })
        .then(() => {
          if (subId === 1) {
            this.showResourceByMapId(null)
          } else {
            this.showResourceByParentId(subId)
          }
        })
    },

    isFlag(data, id) {
      data.forEach(res => {
        if (res.id === id) {
          Vue.set(res, 'iconB', true)
        } else {
          Vue.set(res, 'iconB', false)
        }
        if (res.children) {
          this.isFlag(res.children, id)
        }
      })
    },

    //线路资源点树节点点击事件
    handleNodeClick(node) {
      // console.log('选中树节点', node)
      this.currentNode = node
      let level = node.level
      let name = node.name
      let id = node.id
      let code = node.code
      this.isFlag(this.treeData, id)
      // this.treeData.forEach(res => {
      //   if (res.id === id) {
      //     Vue.set(res, 'iconB', true)
      //   } else {
      //     Vue.set(res, 'iconB', false)
      //   }
      // })
      //每次选择节点都先清空资源位
      // if (level !== 6) {
      //   this.list = []
      // }
      if (level === 2) {
        //线路
        this.checkedData.lineId = id
        this.checkedData.lineName = name
      } else if (level === 3) {
        //站点
        this.checkedData.stationId = id
        this.checkedData.stationName = name
        // this.initTreeStationMap(node)
      } else if (level === 4) {
        //层级
        this.checkedData.tierId = id
        this.checkedData.tierName = name
        this.checkedData.stationId = node.stationId
        this.stationMap = node
        // console.log('选中节点的层级id', this.tierId)
        this.showResourceByMapId(null)
      } else if (level === 5) {
        //子系统
        this.checkedData.subCode = code
        this.checkedData.subSystem = name
        this.checkedData.stationId = node.stationId
        this.checkedData.tierId = node.tierId
        // this.initTreeResource(node)
        this.list = JSON.parse(JSON.stringify(node.children))
        // console.log('资源点列表：', this.list)
      } else if (level === 6) {
        //资源点
        this.checkedData.resourceId = id
        this.activeChooseResourceBox(id)
        // console.log('资源点列表：', this.list)
      }
      this.iconNameListBottom.forEach(res => {
        if (res.id === this.clickItem.id) {
          if (
            res.value.substring(res.value.length - 1, res.value.length) == 4
          ) {
            res.value = res.value.substring(0, res.value.length - 1) + '3'
          }
        }
      })
    },
    //激活选中资源点位节点
    activeChooseResourceBox(id) {
      this.checkedData.resourceId = id
      this.delflag = false
      // console.log(this.checkedData.resourceId, '-------')
      this.list.forEach((res, index) => {
        if (res.id === id) {
          res.active = true
          // console.log('激活的资源点：', res.name, res.active, res.id, index)
        } else {
          res.active = false
        }
      })
      this.$forceUpdate()
      // console.log('资源点列表：', this.list)
    },
    //切换层级
    changeMap(map) {
      //console.log('选择的层级', map)
      this.currentNode = this.$refs.tree.getNode(map.id).data
      // console.log('当前要选中的节点', this.currentNode)
      //将选中的层级树节点设置为选中
      this.$refs.tree.setCurrentNode(this.currentNode)
      this.defaultExpandedKeys = [this.currentNode.id]
      this.isFlag(this.treeData, this.currentNode.id)

      // console.log('当前要选中的节点2', this.currentNode)
      this.checkedData.tierId = map.id
      this.checkedData.tierName = map.name
      let stationNode = this.$refs.tree.getNode(map.stationId).data
      // console.log('当前要选中的站点', stationNode)
      this.checkedData.stationId = stationNode.id
      this.checkedData.stationName = stationNode.name
      this.stationMap = map
      this.iconNameListBottom.forEach(res => {
        if (res.id === this.clickItem.id) {
          if (
            res.value.substring(res.value.length - 1, res.value.length) == 4
          ) {
            res.value = res.value.substring(0, res.value.length - 1) + '3'
          }
        }
      })
      this.showResourceByMapId(null)
    },
    //根据层级id展示当前层级所有的资源点
    showResourceByMapId(item) {
      let tierNode = this.$refs.tree.getNode(this.checkedData.tierId).data
      // console.log('当前要选中的层级节点', tierNode.children)
      this.list = []
      tierNode.children.forEach(subSystem => {
        subSystem.children.forEach(res => {
          if (item === null || (item != null && item.id === res.type)) {
            this.list.push(res)
          }
        })
      })
      // console.log(this.list, '++++++')
    },
    //根据子系统id展示子系统id所有的资源点
    showResourceByParentId(id) {
      let node = this.$refs.tree.getNode(id).data
      this.list = []
      node.children.forEach(e => {
        this.list.push(e)
      })
    },
    updateList(res) {
      this.$http({
        url: this.$http.adornUrl('/liResource/getTreeList'),
        method: 'post',
        data: {
          stationId: this.checkedData.sId,
          name: this.searchInput
        }
      })
        .then(data => {
          if (data && data.code === 0) {
            this.treeData = data.tree
            // if (!this.checkedData.sId) {
            // this.defaultExpandedKeys = [res.tierId]
            // this.isFlag(this.dataList, res.tierId)
            //设置选中的节点
            // this.$refs.tree.setChecked(this.treeData[0].children[0].id)

            // } else {
            //   this.treeData.forEach(e => {
            //     if (res.stationId === e.id) {
            //       e.children.forEach(el => {
            //         if (el.id === res.tierId) {
            //           el.children.forEach(element => {
            //             if (element.subCode === res.subCode) {
            //               subId = element.id
            //             }
            //           })
            //         }
            //       })
            //     }
            //   })
            // }
            // console.log('初始化线路树：', this.treeData)
            // console.log(res, '++++++++++')
          }
        })
        .then(() => {
          //console.log('初始化线路树：', this.treeData)
          //console.log(res, '++++++++++')

          var sysId = ''
          this.systemList.forEach(element => {
            if (res.subCode === element.value) {
              sysId = element.id
            }
          })

          var subId = ''
          this.treeData.forEach(e => {
            if (res.stationId === e.id) {
              e.children.forEach(el => {
                if (el.id === res.tierId) {
                  el.children.forEach(element => {
                    if (element.id === res.tierId + sysId) {
                      subId = element.id
                      Vue.set(element, 'iconB', true)
                      this.$refs.tree.setCurrentNode(element)
                    } else {
                      Vue.set(el, 'iconB', false)
                    }
                  })
                }
              })
            }
          })
          //console.log('subId', subId)
          this.initStation(res.stationId, res, subId)
          this.$nextTick(() => {
            this.defaultExpandedKeys = [subId]
            // this.isFlag(this.treeData, res.tierId)
            // this.ssId = res.tierId
            // console.log('层级id', this.ssId)
          })
        })
    },
    //保存当前页面上的资源点位置
    saveResourceList() {
      var flag = true
      //判断是否有无id的新增资源点
      this.list.forEach(res => {
        if (!res.id) {
          flag = false
          return false
        }
      })

      if (flag) {
        this.$http({
          url: this.$http.adornUrl(`/liResource/updateList`),
          method: 'post',
          data: this.list
        }).then(data => {
          // console.log(data)
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.initTree()
                this.changeEditable()
                this.checkedData.resourceId = ''
                this.delflag = true
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      } else {
        this.$confirm(`有新增资源点未填写信息，是否保存?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal: false
        })
          .then(() => {
            // console.log('当前页面资源点位置：', this.list)
            this.$http({
              url: this.$http.adornUrl(`/liResource/updateList`),
              method: 'post',
              data: this.list
            }).then(data => {
              // console.log(data)
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.initTree()
                    this.changeEditable()
                    this.checkedData.resourceId = ''
                    this.delflag = true
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          })
          .catch(() => {})
      }
    },
    // 详情
    queryDetail(id) {
      this.queryDetailVisible = true
      this.$nextTick(() => {
        this.$refs.queryDetail.init(id)
      })
    },
    // 新增 / 修改
    addOrUpdateHandle(id, x, y) {
      // console.log('addOrUpdateHandle:', id, x, y)
      this.addOrUpdateVisible = true
      this.list.forEach(res => {
        if (res.id === id) {
          this.resource = res
        }
      })
      // console.log('this.checkedData', this.checkedData)
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(
          id,
          x,
          y,
          JSON.parse(JSON.stringify(this.resource))
        )
      })
    },
    // 移动资源位坐标
    changeResourceLocation(id, x, y) {
      // console.log('changeResourceLocation:', id, x, y)
      this.list.forEach(res => {
        if (res.id === id) {
          // console.log('移动坐标1：', res.name, res.xpoint, res.ypoint)
          res.xpoint = x
          res.ypoint = y
          // console.log('移动坐标2：', res.name, res.xpoint, res.ypoint)
        }
      })
    },
    // 删除
    deleteHandle() {
      // console.log('dataListSelections:', this.dataListSelections)
      // var ids = this.checkedData.resourceId
      //   ? [this.checkedData.resourceId]
      //   : this.dataListSelections.map(item => {
      //     return item.id
      //   })
      var ids = [this.checkedData.resourceId]
      this.$confirm(`确认删除资源点?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl('/liResource/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(data => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.initTree()
                  this.checkedData.resourceId = ''
                  this.delflag = true
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
        .catch(() => {})
    },

    clickAdd() {
      // var box = document.getElementById('drag')
      // let box = this.$refs.drag
      // console.log(box)
      this.list.push(this.getNewBox())
      // console.log('this.list:', this.list)
    },
    changeEditable() {
      this.isDone = !this.isDone
      this.editable = !this.editable //保存按钮切换显示
      this.$forceUpdate()
      //设置是否启动拖动
      // if (!this.editable) {
      //   //关
      //   this.obj = 'pointer-events:none'
      // } else {
      //   //开
      //   this.obj = 'pointer-events:initial'
      // }
      // console.log(this.editable)
      // console.log(this.obj)
    },
    statusClick(item) {
      //icon状态切换
      if (!this.editable) {
        return
      }

      item.value = item.value + '2'
      this.typeList.forEach(res => {
        if (item.id !== res.id) {
          if (
            res.value.substring(res.value.length - 1, res.value.length) == 2
          ) {
            res.value = res.value.substring(0, res.value.length - 1)
          }
        }
      })
    },
    regionMousedown(e) {
      if (!this.editable) {
        return
      }
      if (e.srcElement.id == '') {
        return
      }
      // if (e.path) {
      //     if (
      //       e.path[0].attributes.name &&
      //       e.path[0].attributes.name.nodeValue != 'iconListNow'
      //     ) {
      //       return
      //     }
      // } else {

      // }

      this.typeList.forEach(res => {
        // if ((e.path && e.path[0].id !== res.id) || e.srcElement.id !== res.id) {
        if (e.srcElement.id !== res.id) {
          if (
            res.value.substring(res.value.length - 1, res.value.length) == 2
          ) {
            res.value = res.value.substring(0, res.value.length - 1)
          }
        } else {
          if (
            res.value.substring(res.value.length - 1, res.value.length) == 2
          ) {
            return
          }
          res.value = res.value + '2'
          this.spanDragData.name = res.value
          this.spanDragListNow = res
          this.mousemoveStatus = true
        }
      })
    },
    regionMousemove(e) {
      if (this.mousemoveStatus) {
        this.spanDragData.x = e.clientX - 24
        this.spanDragData.y = e.clientY - 106
        this.spanDragData.show = true
        //console.log(this.spanDragData)
        //console.log('x' + e.clientX)
        //console.log('y' + e.clientY)
      }
    },
    regionMouseup(e) {
      this.mousemoveStatus = false
      this.typeList.forEach(res => {
        if (res.value.substring(res.value.length - 1, res.value.length) == 2) {
          res.value = res.value.substring(0, res.value.length - 1)
        }
      })
      //console.log(this.spanDragListNow)
      if (e.clientX > 330 && e.clientY > 260) {
        this.list.push(
          this.getNewBox(
            this.spanDragListNow,
            this.spanDragData.x - 330,
            this.spanDragData.y - 180
          )
        )
      }
      this.spanDragData.x = 0
      this.spanDragData.y = 0
      this.spanDragData.show = false
      this.spanDragData.name = ''
    },
    iconClick(item) {
      this.iconNameListBottom.forEach(res => {
        if (res.id === item.id) {
          if (
            res.value.substring(res.value.length - 1, res.value.length) != 4
          ) {
            res.value = res.value.substring(0, res.value.length - 1) + '4'
          }
        } else {
          if (
            res.value.substring(res.value.length - 1, res.value.length) == 4
          ) {
            res.value = res.value.substring(0, res.value.length - 1) + '3'
          }
        }
      })
      this.showResourceByMapId(item)
      this.clickItem = item
    },
    initSubSystemDicList() {
      this.$http({
        url: this.$http.adornUrl('/sysDictionary/getSubSystemDicList'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(data => {
        if (data && data.code === 0) {
          this.systemList = data.list
        }
      })
    },
    initResourceTypeDicList() {
      this.$http({
        url: this.$http.adornUrl('/sysDictionary/getResourceTypeDicList'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(data => {
        if (data && data.code === 0) {
          this.typeList = JSON.parse(JSON.stringify(data.list))
          this.iconNameListBottom = JSON.parse(JSON.stringify(data.list))
          this.iconNameListBottom.forEach(res => {
            res.value += '3'
          })
        }
      })
    },
    iconMousedown(e) {
      e.width = Number(e.width) + 10
      console.log(e.width)
    }
  },

  directives: {
    //拖拽&&缩放指令
    drag: {
      bind: (el, binding) => {
        //console.log(el)
        //console.log('binding:', binding)
        // console.log(binding.value)
        //绑定默认样式
        el.style.zIndex = 9
        el.style.opacity = 1
        // el.style.backgroundColor = 'rgba(0,0,0,1)'
        //如果为编辑状态
        if (binding.value || binding.value === undefined) {
          //定义该元素的 top left width height
          let x, y, w, h
          //鼠标的起始和结束坐标
          let cx_start, cy_start, cx_end, cy_end;
          //鼠标双击弹出信息框
          (el.ondblclick = e => {
            // alert('新增/编辑信息弹出框')
            //console.log('el', el)
            // console.log('that', that)
            //编辑资源位信息
            that.addOrUpdateHandle(el.id, parseInt(x), parseInt(y))
          }),
            //判断鼠标样式
            (el.onmousemove = e => {
              //console.log('el-onmousemove', el)
              that.activeChooseResourceBox(el.id)
              //获取鼠标当前位置
              let cx_now = e.clientX
              let cy_now = e.clientY
              //获取div右下角相对浏览器的位置
              let {
                top: el_top,
                left: el_left
                // width: el_width,
                // height: el_height
              } = el.getBoundingClientRect()

              // let el_bottom_height = el_top + el_height;
              // let el_right_width = el_left + el_width;
              //判断鼠标是否在div下边界
              // let mouse_in_bottom =
              //   cy_now <= el_bottom_height + 5 && cy_now >= el_bottom_height - 5;
              //判断鼠标是否在div右边界
              // let mouse_in_right =
              //   cx_now <= el_right_width + 5 && cx_now >= el_right_width - 5;
              // if (mouse_in_bottom && mouse_in_right) {
              // el.style.cursor = "se-resize";
              // } else if (mouse_in_right) {
              // el.style.cursor = "e-resize";
              // } else if (mouse_in_bottom) {
              // el.style.cursor = "s-resize";
              // } else {
              el.style.cursor = 'move'
              // }
            })
          el.onmousedown = e => {
            //console.log('el-onmousedown', el)
            //div1   所有图标，去除选中颜色，当前选中给予选中颜色边框
            // var divs = document.getElementsByClassName('div1')
            // let boxs = this.$refs.drag
            // for (var i = 0; divs.length > i; i++) {
            // divs[i].style.border = '0'
            // }
            //当前选中给予选中颜色边框
            // el.style.border = '1px solid red'
            // console.log(divs)
            //border: 1px solid red;
            let mouse = el.style.cursor
            //更改默认样式
            // el.style.backgroundColor = 'rgba(0,0,0,.5)'
            el.style.opacity = 0.5
            el.style.zIndex = 99
            //对象解构赋值
            let {
              left: el_x,
              top: el_y,
              width: el_w,
              height: el_h
            } = window.getComputedStyle(el)
            // let { left: el_x, top: el_y } = window.getComputedStyle(el);
            x = el_x
            y = el_y
            w = el_w
            h = el_h
            // console.log(x, y, w, h)
            cx_start = e.clientX
            cy_start = e.clientY
            //绑定移动事件
            document.onmousemove = e => {
              cx_end = e.clientX
              cy_end = e.clientY
              //默认左下方向配置
              let x_move = cx_end - cx_start
              let y_move = cy_end - cy_start
              let direct = ['width', 'height']
              let pos = [w, h]
              let move = [x_move, y_move]
              let limit = 50
              //判断鼠标的类型进行对应的操作
              switch (mouse) {
                // case "e-resize":
                //   direct = ["width"];
                //   pos = [w];
                //   move = [x_move];
                //   break;
                // case "s-resize":
                //   direct = ["height"];
                //   pos = [h];
                //   move = [y_move];
                //   break;
                case 'move':
                  direct = ['left', 'top']
                  pos = [x, y]
                  limit = 0
                  break
              }
              handle_div(direct, pos, move, limit)
            }
            //取消移动事件
            document.onmouseup = e => {
              //还原默认样式
              el.style.zIndex = 9
              // el.style.backgroundColor = 'rgba(0,0,0,1)'
              el.style.opacity = 1
              document.onmousemove = null
              //移动结束后弹出修改弹窗
              // that.addOrUpdateHandle(el.id, parseInt(x), parseInt(y))
            }
            /**
             * 操作DOM位置和大小方法
             * @param direct 方向
             * @param pos 尺寸/坐标
             * @param move 拖动距离
             * @param limit 限定范围
             */
            function handle_div(direct, pos, move, limit) {
              that.changeResourceLocation(
                el.id,
                parseInt(pos[0]) + parseInt(move[0]),
                parseInt(pos[1]) + parseInt(move[1])
              )
              for (let i = 0; i < direct.length; i++) {
                let val = parseInt(pos[i]) + move[i]
                val = val <= limit ? limit : val
                el.style[direct[i]] = val + 'px'
              }
            }
          }
        } else {
          el.style.cursor = 'default'
          //console.log('el-default', el)
          //移除点击事件
          el.onmousedown = null
          el.onmousemove = null
        }
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.aa{
  transform: rotate(90deg);
}
.line_warp {
  // width: 300px;
  // height: 45px;
  float: left;
  display: flex;
  align-items: center;

  .point_left {
    width: 50px;
    height: 50px;
    transform: translateX(14px);
  }
  .point_right {
    width: 50px;
    height: 50px;
    transform: translateX(-14px);
  }
}

.dic_tree {
  background: #f4f4f4;
  font-size: 14px;
  transform: translateX(-6px);
  margin-top: 20px;
}
.dic_tree /deep/ .el-tree-node__content {
  padding-left: 0px !important;
}

.dic_tree /deep/ .el-tree-node {
  position: relative;
  padding-left: 16px;
}

.dic_tree /deep/ .el-tree-node__children {
  padding-left: 16px;
}

.dic_tree /deep/ .el-tree-node :last-child:before {
  height: 38px;
}

.dic_tree /deep/ .el-tree > .el-tree-node:before {
  border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

.dic_tree /deep/ .el-tree-node:before {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.dic_tree /deep/ .el-tree-node:after {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.dic_tree /deep/ .el-tree-node:before {
  border-left: 1px dashed #bfbfbf;
  bottom: 0px;
  height: 100%;
  top: -26px;
  width: 1px;
}

.dic_tree /deep/ .el-tree-node:after {
  border-top: 1px dashed #bfbfbf;
  height: 20px;
  top: 12px;
  width: 30px;
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

.tree-container {
  /* 树的parent，样式自定 */
}
.dic_tree /deep/ .el-tree-node__expand-icon.expanded {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
.dic_tree /deep/ .el-icon-caret-right:before {
  background: url("../../../assets/images/add.png");

  content: "";
  display: block;
  width: 18px;
  height: 18px;
  font-size: 18px;
  background-size: 18px;
}
.dic_tree
  /deep/
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url("../../../assets/images/sub.png");
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  font-size: 18px;
  background-size: 18px;
}

.dic_tree /deep/.el-tree-node__expand-icon.is-leaf::before {
  opacity: 0;
}
.dic_tree /deep/.is-leaf.el-tree-node__expand-icon.el-icon-caret-right {
  // margin-left: -15px !important;
}
</style>
<style >
.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content
  .custom-tree-node {
  background-color: #33b0f6 !important;
  color: aliceblue;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: transparent;
}
</style>

<style lang='scss' scoped>
.treeCard {
  .el-tree {
    overflow-y: scroll;
    height: 640px;
  }
}

.tree_house {
  width: 12px;
  height: 18px;
  display: inline-block;
  img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    // transform: translateY(-8px);
    transform: translateX(-40px);
  }
}
.tree_point {
  width: 12px;
  height: 18px;
  display: inline-block;
  img {
    width: 15px;
    height: 15px;
    vertical-align: middle;
    transform: translateY(-2px);
  }
}
.resource-container {
  width: 100%;
  height: 100%;
  position: relative;
  border: 0px solid black;
  overflow: auto;
  .span-box {
    height: 30px;
    // width: 30px;
    font-size: 12px;
    border-radius: 5px;
    /* border: 1px solid red; */
    position: absolute;
    // left: 0;
    // top: 0;
    .span-img {
      width: 100%;
      height: 100%;
      border-radius: 5px;
      background-size: 182%;
    }
  }
  .active {
    background-color: #fd949d;
    height: 40px;
    width: 40px;
  }
}

.tier-btn {
  .active-tier {
    background-color: #409eff;
    color: #ffffff;
  }
}
.monitor_point_left_top {
  height: 42px;
  background: #e1edf4;
  padding-left: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .monitor_point_left_topL {
    height: 40px;
    padding-top: 10px;
    float: left;
    div {
      height: 40px;
      float: left;
      padding: 0 10px 0 10px;
      line-height: 40px;
      cursor: pointer;
      font-family: Microsoft YaHei;
      font-size: 14px;
      span {
        color: #35aff8;
      }
    }
    div.on {
      background: #fff;
      border: 1px solid #c3c3c3;
      border-bottom: none;
      font-family: Microsoft YaHei;
      font-weight: 400;
    }
  }
  .monitor_point_left_topR {
    // float: right;
    margin-right: 20px;
    // margin-top: 10px;
    .el-input {
      width: 109px;
    }
    /deep/ .el-input--mini .el-icon-search {
      line-height: 28px;
      color: #35aff8;
      font-weight: bold;
    }
  }
}

.top_button {
  background: url(~@/assets/images/sysiconbg.png);
}
</style>
