<template>
  <div class="ipub-tree-item ">
    <div :class="['ipub-tree-item__title ipub-p3 relative', border?'ipub-tree-item__title--border':'']"
         @click="openChildren(!showChildren)"
         @click.stop>
      <font style="font-size:16px">
        <ipub-icon v-if="item.children && item.children.length"
                   :class="['mar-l-10 link-color rotate',showChildren?'':'rotate-270']"
                   type="iconArrow" />
      </font>
      <div class="ipub-tree-item__title__label">
        <div v-if="draggable && deep && deep===currentDeep"
             class="ipub-draggable-icon">
          <ipub-icon type="iconOrder1" />
        </div>
        <slot>
          {{item[label]}}
        </slot>
      </div>
      <div class="right-option ipub-tree-item__title__action"
           v-if="actions"
           @click.stop>
        <slot name="actions">
          <ipub-icon v-if="!deep || (deep && deep>currentDeep)"
                     type="iconAdd"
                     @click="add" />
          <ipub-icon v-else
                     class="disabled-icon"
                     type="iconAdd" />
          <ipub-icon v-if="['OTHER', 'SYSTEM_EDIT', 'CUSTOMIZE'].includes(item.type)"
                     type="iconEdit"
                     @click="edit" />
          <ipub-icon v-else
                     type="iconEdit"
                     class="disabled-icon" />
          <ipub-icon v-if="['OTHER', 'CUSTOMIZE'].includes(item.type)"
                     type="iconDelete"
                     @click="del" />
          <ipub-icon v-else
                     type="iconDelete"
                     class="disabled-icon" />
        </slot>
      </div>
    </div>
    <div class="ipub-tree-item__content">
      <div v-show="showChildren && item.children && item.children.length"
           class="ipub-tree-item__children">
        <draggable v-if="draggable && deep && deep===currentDeep+1"
                   v-model="dragData"
                   @update="handleDrag"
                   handle=".ipub-draggable-icon">
          <div v-for="val in item.children"
               :key="val.id || val.name">
            <ipub-tree-item :deep="deep"
                            :border="border"
                            :actions="actions"
                            :currentDeep="currentDeep+1"
                            :item="val" />
          </div>
        </draggable>
        <template v-else>
          <div v-for="val in item.children"
               :key="val.id || val.name">
            <ipub-tree-item :deep="deep"
                            :border="border"
                            :actions="actions"
                            :currentDeep="currentDeep+1"
                            :item="val" />
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import IpubIcon from '../../icon'
import draggable from 'vuedraggable'
export default {
  name: 'IpubTreeItem',
  components: {
    IpubIcon, draggable
  },
  props: {
    item: {
      type: Object,
      default () {
        return {}
      },
    },
    label: {
      type: String,
      default: 'name'
    },
    deep: {
      type: Number,
      default: 0
    },
    currentDeep: {
      type: Number,
      default: 1
    },
    draggable: {
      type: Boolean,
      default: true
    },
    border: Boolean,
    actions: Boolean
  },
  data () {
    return {
      showChildren: true,
      parent: '',
      dragData: []
    }
  },
  watch: {
    item: {
      handler (val) {
        this.dragData = JSON.parse(JSON.stringify(val.children))
      },
      immediate: true
    }
  },
  mounted () {
    this.parent = this.findTree(this.$parent)
  },
  methods: {
    openChildren (val) {
      this.showChildren = val
    },
    add () {
      this.parent.add(this.item)
    },
    edit () {
      this.parent.edit(this.item)
    },
    del () {
      this.parent.del(this.item)
    },
    handleDrag () {
      this.$emit('drag', this.dragData)
    },
    findTree (v) {
      if (v.tree) {
        return v
      }
      return this.findTree(v.$parent)
    }
  }
}
</script>

<style lang="scss">
.ipub-tree-item {
  &__title {
    background: $content_color;
    line-height: 20px;
    padding: 10px;
    border-radius: 4px;
    transition: 0.3s all;
    margin-bottom: 10px;
    cursor: pointer;
    &:hover {
      @include ipub-shadow;
    }
    &--border {
      border: 1px solid $border_color;
    }
    &__label {
      display: inline-block;
      margin-left: 10px;
    }
    &__action {
      font-size: 14px;
      line-height: 40px;
      font-weight: 200;
      .ipub-icon {
        padding: 0 16px;
        border-right: 1px solid $border_color;
        cursor: pointer;
        &:last-child {
          border-right: none;
        }
      }
    }
  }
  &__children {
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid $line_color;
  }
}
</style>
