<template>
  <div>
    <template v-if="data.children && data.children.type !== 'form'">
      <el-form-item label="对齐方式">
        <el-select
          v-model="data.children.align"
          placeholder="对齐方式"
          clearable
        >
          <el-option label="居左" value="left"></el-option>
          <el-option label="居中" value="center"></el-option>
          <el-option label="居右" value="right"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="头部对齐方式" label-width="110px">
        <el-select
          v-model="data.children.headerAlign"
          placeholder="对齐方式"
          clearable
        >
          <el-option label="居左" value="left"></el-option>
          <el-option label="居中" value="center"></el-option>
          <el-option label="居右" value="right"></el-option>
        </el-select>
      </el-form-item>
    </template>
    <template v-if="data.children">
      <el-form-item label="表单格式">
        <el-select
          v-model="data.children.type"
          placeholder="表单格式"
          clearable
        >
          <el-option label="表格" value=""></el-option>
          <el-option label="表单" value="form"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="序号" v-if="data.children.type == 'form'">
        <el-switch v-model="data.children.index"></el-switch>
      </el-form-item>
      <el-form-item label="添加按钮">
        <el-switch v-model="data.children.addBtn"></el-switch>
      </el-form-item>
      <el-form-item label="删除按钮">
        <el-switch v-model="data.children.delBtn"></el-switch>
      </el-form-item>
    </template>

    <el-form-item label="是否只读">
      <el-switch v-model="data.readonly"></el-switch>
    </el-form-item>
    <el-form-item label="是否禁用">
      <el-switch v-model="data.disabled"></el-switch>
    </el-form-item>
    <el-form-item label="是否可见">
      <el-switch v-model="data.display"></el-switch>
    </el-form-item>
    <div class=" el-form-item--small el-form--label-top" style="padding: 13px">
      <strong class="el-form-item__label" style="padding: 0">初始化数据：</strong>
      <div class="el-form-item__content">
        <draggable
          tag="ul"
          :list="data.dynamicData"
          :group="{ name: 'dynamic' }"
          ghost-class="ghost"
          handle=".drag-item"
        >
          <li v-for="(item, index) in data.dynamicData" :key="index">
            <i class="drag-item el-icon-s-operation"></i>
            <el-input
              style="margin-right: 5px"
              size="mini"
              clearable
              v-model="data.dynamicData[index][column.prop]"
              :placeholder="column.label"
              v-for="(column,columnIndex) in columns"
              :key="columnIndex"
            ></el-input>
            <el-button
              @click="handleRemoveFields(index)"
              circle
              plain
              type="danger"
              size="mini"
              icon="el-icon-minus"
              class="del-btn"
            ></el-button>
          </li>
        </draggable>
        <div style="margin-left: 22px">
          <el-button type="text" @click="handleAddFields">添加列 </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Draggable from "vuedraggable"
export default {
  name: "config-dynamic",
  props: {
    data: Object,
  },
  components: { Draggable },
  methods: {
    handleRemoveFields(index) {
      this.data.dynamicData.splice(index, 1)
    },
    handleAddFields() {
      if (!this.data.dynamicData) {
        this.$set(this.data, "dynamicData", [])
      }
      this.data.dynamicData.push({})
    },
  },

  computed: {
    columns() {
      return this.data.children.column
    },
  },
}
</script>
<style lang="scss" scoped>
ul > li {
  flex-wrap: wrap;
  padding: 0 20px;
  position: relative;
  .drag-item {
    position: absolute;
    left: 0;
    top: 10px;
    font-size: 16px;
    cursor: move;
    margin-right: 5px;
  }
  .del-btn {
    position: absolute;
    right: 0;
    top: 6px;
    padding: 4px;
    margin-left: 5px;
  }
  .el-input {
    width: 30%;
  }
}
</style>