<!--
 * @Author: wjc
 * @Date: 2021-09-15 16:03:17
 * @LastEditors: wjc
 * @LastEditTime: 2021-09-23 15:55:57
 * @Description:
-->
<template>
  <div class="wisdom-ui-panel">
    <el-scrollbar>
      <div class="components-list">
        <div v-for="(item, listIndex) in wcComponents" :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 {
  wFormComponents, wLayoutComponents
} from '@/components/generator/wisdomUiComp'

let tempActiveData

export default {
  name: 'WisdomUiPanel',
  components: {
    draggable
  },
  props: {
  },
  data() {
    return {
      activeId: 1,
      wcComponents: [
        {
          title: '表单型组件',
          list: wFormComponents
        },
        {
          title: '布局型组件',
          list: wLayoutComponents
        }
      ]
    }
  },
  methods: {
    // 快捷操作，点击组件时，让编辑区添加该组件
    addComponent(item) {
      // const clone = this.cloneComponent(item)
      // this.fetchData(clone)
      // this.drawingList.push(clone)
      // this.activeFormItem(clone)
    },
    // 拖动组件后，给组件数据添加额外属性
    createIdAndKey(item) {
      const config = item.__config__
      config.formId = ++this.activeId
      config.renderKey = `${config.formId}${+new Date()}` // 改变renderKey后可以实现强制更新组件
      if (config.layout === 'colFormItem') {
        item.__vModel__ = `field${this.activeId}`
      } else if (config.layout === 'form') {
        config.componentName = `form${this.activeId}`
        !Array.isArray(config.children) && (config.children = [])
        delete config.label // rowFormItem无需配置label属性
      }
      if (Array.isArray(config.children)) {
        config.children = config.children.map(childItem => this.createIdAndKey(childItem))
      }
      return item
    },
    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.activeId = new Date().getTime()
        this.$emit('drag-end', tempActiveData, this.activeId)
      }
    }
  }
}
</script>

<style lang="less">
  .wisdom-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>
