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

    <a-form layout="vertical" class="relative-container">
      <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"
          :list="value.options"
          :options="dragOption"
          :group="'option'"
        >
          <template #item="{ element, index }">
            <div class="option-item" :key="index">
              <a-input
                v-model="value.options[index]"
                size="default"
                placeholder="请设置选项值"
                class="input2"
              />
              <a-button
                type="danger"
                size="default"
                class="btn"
                @click="removeOption(index)"
              >
                x
              </a-button>
            </div>
          </template>
        </draggable>
      </a-form-item>
    </a-form>

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

<script>
import draggable from 'vuedraggable';

export default {
  name: 'SelectInputConfig',
  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;
  padding: 0;
  height: auto;
  line-height: 1;
}

.option-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.input2 {
  width: 200px;
  margin-right: 5px;
  height: 32px;
}
</style>
