<!--
 * @Author: wjc
 * @Date: 2021-09-16 10:55:40
 * @LastEditors: wjc
 * @LastEditTime: 2021-09-24 14:20:14
 * @Description:
-->
<template>
  <div class="editor-area">
    <draggable
      :list="editorList"
      :animation="340"
      class="drag-board"
      group="componentsGroup"
    >
      <draggable-item
        v-for="(item, index) in editorList"
        :key="item.renderKey"
        :drawing-list="editorList"
        :current-item="item"
        :index="index"
        :active-id="activeDragId"
        :form-conf="formConf"
        @activeItem="activeFormItem"
        @deleteItem="drawingItemDelete"
      />
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

import DraggableItem from '../../components/DraggableItem'

export default {
  name: 'EditorArea',
  components: {
    draggable,
    DraggableItem
  },
  props: {
    activeId: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      formConf: {
        formRef: 'elForm',
        inline: false,
        formModel: 'formData',
        size: 'medium',
        labelPosition: 'right',
        labelWidth: 100,
        formRules: 'rules',
        gutter: 15,
        disabled: false,
        span: 24,
        formBtns: true
      },
      activeDragId: 1,
      activeData: [],
      editorList: []
    }
  },
  watch: {
    activeId(n) {
      this.activeDragId = n
    }
  },
  methods: {
    // 当前选中的组件
    activeFormItem(currentItem) {
      this.activeData = currentItem
      this.activeDragId = currentItem.__config__.formId
      this.$emit('active-item', this.activeData, this.activeDragId)
    },
    drawingItemDelete(index, list) {
      list.splice(index, 1)
      this.$nextTick(() => {
        const len = this.editorList.length
        if (len) {
          this.activeFormItem(this.editorList[len - 1])
        }
      })
    }
  }
}
</script>

<style lang='less'>
  .editor-area {
    background: #fff;
    width: 100%;
    height: 100%;
    .drag-board {
      height: 500px;
      .w-table {
        padding: 0 20px 20px;
      }
      .active-from-item {
        background: @selectedColor;
        border-radius: 6px;
        border: 1px dashed #ccc;
        border-radius: 3px;
        & > .drawing-item-copy, & > .drawing-item-delete{
          display: initial;
        }
      }
      .drawing-form-item {
        position: relative;
        cursor: move;
        box-sizing: border-box;
        padding: 0 2px;
        margin: 4px 20px;
        border: 1px dashed #ccc;
        .drag-wrapper {
          padding: 8px;
          min-height: 80px;
        }
      }
    .drawing-item {
      padding: 4px;
    }
    .drawing-form-item {
      &:hover {
        border: 1px dashed @lighterBlue;
        & > .drawing-item-copy, & > .drawing-item-delete{
          display: initial;
        }
      }
      .drawing-item {
        &:hover {
          background: @selectedColor;
          border-radius: 6px;
          .el-form-item__content > .drawing-item-copy, .el-form-item__content > .drawing-item-delete{
            display: initial;
          }
        }
      }
    }
    .drawing-form-item{
      & > .drawing-item-copy,
      & > .drawing-item-delete,
      .el-form-item__content > .drawing-item-copy,
      .el-form-item__content > .drawing-item-delete {
        display: none;
        position: absolute;
        top: -15px;
        width: 22px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        border-radius: 50%;
        font-size: 12px;
        border: 1px solid;
        cursor: pointer;
        z-index: 1;
      }
      .drawing-item-copy{
        right: 30px;
        border-color: @lighterBlue;
        color: @lighterBlue;
        background: #fff;
        &:hover{
          background: @lighterBlue;
          color: #fff;
        }
      }
      .drawing-item-delete{
        right: 0px;
        border-color: #F56C6C;
        color: #F56C6C;
        background: #fff;
        &:hover{
          background: #F56C6C;
          color: #fff;
        }
      }
    }
  }
}
</style>
