<template>
  <el-input v-model="selectedValue" @blur="handleChange($event.target.value)"></el-input>
</template>

<script>
import { defineComponent, ref, watch } from 'vue';
import 'element-plus/dist/index.css';
import { ElInput } from 'element-plus';

export default defineComponent({
  name: 'YLSelect',
  components: {
    ElInput
  },
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    },
    options: {
      type: Array,
      default: () => []
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {
    const selectedValue = ref(props.modelValue);
    watch(
      () => props.modelValue,
      (newVal) => {
        selectedValue.value = newVal;
      }
    );

    const handleChange = (event) => {
      emit('update:modelValue', event);
      emit('change', event);
    };

    const format = (html) => {
      const div = document.createElement('div');
      div.innerHTML = html;
      return div.innerText;
    };
    return {
      selectedValue,
      handleChange,
      format
    };
  }
});
</script>

<style scoped lang="scss">
.yl-select-wrapper {
  position: relative;
  display: inline-block;
  font-size: 16px; /* 增加字体大小 */
  line-height: 1.5; /* 增加行高 */
  //margin-botton: 10px;
}
</style>
