<template>
  <ui-space layout="vertical">
    <ui-select
      v-model="value"
      :options="options"
      :reserve-options="reserveOptions"
      clearable
      borderless
      filterable></ui-select>
    <ui-select
      v-model="multipleValue"
      :options="options"
      :reserve-options="reserveOptions"
      multiple
      show-arrow
      clearable
      filterable></ui-select>
    <ui-button @click="handleAdd">
      Add（{{ n }}）
    </ui-button>
  </ui-space>
</template>

<script>
import { Select, Button, Space } from "amumu-ui"
export default {
  components: {
    "ui-select": Select,
    "ui-button": Button,
    "ui-space": Space,
  },
  data() {
    return {
      n: 5,
      value: "3",
      multipleValue: ["1", "3", "5"],
      options: [
        { label: "选项1", value: "1" },
        { label: "选项2", value: "2" },
        { label: "选项5", value: "5" },
      ],
      reserveOptions: [
        { label: "选项3", value: "3" },
        { label: "选项4", value: "4" },
      ],
    }
  },
  methods: {
    handleAdd() {
      this.n++
      this.value = String(this.n)
      this.multipleValue.push(String(this.n))
      this.reserveOptions.push({
        label: `选项${this.n}`,
        value: String(this.n),
      })
    },
  },
}
</script>
