<template>
  <div class="item-list">
    <div class="item-list-group">
      <draggable
        :move="onMove"
        :list="list"
        tag="ul"
        ghost-class="ghost"
        :group="{ name: 'form', pull: 'clone', put: false }">
          <li
            v-for="item in list"
            :key="item.name"
            @click="add(item)"
            :class="[disableList.includes(item.name)?'disable':'']">
            {{item.title.content}}
          </li>
      </draggable>
    </div>
    <div class="add-row" @click="addRow">新增行容器</div>
</div>
</template>
<script>
import draggable from 'vuedraggable'
import { formItemMixins } from '../../mixins'
import { traverRows } from '@/lib/utils'
export default {
  name: 'SubItem',
  components: {
    draggable,
  },
  mixins: [ formItemMixins ],
  props: {
    list: Array,
    formData: Object,
  },
  data() {
    return {
    }
  },
  computed: {
    disableList() {
      return traverRows(this.formData.schema).map(v => v.name)
    },
  },
  methods: {
    // 控制左侧可拖拽 不可停靠   disable 不可复制
    onMove(e) {
      return e.to.tagName !== 'UL' && !this.disableList.includes(e.draggedContext.element.name)
    },
    add(item) {
      if (!this.disableList.includes(item.name)) {
        this.formData.schema.push(item)
      }
    },
    addRow() {
      const id = (new Date).getTime()
      this.formData.schema.push({
        id,
        name: `TqFieldTq${id}`,
        defaultValue: null,
        layout: 24,
        title: {
          content: '行容器',
        },
        form: {
          type: 'Row',
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.item-list{
  &-group{
    margin-bottom: 20px;
    >ul{
      list-style: none;
      >li{
        display: inline-block;
        width: 100%;
        margin: 1%;
        padding: 8px 10px;
        background: #f6f7ff;
        font-size: 12px;
        cursor: move;
        border: 1px dashed #f6f7ff;
        border-radius: 3px;
        text-align: center;
        font-size: 14px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
        &:hover{
          border: 1px dashed #787be8;
          color: #787be8
        }
        &.disable{
          background: #f8f8f8;
          border: none;
          color:#515a6e
        }
      }
    }
  }
}
.add-row{
  position: absolute;
  width: 90%;
  margin: 1%;
  padding: 8px 10px;
  bottom: 10px;
  background: #f6f7ff;
  font-size: 12px;
  cursor: pointer;
  border: 1px dashed #f6f7ff;
  border-radius: 3px;
  text-align: center;
  font-size: 14px;
  &:hover{
    border: 1px dashed #787be8;
    color: #787be8
  }
}
</style>