<template>
  <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.dynamicshSet"
        :group="{ name: 'dynamicsh' }"
        ghost-class="ghost"
        handle=".drag-item"
        v-if="data.dynamicshSet && data.dynamicshSet.length > 0"
      >
        <li v-for="(item, index) in data.dynamicshSet" :key="index">
          <i
            class="drag-item el-icon-s-operation"
            style="font-size: 16px; margin: 0 5px; cursor: move"
          ></i>
          <el-input
            :style="{
              'margin-right': '5px',
            }"
            size="mini"
            clearable
            v-model="item.value"
            placeholder="值"
          ></el-input>
          <el-input
            size="mini"
            clearable
            v-model="item.target"
            placeholder="字段"
          ></el-input>
          <el-button
            @click="handleRemoveFields(index)"
            circle
            plain
            type="danger"
            size="mini"
            icon="el-icon-minus"
            style="padding: 4px; margin-left: 5px"
          ></el-button>
        </li>
      </draggable>
      <div style="margin-left: 22px">
        <el-button type="text" @click="handleAddFields">添加列 </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Draggable from "vuedraggable"

export default {
  props: ["data"],
  components: { Draggable },
  data() {
    return {}
  },
  methods: {
    handleRemoveFields(index) {
      this.data.dynamicshSet.splice(index, 1)
    },
    handleAddFields() {
      if (!this.data.dynamicshSet) {
        this.$set(this.data, "dynamicshSet", [])
      }
      this.data.dynamicshSet.push({ value: ``, target: `` })
    },
  },
}
</script>