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

const attrs = {
  label: '',
  default: '',
  regs: [],
  options: [
    {
      label: '选择1',
      value: '1'
    },
    {
      label: '选择2',
      value: '2'
    },
    {
      label: '选择3',
      value: '3'
    }
  ]
}
export default {
  data() {
    return {
      basics,
      groupLeft: {
        name: 'father',
        pull: 'clone',
        put: false
      },
      componentList: [],
      groupRight: {
        name: 'father',
        pull: false,
        put: true
      },
      selectId: null,
      oldAttrs: attrs,
      attrs: attrs
    }
  },
  components: { draggable },
  watch: {
    attrs: {
      handler() {
        if (!this.selectId) return
        const index = this.componentList.findIndex(el => el.id === this.selectId)
        console.log(index)
        this.$set(this.componentList[index], 'attrs', JSON.parse(JSON.stringify(this.attrs)))
        console.log(this.componentList)
      },
      deep: true
    }
  },
  methods: {
    cloneItem(li) {
      return JSON.parse(JSON.stringify(li))
    },
    handleStart(li) {
      console.log(li)
    },
    selectItem(li, id) {
      console.log(id, 111)
      this.selectId = id
      this.attrs = li.attrs
    },
    handleAdd(e) {
      let item = JSON.parse(JSON.stringify(this.componentList[e.newIndex]))
      item = {
        ...item,
        ...{
          id: uuid.v4(),
          attrs: JSON.parse(JSON.stringify(this.oldAttrs))
        }

      }
      this.selectId = item.id
      this.$set(this.componentList, e.newIndex, item)
      this.attrs = item.attrs
    }
  }
}
</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-check" type="text">保存</el-button>
      </div>
    </div>
    <div class="form-content">
      <div class="components">
        <ul>
          <el-row :gutter="20">
            <draggable
              tag="ul"
              :sort="false"
              class="cardDrag-list-wrap"
              v-model="basics"
              :group="groupLeft"
              :clone="cloneItem"
              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">
        <el-form size="small">
          <draggable
            class="cardDrag-list-wrap"
            v-model="componentList"
            :group="groupRight"
            animation="300"
            @start="handleStart"
            @add="handleAdd"
          >
            <el-form-item
              class="cardDrag-list"
              :class="{'select-li':item.id===selectId}"
              :label="item.attrs?item.attrs.label:''"
              v-for="item in componentList"
              :key="item.id"
            >

              <div @click.stop="selectItem(item,item.id)" :class="item.type" class="component-li">
                <el-input v-model="item.attrs['default']" style="width: 100%;" :placeholder="item.attrs.placeholder" clearable
                          v-if="item.type==='input'"></el-input>
                <el-input v-model="item.attrs['default']" style="width: 100%;" :placeholder="item.attrs.placeholder" clearable type="textarea"
                          v-if="item.type==='textarea'"></el-input>
                <el-select v-model="item.attrs['default']" style="width: 100%;" :placeholder="item.attrs.placeholder" clearable filterable
                           v-if="item.type==='select'">
                  <el-option :label="it.label" :value="it.value" :key="i"
                             v-for="(it,i) in item.attrs.options"></el-option>
                </el-select>
                <el-checkbox-group v-model="item.attrs['default']" v-if="item.type==='checkGroup'">
                  <el-checkbox :label="it.value"  :key="i" v-for="(it,i) in item.attrs.options">{{ it.label }}
                  </el-checkbox>
                </el-checkbox-group>
                <el-radio-group v-model="item.attrs['default']" v-if="item.type==='radioGroup'">
                  <el-radio :label="it.label" :name="it.value" :key="i" v-for="(it,i) in item.attrs.options"></el-radio>
                </el-radio-group>
                <el-date-picker v-model="item.attrs['default']" style="width: 100%;" :placeholder="item.attrs.placeholder" :type="item.type"
                                v-if="item.type.includes('date')"></el-date-picker>
                <el-switch v-model="item.attrs['default']" v-if="item.type==='switch'"></el-switch>
                <el-cascader v-model="item.attrs['default']" style="width: 100%;" filterable :placeholder="item.attrs.placeholder"
                             v-if="item.type==='cascader'" :options="item.options"></el-cascader>

              </div>
            </el-form-item>
          </draggable>
        </el-form>
      </div>
      <div class="attrs" v-if="selectId">
        <el-divider>基础信息</el-divider>
        <el-form label-width="90px" label-position="top" 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="正则校验">
            <div class="flex-column">
              <el-button style="width: 100px;margin-bottom: 10px" @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>
            </div>

          </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: 284px;
      height: 100%;
      box-shadow: 1px 0 6px 3px rgba(48, 65, 86, .35000000000000003);
      background: #fff;

      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;
    }
  }
}

.cardDrag-list-wrap {
  margin: 20px;
}

::v-deep .el-form-item__content {
  display: flex;
  align-items: center;

  .el-icon-rank {
    font-weight: bold;
    font-size: 16px;
    color: rgb(21, 101, 192);
  }
}

.component-li {
  flex: 1;
  flex-shrink: 0;

}

.preview, .cardDrag-list-wrap {
  flex: 1;
  flex-shrink: 0;
  overflow: hidden;

  .el-form {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .el-form-item {
      margin-bottom: 10px !important;
      padding: 0 10px;
      cursor: pointer;
    }

    .cardDrag-list-wrap {
      height: 100%;
    }
  }

  .component-li {
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
}

.select-li {
  border: 2px dashed rgb(21, 101, 192);

}

.flex-column {
  display: flex;
  flex-direction: column;
}
</style>
