<template>
    <el-select @change="change" filterable>
        <el-option-group
          v-for="group in options"
          :key="group.label"
          :label="group.label"
        >
          <el-option
            v-for="item in group.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
      </el-option-group>
    </el-select>
</template>
<script setup>
import { list12337HandleResult } from '@/api/system/dict'


const emit = defineEmits(['select']);
const options = ref([])

onMounted(() => {
  list12337HandleResult().then(data => {
    options.value = data
  })  
})

function change(value) {
  let result = {};
  if (value) {
    for(const item of options.value) {
      const obj = item.options.find(option => option.value === value);
      if (obj) {
        result = {
          text: obj.text,
          value: obj.value,
          group: item.label
        }
        break;
      }
    }
  }
  emit('select', result)
}
</script>
<style lang="scss" scoped>

</style>