<template>
  <el-select
    v-model="selectedValue"
    class="lm-select"
    :style="{ width }"
    :placeholder="placeholder"
    :popper-class="popperClass"
    :teleported="teleported"
    :fit-input-width="false"
  >
    <el-option
      v-for="option in options"
      :key="option.value"
      :label="option.label"
      :value="option.value"
    />
  </el-select>
</template>

<script setup lang="ts">
import { computed } from "vue";

type SelectValue = string | number;

export interface LmSelectOption {
  label: string;
  value: SelectValue;
}

const props = withDefaults(
  defineProps<{
    modelValue: SelectValue;
    options: LmSelectOption[];
    placeholder?: string;
    width?: string;
    popperClass?: string;
    teleported?: boolean;
  }>(),
  {
    placeholder: "请选择",
    width: "132px",
    popperClass: "lm-select-popper",
    teleported: true,
  },
);

const emit = defineEmits<{
  "update:modelValue": [value: SelectValue];
}>();

const selectedValue = computed({
  get: () => props.modelValue,
  set: (value: SelectValue) => emit("update:modelValue", value),
});
</script>

<style scoped lang="scss">
.lm-select {
  line-height: 1;
}

:deep(.el-select__wrapper) {
  min-height: 46px;
  padding: 0 14px 0 20px;
  border-radius: 24px;
  background: #fff;
  box-shadow:
    0 0 0 1px #edf0f5 inset,
    0 4px 12px rgba(20, 40, 80, 0.06);
}

:deep(.el-select__wrapper.is-focused),
:deep(.el-select__wrapper.is-hovering) {
  box-shadow:
    0 0 0 1px #edf0f5 inset,
    0 4px 12px rgba(20, 40, 80, 0.06);
}

:deep(.el-select__selection) {
  min-width: 0;
}

:deep(.el-select__selected-item) {
  color: #303133;
  font-size: 22px;
  line-height: 1;
}

:deep(.el-select__placeholder) {
  color: #303133;
}

:deep(.el-select__suffix) {
  margin-left: 8px;
}

:deep(.el-select__caret) {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: #666;
  font-size: 20px;
}

:global(.lm-select-popper.el-popper) {
  border: 1px solid #edf0f5;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(20, 40, 80, 0.12);
}

:global(.lm-select-popper .el-select-dropdown__item) {
  height: 42px;
  color: #303133;
  font-size: 20px;
  line-height: 42px;
}

:global(.lm-select-popper .el-select-dropdown__item.is-selected) {
  color: #2f80ed;
}
</style>
