<template>
  <el-select
    v-model="selectedValue"
    class="yl-select-wrapper mobilefont"
    popper-class="yl-select"
    :placeholder="placeholder"
    @change="handleChange"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    >
      <span style="float: left" v-html="format(item.label)"></span>
    </el-option>
    <template #label="{ label }">
      <!--      {{ option }}-->
      <div class="yl-select-label" v-html="format(label)"></div>
    </template>

    <!--    <template #suffix-icon></template>-->
  </el-select>
</template>

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

export default defineComponent({
  name: 'YLSelect',
  components: {
    ElSelect,
    ElOption
  },
  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;
  padding: 2px 0;
  border-color: transparent;
  border-radius: 12px;
  background: #fafbfc;
  outline-color: transparent;
  font-size: 16px; /* 增加字体大小 */
  line-height: 1.5; /* 增加行高 */
}

.yl-select-label {
  //width: 80%;
  //overflow: hidden;
  //text-overflow: ellipsis;
  //white-space: nowrap;
}
</style>

<style lang="scss">
@import '@/assets/css/theme';
</style>
