<!--
 * @Author: wjc
 * @Date: 2021-09-15 16:03:17
 * @LastEditors: wjc
 * @LastEditTime: 2021-09-17 15:12:04
 * @Description:
-->
<template>
  <div class="element-ui-panel">
    <el-scrollbar>
      <div class="components-list">
        <div v-for="(item, listIndex) in elementComponents" :key="listIndex">
          <div class="components-title">
            <svg-icon icon-class="component" />
            {{ item.title }}
          </div>
          <draggable
            class="components-draggable"
            :list="item.list"
            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
            :clone="cloneComponent"
            draggable=".components-item"
            :sort="false"
            @end="onEnd"
          >
            <div
              v-for="(element, index) in item.list"
              :key="index"
              class="components-item"
              @click="addComponent(element)"
            >
              <div class="components-body">
                <svg-icon :icon-class="element.__config__.tagIcon" />
                {{ element.__config__.label }}
              </div>
            </div>
          </draggable>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

import {
  exportDefault, beautifierConf, isNumberStr, titleCase, deepClone, isObjectObject
} from '@/utils/index'
import {
  inputComponents, selectComponents, layoutComponents, formConf
} from '@/components/generator/config'

let tempActiveData

export default {
  name: 'ElementUiPanel',
  components: {
    draggable
  },
  props: {
  },
  data() {
    return {
      elementComponents: [
        {
          title: '输入型组件',
          list: inputComponents
        },
        {
          title: '选择型组件',
          list: selectComponents
        },
        {
          title: '布局型组件',
          list: layoutComponents
        }
      ]
    }
  },
  methods: {
    addComponent(item) {
      // const clone = this.cloneComponent(item)
      // this.fetchData(clone)
      // this.drawingList.push(clone)
      // this.activeFormItem(clone)
    },
    cloneComponent(origin) {
      const clone = deepClone(origin)
      const config = clone.__config__
      // config.span = this.formConf.span // 生成代码时，会根据span做精简判断
      // this.createIdAndKey(clone)
      clone.placeholder !== undefined && (clone.placeholder += config.label)
      tempActiveData = clone
      return tempActiveData
    },
    onEnd(obj) {
      // if (obj.from !== obj.to) {
      //   this.fetchData(tempActiveData)
      //   this.activeData = tempActiveData
      //   this.activeId = this.idGlobal
      // }
    }
  }
}
</script>

<style lang="less">
  .element-ui-panel {
    height: calc(100vh - 60px);
    overflow: hidden;
    .components-list {
      padding: 8px;
      box-sizing: border-box;
      height: 100%;
      .components-draggable {
        padding-bottom: 20px;
        .components-item {
          display: inline-block;
          width: 48%;
          margin: 1%;
          transition: transform 0ms !important;
          .components-body {
            padding: 8px 10px;
            background: @selectedColor;
            font-size: 12px;
            cursor: move;
            border: 1px dashed @selectedColor;
            border-radius: 3px;
            .svg-icon{
              color: #777;
              font-size: 15px;
            }
            &:hover {
              border: 1px dashed #787be8;
              color: #787be8;
              .svg-icon {
                color: #787be8;
              }
            }
          }
        }
      }
      .components-title{
        font-size: 14px;
        color: #222;
        margin: 6px 2px;
        .svg-icon{
          color: #666;
          font-size: 18px;
        }
      }
    }
  }
</style>
