<template>
  <div>
    <div class="layer-item flex-between" :class="[['layer-item', {group:type==='group'}, {disabled}, {selected}, {dragover}]]" :draggable="true" @dragstart="dragStart" @drop.stop.prevent="drop" @dragover="allowDrop" @dragleave="dragLeave" @mouseenter="mouseEnter" @mouseleave="mouseLeave" @click.stop="selectLayer">
      <div class="prefix" >
        <Icon class="icon" :type="`${layerItem.collapsed ? 'ios-arrow-forward' : 'ios-arrow-down'}`" size="16" @click.stop="groupExpand" v-if="type==='group'"/>
        <Checkbox :model-value="layerItem.visible" :disabled="disabled" @on-change="layerCheckedChange" @click.stop></Checkbox>
        <Icon class="icon" :custom="`iconfont ${getIcon()}`" size="16"/>
        <label :title="layerItem.name">{{layerItem.name}}</label>
      </div>
      <div class="actions">
        <!-- 对比模式不能进行标注的增删操作 -->
        <!-- 标注的操作按钮 -->
        <div v-if="isAnnotation && !compareMode">
          <Icon class="cursor" custom="iconfont icon-fullscreen" size="20" @click.stop="zoomToExtent"/>
          <Icon class="cursor" custom="iconfont icon-delete" size="20" @click.stop="deleteItem" style="margin-left: 5px;"/>
        </div>
        <!-- 标注父节点的操作按钮 -->
        <div v-if="layerItem.type === 'annotation' && !compareMode">
          <!-- <Icon class="cursor" title="导入标注" type="md-add" size="20" @click.stop="importAnnotation" v-if="!isReadOnly"/> -->
          <Icon class="cursor" title="导出标注" type="md-cloud-download" size="20" @click.stop="exportAnnotation"/>
          <Icon class="cursor" title="删除所有标注" custom="iconfont icon-delete" size="20" @click.stop="deleteAll" style="margin-left: 5px;"/>
        </div>
        <!-- 覆盖物图层的操作按钮 -->
        <div v-if="layerItem.group==='overlay' && !compareMode">
          <Icon class="cursor" custom="iconfont icon-delete" size="20" @click.stop="deleteItem"/>
        </div>
        <!-- 覆盖物父节点的操作按钮 -->
        <div v-if="layerItem.type==='overlay' && !compareMode">
          <Icon class="cursor" title="导入覆盖物" type="md-add" size="20" @click.stop="importOverlay" v-if="!isReadOnly"/>
          <Icon class="cursor" title="删除所有覆盖物" custom="iconfont icon-delete" size="20" @click.stop="deleteAll" style="margin-left: 5px;"/>
        </div>
        <slot :name="layerItem.type"></slot>
      </div>
    </div>
    <div class="sub-layer" v-if="type === 'group' && !layerItem.collapsed">
      <slot></slot>
    </div>
  </div>
  
</template>

<script>
import {layerIcons} from '@mapcatch/util'
import _ from 'lodash'

export default {
  props: {
    layerItem: {
      type: Object,
      default: ({})
    },
    selectLayerId: {
      type: String,
      default: ''
    },
    compareMode: {
      type: Boolean,
      default: false
    },
    isReadOnly: {
      type: Boolean,
      default: false
    },
    type: String,
    disabled: Boolean
  },
  methods: {
    getIcon () {
      return layerIcons[this.layerItem.type]
    },
    selectLayer() {
      if (this.compareMode) { // 对比模式没有选中操作
        return
      }
      this.$emit('on-select', _.cloneDeep(this.layerItem))
    },
    groupExpand() {
      this.$emit('on-collapse', _.cloneDeep(this.layerItem))
    },
    mouseEnter () {
      if (this.disabled || this.type === 'group') {
        return
      }
      this.$emit('annotation_active', this.layerItem)
    },
    mouseLeave () {
      if (this.disabled || this.type === 'group') {
        return
      }
      this.$emit('annotation_active', null)
    },
    dragStart (e) {
      if (this.disabled || this.type === 'group') {
        return
      }
      e.dataTransfer.setData('dragId', this.layerItem.id)
    },
    allowDrop (e) {
      if (this.disabled || this.type === 'group') {
        return
      }
      this.dragover = true
      e.preventDefault()
    },
    dragLeave () {
      if (this.disabled || this.type === 'group') {
        return
      }
      this.dragover = false
    },
    drop (e) {
      if (this.disabled || this.type === 'group') {
        return
      }
      this.dragover = false
      const dragId = e.dataTransfer.getData('dragId')
      if (dragId === this.layerItem.id) {
        return
      }
      //emits('on-move', { sourceId: dragId, targetItem: this.layerItem })
    },
    layerCheckedChange(checked) {
      this.$emit('on-check', {layerItem: _.cloneDeep(this.layerItem), checked, isGroup: this.type === 'group'})
    },
    zoomToExtent() {
      this.$emit('zoom-annotation', this.layerItem)
    },
    deleteItem() {
      this.$emit('on-delete', _.cloneDeep(this.layerItem))
    },
    deleteAll() {
      this.$emit('on-delete-all', _.cloneDeep(this.layerItem))
    },
    importAnnotation() {
      this.$emit('on-import-annotation', this.layerItem)
    },
    exportAnnotation() {
      this.$emit('on-export-annotation', this.layerItem)
    },
    importOverlay() {
      this.$emit('on-import-overlay', this.layerItem)
    }
  },
  data() {
    return {
      dragover: false
    }
  },
  computed: {
    selected() {
      return this.selectLayerId === this.layerItem.id
    },
    isAnnotation() {
      return ['point', 'line', 'polygon'].includes(this.layerItem.type)
    }
  }
}
</script>
