<template>
  <!-- 采用组件传值的方式 -->
  <div style="width: 100%">
<!--    <el-select :disabled="allowSelect" :multiple="props.ifMultiple" v-model="props.value" clearable :style=" `width:${width}%;` " @change="change">-->
<!--      &lt;!&ndash;      <el-option v-for="(option,i) in optionList" :key="i" :value="option[optionVal?optionVal:'value']"&ndash;&gt;-->
<!--      &lt;!&ndash;                 :label="option[optionLab?optionLab:'label']"/>&ndash;&gt;-->
<!--      <el-option v-for="(option,i) in optionList" :key="i" :value="option.dicCode" :disabled="option.disabled"-->
<!--                 :label="option.dicName"/>-->
<!--    </el-select>-->
    {{text}}
  </div>
</template>

<script setup>
import {
  ref,
  getCurrentInstance,
  onMounted,
  watchEffect,
  computed
} from 'vue'

const {
  proxy
} = getCurrentInstance()
const emit = defineEmits(['change'])

const text = ref('')
const props = defineProps({
  optionList: {
    type: Array,
    default: () => []
  },
  width: {
    type: Number,
    default: () => '100'
  },
  value: {
    type: String,
    default: () => ''
  },
  ifMultiple: {
    type: Boolean,
    default: () => false
  },
  allowSelect: {
    type: Boolean,
    default: () => false
  },
})
const val = computed(() => {
  text.value = props.value
  return props.value
})



const change = (val) => {

  emit('change', val)
}

watchEffect(()=> {
  const x1 = props.value
  const list = props.optionList


  for (var i =0; i< list.length; i ++){

    if (list[i].dicCode == x1){
      text.value = list[i].dicName
    }
  }

})
</script>

<style>
</style>
