<template>
  <div :class="['th-cata-node', 'inline', {selected: selected}]" @click.stop="clickNode" :style="`box-shadow:${dropStatus?'0px 0px 12px #97eaf9;':'none'}`">
    <div :class="`th-icon th-icon-${icon}`" :draggable="draggable" @dragstart="dragStart" @dragend="dragend" @dragover="allowDrop" @dragleave="DropLeave" @drop.stop.prevent="drop" >
    </div>
    <div class="label" :title="label" @click.stop="" >
      <input type="text" v-model="label2" v-focus="activeRename" @blur="labelChange" :disabled="!activeRename">
    </div>
    <div class="actions">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    activeRename: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    selected: {
      type: Boolean,
      default: false
    },
    draggable: {
      type: Boolean,
      default: false
    },
    dropable: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    clickNode(e) {
      this.$emit('on-click', e)
    },
    labelChange(e) {
      this.$emit('on-label-change', this.label2)
    },
    allowDrop(e) {
      if (this.dropable) {
        e.preventDefault()
        this.dropStatus=true
      }
    },
    DropLeave(e){
      if (this.dropable) {
        e.preventDefault()
        this.dropStatus=false
      }
    },
    dragStart(e) {
      if (!this.draggable) {
        return
      }
      let dragTarget=e.target
      let action=dragTarget.querySelector(".actions")
      action.style.visibility="hidden"
      this.$emit('on-drag', e)
    },
    dragend(e){
      let dragTarget=e.target
      let action=dragTarget.querySelector(".actions")
      action.style.visibility="visible"
    },
    drop(e) {
      if (!this.dropable) {
        return
      }
      this.dropStatus=false
      this.$emit('on-drop', e)
    }
  },
  data() {
    let label2 = this.label // 复制出来便于用双向绑定
    return {
      label2,
      dropStatus:false
    }
  },
  watch: {
    label() {
      this.label2 = this.label
    }
  }
}
  
</script>