<script>
import basics from './components'
import draggable from 'vuedraggable'
// import uuid from 'uuid'

export default {
  data() {
    return {
      basics,
      groupLeft: {
        name: 'itxst',
        pull: 'clone',
        put: false
      },
      componentList: [],
      groupRight: {
        name: 'itxst',
        pull: false,
        put: true
      },
      attrs: {
        label: '',
        regs: []
      }
    }
  },
  components: { draggable },
  methods: {
    handleAdd(e) {
      // console.log(uuid)
      const newIndex = e.newIndex
      // 深拷贝
      const newCard = JSON.parse(JSON.stringify(this.componentList[newIndex]))
      // newCard.id = uuid()
      newCard.orderId = this.cardId
      this.cardId = this.cardId + 1
      this.$set(this.componentList, newIndex, newCard)
    }
  }
}
</script>

<template>
  <div class="div-form">
    <div class="form-header">
      <h1>{{ $route.meta.title }}</h1>
      <div class="header-btn">
        <el-button icon="el-icon-delete" type="text">清空</el-button>
        <el-button icon="el-icon-view" type="text">预览</el-button>
        <el-button icon="el-icon-check" type="text">保存</el-button>
      </div>
    </div>
    <div class="form-content">
      <div class="components">
        <ul>
          <el-row :gutter="20">
            <draggable
              tag="ul"
              class="cardDrag-list-wrap"
              v-model="basics"
              :group="groupLeft"
              animation="300"
            >

              <el-col v-for="(it,i) in basics" :key="i" :span="8">
                <li>
                  <img :src="it.image" alt="">
                  <span>{{ it.name }}</span>
                </li>
              </el-col>
            </draggable>
          </el-row>

        </ul>
      </div>
      <div class="preview">
        <draggable
          tag="ul"
          class="cardDrag-list-wrap"
          v-model="componentList"
          :group="groupRight"
          animation="300"
          @add="handleAdd"
        >
          <li
            class="cardDrag-list"
            v-for="item in componentList"
            :key="item.id"
          >
             2
          </li>
        </draggable>

      </div>
      <div class="attrs">
        <el-divider>基础信息</el-divider>
        <el-form size="small" :model="attrs">
          <el-form-item prop="label" label="标签">
            <el-input v-model="attrs['label']" placeholder="请输入标签"></el-input>
          </el-form-item>
          <el-form-item prop="default" label="默认值">
            <el-input v-model="attrs['default']" placeholder="请输入默认值"></el-input>
          </el-form-item>
          <el-form-item prop="field" label="字段名称">
            <el-input v-model="attrs['field']" placeholder="请输入字段名称"></el-input>
          </el-form-item>
          <el-form-item prop="placeholder" label="输入提示">
            <el-input v-model="attrs['placeholder']" placeholder="请输入输入提示"></el-input>
          </el-form-item>
          <el-form-item prop="regs" label="正则校验">
            <el-button @click="attrs['regs'].push({reg:''})" type="primary" size="mini">添加正则校验</el-button>
            <ul class="regs">
              <li v-for="(it,i) in attrs['regs']" :key="i">
                <el-input v-model="it['reg']" placeholder="请输入正则"></el-input>
                <el-button @click="attrs['regs'].splice(i,1)" type="danger" size="mini"
                           icon="el-icon-delete"></el-button>
              </li>
            </ul>
          </el-form-item>
          <el-form-item prop="max" label="最大长度">
            <el-input v-model="attrs['max']" placeholder="请输入最大长度"></el-input>
          </el-form-item>
          <el-form-item prop="required" label="是否必填">
            <el-switch v-model="attrs['required']"></el-switch>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.div-form {
  width: 100%;
  height: 100%;
  background-color: white;
  padding: 5px 0;
  display: flex;
  flex-direction: column;

  .form-content {
    display: flex;
    justify-content: space-between;
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;

    .attrs {
      padding: 10px;
      box-shadow: -3px 0 6px rgba(48, 65, 86, .35000000000000003);
      background: #fff;
      width: 370px;

      .regs {
        display: flex;
        flex-direction: column;

        li {
          display: flex;
          margin-bottom: 5px;

          .el-button {
            margin-left: 10px;
          }
        }
      }
    }

    .components {
      width: 260px;
      height: 100%;
      box-shadow: 1px 0 6px 3px rgba(48, 65, 86, .35000000000000003);
      background: #fff;
      padding: 0 15px;

      ul {
        display: flex;
        flex-wrap: wrap;
        margin-top: 15px;

        li {
          cursor: pointer;
          background: #f9f9f9;
          border-radius: 4px;
          border: 1px solid #ebebeb;
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 3px;
          margin-bottom: 15px;

          &:hover {
            border: 1px dashed #409eff;
          }

          img {
            width: auto;
            height: 45px;
            transition: .15s ease-in-out;
          }

          span {
            font-size: 11px;
          }
        }
      }
    }
  }

  .form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ececec;
    padding: 0 15px;

    .header-btn {
      .el-button {
        margin-left: 15px;
      }
    }

    h1 {
      font-size: 22px;
      font-weight: normal;
    }
  }
}
</style>
