<template>
  <el-select v-model="value" @change="selectionChange">
    <el-option v-for="item in props.data"
               :label="item[props.name]"
               :value="item[props.code]"
               :key="item[props.code]">
      <span v-if="props.styles" :style="item[props.styles]">{{ item[props.name] }} </span>
    </el-option>
  </el-select>
</template>

<script setup name='EmrSelection'>
const props = defineProps({
  modelValue: {
    type: String
  },
  data: {
    type: Array
  },
  code: {
    type: String,
    default: 'code'
  },
  name: {
    type: String,
    default: 'name'
  },
  styles: {
    type: String,
  },
  execute: {
    type: String,
  }
})


let value = $ref('')
const emit = defineEmits(['change', 'update:modelValue'])

const selectionChange = (val) => {
  for (let a = 0, len = props.data.length; a < len; a++) {
    let item = props.data[a];
    if (item[props.code] === val) {
      emit('update:modelValue', val)
      emit('change', props.execute, val, item)
      return
    }
  }


}

watch(() => props.modelValue, () => {
  value = props.modelValue
}, {deep: true, immediate: true})
</script>

<style scoped>

</style>