<template>
  <el-select
    v-model="modelValue"
    filterable
    allow-create
    placeholder="请选择，可直接输入创建选项"
  >
    <el-option
      v-for="(item, index) in list"
      :key="item.DICTIONARIES_ID"
      :label="item.NAME"
      :value="item.DICTIONARIES_ID"
    >
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div>{{ item.NAME }}</div>
        <div>
          <el-icon @click.stop="fnDelete(index)">
            <circle-close />
          </el-icon>
        </div>
      </div>
    </el-option>
  </el-select>
</template>

<script setup>
import { CircleClose } from "@element-plus/icons-vue";
import { useVModel } from "@vueuse/core";

defineOptions({
  name: "LayoutSelectCreate",
});
const props = defineProps({
  modelValue: {
    type: String,
    required: true,
    default: "",
  },
  list: {
    type: Array,
    required: true,
    default: () => [],
  },
});
const emits = defineEmits(["update:modelValue", "delete-option"]);
const modelValue = useVModel(props, "modelValue", emits);
const fnDelete = (index) => {
  emits("delete-option", index);
};
</script>

<style scoped lang="scss"></style>
