<template>
  <el-collapse v-model="componentGroup">
    <template v-for="devComponent in devComponents">
      <el-collapse-item :name="devComponent.title">
        <template slot="title">
          <span class="dev-collapse-title">{{ devComponent.title }}</span>
        </template>
        <div class="dev-panel-item">
          <draggable
            v-model="devComponent.list"
            :options="{group:{name: 'dragArea',pull:'clone', put: false},sort: false}"
            animation="300"
            @end="endComp"
            @add="addComp"
            @choose="chooseEvent"
            @clone="cloneFn"
          >
            <div
              v-for="item in devComponent.list"
              :key="item.type"
              class="dev-comp-item"
              :data-type="item.type"
            >
              <i :class="item.icon" />&nbsp;{{ item.title }}
            </div>
          </draggable>
        </div>

      </el-collapse-item>
    </template>
  </el-collapse>
</template>

<script>
import devComponents from './../dev/devConfig'
import draggable from 'vuedraggable'

export default {
  name: 'CustomComponents',
  components: {
    draggable
  },
  data() {
    return {
      devComponents: devComponents,
      componentGroup: []
    }
  },
  created() {
    for (var i = 0; i < devComponents.length; i++) {
      this.componentGroup.push(devComponents[i].title)
    }
  },
  methods: {
    // 左边往右边拖动时的事件
    chooseEvent(e) {
      // console.log(e)
    },
    addComp(e) {
      // console.log(e)
    },
    endComp(e) {
      // console.log(this.mainJson);
    },
    cloneFn(e) {
      // console.log("clone");
      return false
    },
    // move回调方法
    onMove(e, originalEvent) {
      return true
    }
  }
}
</script>

<style scoped>
    .dev-comp-item {
        padding: 5px 8px;
        background: #f6f7ff;
        font-size: 12px;
        cursor: move;
        border: 1px dashed #f6f7ff;
        border-radius: 3px;
        width: 44%;
        margin-left: 4%;
        float: left;
    }

    .dev-comp-item:hover {
        border: 1px dashed #787be8;
        color: #787be8;
    }

    .dev-panel-item {
        width: 100%;
        padding: 0px 0px 20px 0px;
    }

    .dev-collapse-title {
        font-weight: bold;
        font-size: 13px;
        padding: 0px 8px;
    }
</style>
