<!-- 创作下拉选择组件，统一模型和业务选项的选择样式与分组展示。 -->
<script setup lang="ts">
import { computed } from "vue";

export interface CreativeSelectOption {
  label: string;
  value: string;
  group?: string;
  disabled?: boolean;
}

type SelectValue = string | string[];

const props = withDefaults(
  defineProps<{
    modelValue: SelectValue;
    options: CreativeSelectOption[];
    placeholder?: string;
    multiple?: boolean;
    filterable?: boolean;
    clearable?: boolean;
    disabled?: boolean;
    placement?: "top-start" | "bottom-start";
  }>(),
  {
    placeholder: "请选择",
    multiple: false,
    filterable: false,
    clearable: false,
    disabled: false,
    placement: "bottom-start",
  },
);

const emit = defineEmits<{ "update:modelValue": [value: SelectValue] }>();
const groups = computed(() => {
  const result = new Map<string, CreativeSelectOption[]>();
  for (const option of props.options) {
    const label = option.group || "";
    if (!result.has(label)) result.set(label, []);
    result.get(label)!.push(option);
  }
  return [...result.entries()].map(([label, options]) => ({ label, options }));
});
const grouped = computed(() => groups.value.some((group) => group.label));
</script>

<template>
  <el-select
    class="creative-select"
    :model-value="modelValue"
    :placeholder="placeholder"
    :multiple="multiple"
    :collapse-tags="multiple"
    :collapse-tags-tooltip="multiple"
    :filterable="filterable"
    :clearable="clearable"
    :disabled="disabled"
    :placement="placement"
    :teleported="true"
    popper-class="creative-select-popper"
    @update:model-value="emit('update:modelValue', $event as SelectValue)"
  >
    <template v-if="grouped">
      <el-option-group
        v-for="group in groups"
        :key="group.label"
        :label="group.label"
      >
        <el-option
          v-for="option in group.options"
          :key="option.value"
          :label="option.label"
          :value="option.value"
          :disabled="option.disabled"
        />
      </el-option-group>
    </template>
    <template v-else>
      <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
        :disabled="option.disabled"
      />
    </template>
  </el-select>
</template>

<style scoped lang="scss">
.creative-select {
  width: 100%;
}
.creative-select:deep(.el-select__wrapper) {
  min-height: 38px;
  padding: 0 12px;
  background: var(--web-surface-soft);
  border: 1px solid var(--web-line-strong);
  border-radius: 7px;
  box-shadow: none;
  transition:
    border-color 0.16s,
    background-color 0.16s;
}
.creative-select:deep(.el-select__wrapper:hover) {
  background: var(--web-surface);
  border-color: var(--web-line-emphasis);
}
.creative-select:deep(.el-select__wrapper.is-focused) {
  border-color: var(--web-timeline-focus-line);
  box-shadow: 0 0 0 2px var(--web-dialog-focus-ring);
}
.creative-select:deep(.el-select__selected-item) {
  color: var(--web-text);
}
.creative-select:deep(.el-select__placeholder) {
  color: var(--web-creative-muted);
}
.creative-select:deep(.el-select__caret) {
  color: var(--web-control-muted);
}
.creative-select:deep(.el-tag) {
  color: var(--web-accent-muted);
  background: var(--web-hover);
  border-color: var(--web-line-emphasis);
}
.creative-select:deep(.el-tag__close) {
  color: var(--web-text-secondary);
}
</style>

<style lang="scss">
.creative-select-popper.el-popper {
  background: var(--web-surface);
  border: 1px solid var(--web-line-strong);
  border-radius: 9px;
  box-shadow: var(--web-shadow-select);
  overflow: hidden;
}
.creative-select-popper.el-popper .el-popper__arrow::before {
  background: var(--web-surface);
  border-color: var(--web-line-strong);
}
.creative-select-popper .el-select-dropdown {
  background: var(--web-surface);
}
.creative-select-popper .el-select-dropdown__wrap {
  max-height: 260px;
}
.creative-select-popper .el-select-dropdown__list {
  padding: 6px;
}
.creative-select-popper .el-select-dropdown__item {
  height: 38px;
  padding: 0 12px;
  color: var(--web-text-secondary);
  border-radius: 6px;
  font-size: 13px;
  line-height: 38px;
}
.creative-select-popper .el-select-dropdown__item.is-hovering {
  color: var(--web-text);
  background: var(--web-surface);
}
.creative-select-popper .el-select-dropdown__item.is-selected {
  color: var(--web-accent-dark);
  background: var(--web-hover);
  font-weight: 600;
}
.creative-select-popper .el-select-dropdown__item.is-disabled {
  color: var(--web-select-option);
  background: transparent;
}
.creative-select-popper .el-select-group__title {
  padding: 10px 12px 5px;
  color: var(--web-select-group);
  font-size: 10px;
  letter-spacing: 1px;
}
.creative-select-popper .el-select-dropdown__empty {
  color: var(--web-text-tertiary);
}
.creative-select-popper .el-scrollbar__thumb {
  background: var(--web-mention-prop-bg);
}
.creative-select-popper .el-select-dropdown__list::before,
.creative-select-popper .el-select-dropdown__list::after {
  display: none;
}
</style>
