<script setup lang="ts">
import { defineEmits, defineProps, watch } from 'vue';

interface Props {
  options: Api.SystemManage.CodesOption[]; // 根据需要调整类型
}

interface Emits {
  (e: 'search'): void;
  (e: 'updateLabel', label: string): void;
}
const props = defineProps<Props>();
const emit = defineEmits<Emits>();
const model = defineModel<Api.SystemManage.CodesSearchParams>('model', { required: true });

watch(
  () => model.value.ITEM_ID,
  newVal => {
    const selectedOption = props.options.find(option => option.value === newVal);
    emit('updateLabel', selectedOption ? selectedOption.label : ' ');
  }
);

function updata() {
  search();
}
async function search() {
  emit('search');
}
</script>

<template>
  <NCard :bordered="false" size="small" class="card-wrapper">
    <NCollapse>
      <NSelect
        v-model:value="model.ITEM_ID"
        placeholder="请选择编码状态"
        :options="props.options"
        clearable
        filterable
        @update:value="updata"
      />
    </NCollapse>
  </NCard>
</template>

<style scoped></style>
