<template>
  <div>
    <div ref="netRack" class="net-rack">
      <div class="cont" id="canvas_drag_parent">
        <net-rack-map ref="map"
                      class="main-map"
                      :map-height="canvasHeight"
                      :map-width="canvasWidth"
                      :node="node"
                      :line="line"
                      :line-value="lineValue"
                      :node-value="nodeValue"
                      :high-light-lines="highLightLines"
                      :high-light-nodes="highLightNodes"
                      show-line-animation
                      :scale-value="scaleValue"
                      :show-ruler="showRuler"
                      :node-dragable="nodeDragable"
                      :interval="interval"
                      :map-dragable="mapDragable"
                      :range="range"
                      :range-key="rangeKey"
                      :is-range="isRange"
                      :node-icons-svg="nodeIconsSvg"
                      :node-icons-name="nodeIconsName"
                      @down-shape="downShape"
                      @hover-shape="hoverShape"
                      @out-shape="outShape"
                      @click-shape="clickShape"
                      @dblclick-shape="dblclickShape"
                      @node-drag="nodeDrag"
                      @node-drag-end="nodeDragEnd"
        ></net-rack-map>
      </div>
    </div>
  </div>
</template>
<script>
import NetRackMap from './NetRackMap'
import elementResizeDetectorMaker from 'element-resize-detector'

export default {
  name: 'vue-net-rack',
  data () {
    return {
      width: 1920,
      height: 920,
      parentBox: 'map-content'
    }
  },
  props: {
    rangeKey: {
      type: String,
      default: ''
    },
    isRange: {
      type: Boolean,
      default: false
    },
    canvasWidth: {
      type: Number,
      default: 1920
    },
    canvasHeight: {
      type: Number,
      default: 920
    },
    // 是否220kv网架图
    isArea: {
      type: Boolean,
      default: false
    },
    isTools: {
      type: Boolean,
      default: false
    },
    lineValue: { // 接口获取的线数据
      type: Array,
      default: () => []
    },
    nodeValue: { // 接口获取的节点数据
      type: Array,
      default: () => []
    },
    node: {
      type: Object,
      default: () => {
        return {}
      }
    },
    line: {
      type: Object,
      default: () => {
        return {}
      }
    },
    range: {
      type: Object,
      default: () => {
        return {
          min: 0,
          max: 0
        }
      }
    },
    scale: {
      type: Boolean,
      default: false
    },
    selectTime: {
      type: String,
      default: ''
    },
    highLightLines: {
      type: Array,
      default: () => []
    },
    highLightNodes: {
      type: Array,
      default: () => []
    },
    areaData500: {
      type: Object,
      default: () => {
      }
    },
    nodeIconsSvg: {
      type: Object,
      default: () => {
        return {}
      }
    },
    nodeIconsName: {
      type: Array,
      default: () => []
    },
    // 标尺
    showRuler: {
      type: Boolean,
      default: false
    },
    // 标尺
    nodeDragable: {
      type: Boolean,
      default: false
    },
    // 标尺间距
    interval: {
      type: Number,
      default: 1
    },
    // 是否可整个拖动
    mapDragable: {
      type: Boolean,
      default: true
    },
    // 缩放
    scaleValue: {
      type: Number,
      default: 50
    }
  },
  // computed: {
  //   range () {
  //     console.log(this.nodeValue)
  //     return {
  //       min: 0,
  //       max: 0
  //     }
  //   }
  // },
  methods: {
    hoverShape (tooltipInfo, ev) {
      this.$emit('hover-node', tooltipInfo, ev)
    },
    outShape () {
      this.$emit('out-node')
    },
    clickShape (tooltipInfo, ev) {
      this.$emit('click-shape', tooltipInfo, ev)
    },
    dblclickShape (tooltipInfo) {
      this.$emit('dbclick-shape', tooltipInfo)
    },
    handleResize () {
      this.width = this.$refs.netRack.clientWidth
      this.height = this.$refs.netRack.clientHeight
      this.$emit('net-rack-resize', this.width)
    },
    downShape (tooltipInfo, ev) {
      this.$emit('down-shape', tooltipInfo, ev)
    },
    nodeDrag (pos, name) {
      this.$emit('node-drag', pos, name)
    },
    nodeDragEnd (pos, name) {
      this.$emit('node-drag-end', pos, name)
    }
  },
  mounted () {
    this.observer = elementResizeDetectorMaker()
    this.observer.listenTo(this.$refs.netRack, this.handleResize)
  },
  components: {
    NetRackMap
  }
}
</script>
<style scoped lang="less">
.cont {
  position: relative;
  // min-height: 920px;
}

.main-map {
  width: 100%;
}

.net-rack {
  position: relative;
  text-align: left;
  user-select: none;
}
</style>
