<template>
  <div class="ipub-drag-area">
    <div v-for="item in dragData"
         :key="item.key||item.name">
      <div class="ipub-p1">
        {{item.name}} ({{item.children&&item.children.length||0}})
      </div>
      <div :style="`height:${height}px`"
           class="ipub-drag-area-content">
        <draggable class="ipub-drag-area-content-drag"
                   v-model="item.children"
                   animation="300"
                   chosenClass="chosenClass"
                   @add="handleAdd"
                   group="dragArea"
                   :sort="false">
          <transition-group>
            <div v-for="val in item.children"
                 :key="val[optionKey] || val"
                 class="mar-b-10"
                 style="margin-right: 10px;cursor: move;display:inline-block">
              <ipub-label>
                {{val[optionTitle]}}
              </ipub-label>
            </div>
          </transition-group>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'IpubDragArea',
  components: { draggable },
  props: {
    value: {
      type: Array,
      default () {
        return []
      }
    },
    optionTitle: {
      type: String,
      default: 'name'
    },
    optionKey: {
      type: String,
      default: 'id'
    },
    height: {
      type: Number,
      default: 500
    }
  },
  watch: {
    value: {
      handler (val) {
        this.dragData = JSON.parse(JSON.stringify(val))
      },
      immediate: true
    }
  },
  data () {
    return {
      dragData: {},
    }
  },
  mounted () {
  },
  methods: {
    handleAdd () {
      this.$emit('input', this.dragData)
      this.$emit('change', this.dragData)
    }
  }
}
</script>

<style lang="scss" scoped>
.ipub-drag-area {
  display: flex;
  > div {
    flex: 1;
    margin-right: 20px;
    &:last-child {
      margin-right: 0;
    }
  }
  &-content {
    border: 1px solid $border_color;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: scroll;
    &-drag {
      width: 100%;
      height: 100%;
      > span {
        display: inline-block;
        width: 100%;
        height: 100%;
      }
    }
  }
  .chosenClass {
    > .ipub-label {
      background: $link_color;
      color: #fff;
    }
  }
}
</style>
