<script setup>
import { computed, inject, onMounted, onBeforeUnmount, useSlots } from "vue";
import { SelectContextKey } from "./select";
defineOptions({
  name: "YhOption"
});
const props = defineProps({
  value: { type: [String, Number, Boolean], required: true },
  label: { type: String, required: false },
  disabled: { type: Boolean, required: false, default: false }
});
const select = inject(SelectContextKey, null);
const slots = useSlots();
const getSlotText = (vnodes) => {
  let text = "";
  for (const node of vnodes) {
    if (!node) continue;
    if (typeof node.children === "string") {
      text += node.children;
    } else if (Array.isArray(node.children)) {
      text += getSlotText(node.children);
    } else if (node.type && node.type.toString() === "Symbol(v-fgt)" && Array.isArray(node.children)) {
      text += getSlotText(node.children);
    } else if (node.children && typeof node.children.default === "function") {
      text += getSlotText(node.children.default());
    }
  }
  return text.trim();
};
const optionData = computed(() => {
  let labelVal = props.label;
  if (!labelVal) {
    if (slots.default) {
      try {
        const text = getSlotText(slots.default());
        labelVal = text || String(props.value);
      } catch {
        labelVal = String(props.value);
      }
    } else {
      labelVal = String(props.value);
    }
  }
  return {
    value: props.value,
    label: labelVal,
    disabled: props.disabled
  };
});
onMounted(() => {
  if (select) {
    select.onOptionCreate(optionData.value);
  }
});
onBeforeUnmount(() => {
  if (select) {
    select.onOptionDestroy(props.value);
  }
});
</script>

<template>
  <!-- 这个组件在 Select 内部是以数据形式存在的，其 template 仅作为 slot 内容容器 -->
  <div v-show="false">
    <slot />
  </div>
</template>

<style>
@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-select {
  position: relative;
  display: inline-flex;
  width: 100%;
  font-size: 14px;
}
.yh-select__wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  position: relative;
  width: 100%;
  min-height: 32px;
  padding: 2px 30px 2px 11px;
  background-color: var(--yh-fill-color-blank, #fff);
  border: 1px solid var(--yh-border-color, #dcdfe6);
  border-radius: var(--yh-border-radius-base, 4px);
  box-sizing: border-box;
  transition: border-color 0.2s;
  cursor: pointer;
}
.yh-select__wrapper:hover {
  border-color: var(--yh-border-color-hover, #c0c4cc);
}

.yh-select__inner {
  flex: 1;
  min-width: 50px;
  height: 26px;
  padding: 0;
  color: var(--yh-text-color-regular, #606266);
  font-size: inherit;
  line-height: 26px;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}
.yh-select__inner::placeholder {
  color: var(--yh-text-color-placeholder, #a8abb2);
}
.yh-select__inner:disabled {
  cursor: not-allowed;
}

.yh-select__selected-value {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--yh-text-color-regular, #606266);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 50px);
}

.yh-select__suffix {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--yh-text-color-placeholder, #a8abb2);
}

.yh-select__icon {
  width: 14px;
  height: 14px;
  line-height: 1;
}

.yh-select__clear {
  cursor: pointer;
  transition: color 0.2s;
}
.yh-select__clear:hover {
  color: var(--yh-text-color-secondary, #909399);
}

.yh-select__arrow {
  transition: transform 0.3s;
}
.yh-select__arrow.is-reverse {
  transform: rotate(180deg);
}

.yh-select__tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 22px;
  padding: 0 8px;
  font-size: 12px;
  color: var(--yh-text-color-regular, #606266);
  background-color: var(--yh-fill-color, #f0f2f5);
  border-radius: var(--yh-border-radius-small, 2px);
}

.yh-select__tag-text {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yh-select__tag-close {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  cursor: pointer;
  transition: color 0.2s;
}
.yh-select__tag-close:hover {
  color: var(--yh-color-danger, #f56c6c);
}
.yh-select__tag-close svg {
  width: 12px;
  height: 12px;
}

.yh-select__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2000;
  margin-top: 4px;
  padding: 6px 0;
  background-color: var(--yh-bg-color-overlay, #fff);
  border: 1px solid var(--yh-border-color-light, #e4e7ed);
  border-radius: var(--yh-border-radius-base, 4px);
  box-shadow: var(--yh-box-shadow-light, 0 2px 12px 0 rgba(0, 0, 0, 0.1));
  cursor: default;
  pointer-events: auto;
}

.yh-select__options {
  max-height: 274px;
  overflow-y: auto;
  pointer-events: auto;
}

.yh-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 34px;
  line-height: 34px;
  font-size: 14px;
  color: var(--yh-text-color-regular, #606266);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
}
.yh-select__option:hover:not(.is-disabled) {
  background-color: var(--yh-fill-color-light, #f5f7fa);
}
.yh-select__option.is-disabled {
  color: var(--yh-text-color-placeholder, #a8abb2);
  cursor: not-allowed;
}

.yh-select__option.is-hovering {
  background-color: var(--yh-fill-color-light, #f5f7fa);
}
.yh-select__option.is-selected {
  color: var(--yh-color-white, #ffffff) !important;
  background-color: var(--yh-color-primary, #409eff) !important;
  font-weight: 700;
  z-index: 1;
}
.yh-select__option.is-selected.is-hovering {
  background-color: var(--yh-color-primary-light-3, #79bbff);
}
.yh-select__option.is-selected.is-disabled {
  background-color: var(--yh-fill-color-light, #f5f7fa) !important;
  color: var(--yh-text-color-placeholder, #a8abb2) !important;
}

.yh-select__option-check {
  color: var(--yh-color-primary, #409eff);
}
.yh-select__option-check svg {
  width: 14px;
  height: 14px;
}

.yh-select__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  color: var(--yh-text-color-secondary, #909399);
  font-size: 14px;
}

.yh-select__loading-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  animation: yh-select-loading 1s linear infinite;
}

.yh-select__empty {
  padding: 10px 0;
  text-align: center;
  color: var(--yh-text-color-secondary, #909399);
  font-size: 14px;
}

.yh-select.is-focused .yh-select__wrapper {
  border-color: var(--yh-color-primary, #409eff);
}
.yh-select.is-disabled {
  cursor: not-allowed;
}
.yh-select.is-disabled .yh-select__wrapper {
  background-color: var(--yh-fill-color-light, #f5f7fa);
  border-color: var(--yh-border-color-light, #e4e7ed);
  cursor: not-allowed;
}
.yh-select.is-disabled .yh-select__inner {
  color: var(--yh-text-color-placeholder, #a8abb2);
}
.yh-select.is-multiple .yh-select__inner {
  height: 22px;
  line-height: 22px;
}
.yh-select--large {
  font-size: 14px;
}
.yh-select--large .yh-select__wrapper {
  min-height: 40px;
}
.yh-select--large .yh-select__inner {
  height: 34px;
  line-height: 34px;
}
.yh-select--large .yh-select__tag {
  height: 26px;
}
.yh-select--large.is-multiple .yh-select__inner {
  height: 26px;
  line-height: 26px;
}

.yh-select--small {
  font-size: 12px;
}
.yh-select--small .yh-select__wrapper {
  min-height: 24px;
}
.yh-select--small .yh-select__inner {
  height: 18px;
  line-height: 18px;
}
.yh-select--small .yh-select__tag {
  height: 18px;
  font-size: 10px;
}
.yh-select--small.is-multiple .yh-select__inner {
  height: 18px;
  line-height: 18px;
}

.yh-select-dropdown-enter-active,
.yh-select-dropdown-leave-active {
  transition: opacity 0.2s, transform 0.2s;
}

.yh-select-dropdown-enter-from,
.yh-select-dropdown-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

@keyframes yh-select-loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
