<template>
  <div>
    <a-form-item label="提示文字">
      <a-input
        v-model="value.placeholder"
        size="small"
        placeholder="请设置提示语"
      />
    </a-form-item>

    <a-form-item label="选项设置" class="options">
      <div class="options-header">
        <a-button type="link" size="small" class="blue-button" @click="addOption">
          新增选项
        </a-button>
      </div>
      <draggable
        class="drag"
        v-model="value.options"
        :options="dragOption"
        :group="'option'"
      >
        <div
          v-for="(option, index) in value.options"
          :key="index"
          class="option-item"
        >
          <a-input
            v-model="value.options[index]"
            size="small"
            placeholder="请设置选项值"
            allow-clear
            class="input2"
            style="width: 200px"
          />
          <a-button
            type="danger"
            size="small"
            class="btn"
            @click="removeOption(index)"
          >
            x
          </a-button>
        </div>
      </draggable>
    </a-form-item>

    <a-form-item label="选项展开">
      <a-switch v-model="value.expanding" />
    </a-form-item>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  name: 'MultipleSelectConfig',
  components: {
    draggable,
  },
  props: {
    value: {
      type: Object,
      default: () => ({
        placeholder: '',
        options: [],
        expanding: false,
      }),
    },
  },
  data() {
    return {
      dragOption: {
        animation: 300,
        sort: true,
      },
    };
  },
  methods: {
    addOption() {
      this.value.options.push('新选项');
    },
    removeOption(index) {
      this.value.options.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.options-header {
  position: absolute;
  top: -35px;
  right: 0;
  margin: 10px;
}
.blue-button {
  color: #1890ff;
}
.option-item {
  margin-bottom: 5px;
}
.input2 {
  height: 32px;
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>
