<template>
  <div class="item-list">
    <div class="item-list-group" v-for="i in list" :key="i.key">
      <span><Icon type="md-crop" size="16" /> {{i.name}}</span>
      <draggable
        :move="onMove"
        :list="i.value"
        tag="ul"
        ghost-class="ghost"
        :group="{ name: 'form', pull: 'clone', put: false }"
        :clone="clone">
          <li
            v-for="item in i.value"
            :key="item.type"
            @click="add(item)">
            <Icon :type="item.icon" />
            {{item.label}}
          </li>
      </draggable>
    </div>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
import { formItemMixins } from '../../mixins'
export default {
  name: 'ItemList',
  components: {
    draggable,
  },
  mixins: [ formItemMixins ],
  props: {
    clone: Function,
    add: Function,
  },
  computed: {
    list() {
      return [
        { name: '输入型组件', value: this.inputItems, key: 'inputItems' },
        { name: '选择型组件', value: this.selectItems, key: 'selectItems' },
        { name: '布局型组件', value: this.layoutItems, key: 'layoutItems' },
      ]
    },
  },
  methods: {
    onMove(e) {
      const flag = e.to.tagName !== 'UL' //控制左侧 不可被 停留
      const flagRow = e.draggedContext.element.type === 'Row' && e.to.className.includes('row')//row 再次移动到row 中
      return flag && !flagRow
    },
  },
}
</script>
<style lang="scss" scoped>
.item-list{
  &-group{
    margin-bottom: 20px;
    >span{
      display: inline-block;
      font-size: 14px;
      color: #222;
      margin-bottom: 5px;
      padding-left: 5px;
    }
    >ul{
      list-style: none;
      >li{
        display: inline-block;
        width: 48%;
        margin: 1%;
        padding: 8px 10px;
        background: #f6f7ff;
        font-size: 12px;
        cursor: move;
        border: 1px dashed #f6f7ff;
        border-radius: 3px;
        &:hover{
          border: 1px dashed #787be8;
          color: #787be8
        }
        /deep/ .ivu-icon {
          float: left;
          margin: 1px 5px 0 0;
          font-size: 15px;
        }
      }
    }
  }
}
</style>