<!--
 * @Description: 折叠组件
 * @Author: kcz
 * @Date: 2020-01-13 00:37:54
 * @LastEditors: kcz
 * @LastEditTime: 2020-03-28 11:32:39
 -->
<template>
  <draggable
    tag="ul"
    :value="list"
    id="col"
    v-bind="{
      group: { name: 'form-draggable', pull: 'clone', put: false },
      sort: false,
      animation: 180,
      ghostClass: 'moving'
    }"
    @start="handleStart($event, list)"
    :move="onMove"
  >
    <li
      v-for="(val, index) in list"
      :key="index"
      @dragstart="$emit('generateKey', list, index)"
      @click="$emit('handleListPush', val)"
    >
      <svg v-if="val.icon" class="icon" aria-hidden="true">
        <use :xlink:href="`#${val.icon}`"></use>
      </svg>
      {{ val.label }}
    </li>
  </draggable>
</template>
<script>
import draggable from "vuedraggable";
export default {
  name: "collapseItem",
  props: ["list"],
  components: {
    draggable
  },
  data(){
    return{
      iTime:null
    }
  },
  methods: {
    handleStart(e, list) {
      e.stopPropagation();
      e.preventDefault();
      this.$emit("start", list[e.oldIndex].type);
    },
    onMove({ relatedContext, draggedContext }){
      let that = this;
      if(relatedContext.component.$attrs.id !== 'sCol'){

      }else{
        if(draggedContext.element.type == 'columnPanel_2' || draggedContext.element.type == 'columnPanel_3'){
          clearTimeout(this.iTime);
          this.iTime = setTimeout(function () {
            that.$message.warning('布局控件内不能放入布局控件')
          }, 100);
          return false
        }
        if(relatedContext.list.length >= 1){
          clearTimeout(this.iTime);
          this.iTime = setTimeout(function () {
            that.$message.warning('只允许放入一个控件')
          }, 100);
        return false
      }



      }
      

    } 
  }
};
</script>
