<template>
  <div class="mch-task-tree">
    <TreeItem :layerItem="group" type="group" :compareMode="compareMode" :isReadOnly="isReadOnly" v-for="group in treeList" :key="group.id" @on-collapse="collapseChange" @on-check="checkChange" @on-import-overlay="importOverlay" @on-import-annotation="importAnnotation" @on-export-annotation="exportAnnotation" @on-delete-all="deleteAll">
      <TreeItem :layerItem="layer" :selectLayerId="selectLayerId" :compareMode="compareMode" :disabled="!group.visible" :isReadOnly="isReadOnly" v-for="layer in group.items" :key="layer.id" @on-select="selectLayer" @on-check="checkChange" @on-delete="deleteItem" @annotation_active="annotationHover" @zoom-annotation="zoomAnnotation"/>
    </TreeItem>
    <div :class="['h60', { beforedrop: isDragOver }]" @drop.stop.prevent="moveToBottom" @dragover="allowDrop" @dragleave="dragLeave"></div>
  </div>
</template>

<script>
import TreeItem from './TreeItem.vue'

export default {
  props: {
    treeList: {
      type: Array,
      default: []
    },
    selectLayerId: {
      type: String,
      default: ''
    },
    compareMode: {
      type: Boolean,
      default: false
    },
    isReadOnly: {
      type: Boolean,
      default: false
    }
  },
  components: {
    TreeItem
  },
  methods: {
    allowDrop (e) {
      this.isDragOver = true
      e.preventDefault()
    },
    dragLeave () {
      this.isDragOver = false
    },
    moveToBottom (e) {
      
    },
    moveLayer (params) {
      
    },
    annotationHover(data) {
      this.$emit('annotation_active', data)
    },
    zoomAnnotation(data) {
      this.$emit('zoom-annotation', data)
    },
    selectLayer(layerItem) {
      this.$emit('on-select', layerItem)
    },
    collapseChange(layerItem) {
      this.$emit('on-collapse', layerItem)
    },
    checkChange(options) {
      this.$emit('on-check', options)
    },
    deleteItem(item) {
      this.$emit('on-delete', item)
    },
    deleteAll(item) {
      this.$emit('on-delete-all', item)
    },
    importAnnotation(item) {
      this.$emit('on-import-annotation', item)
    },
    exportAnnotation(item) {
      this.$emit('on-export-annotation', item)
    },
    importOverlay(item) {
      this.$emit('on-import-overlay', item)
    }
  },
  data () {
    return {
      isDragOver: false
    }
  }
}
</script>