import { defineComponent, ref, inject, computed, watch, onMounted, openBlock, createElementBlock, mergeProps, toDisplayString } from "vue";
const _hoisted_1 = ["value", "disabled"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "OptionH5",
  props: {
    label: {
      type: String,
      required: true
    },
    value: {
      required: true,
      type: [String, Number]
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  setup(__props) {
    const optionRef = ref();
    const TSelect = inject("TSelect");
    const props = __props;
    const isActive = computed(() => {
      return TSelect && TSelect.label.value === props.label;
    });
    watch(
      () => props.label,
      (newValue) => {
        TSelect.addOption({
          label: props.label,
          value: props.value,
          ref: optionRef
        });
      }
    );
    onMounted(() => {
      TSelect.addOption({ label: props.label, value: props.value, ref: optionRef });
    });
    const handleOptionClick = () => {
      if (props.disabled) return;
      TSelect.handleOptionClick(props.value);
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("span", mergeProps({
        class: ["custom-option", isActive.value && "active"],
        value: props.value,
        disabled: __props.disabled,
        onClick: handleOptionClick,
        ref_key: "optionRef",
        ref: optionRef
      }, _ctx.$attrs), toDisplayString(props.label), 17, _hoisted_1);
    };
  }
});
export {
  _sfc_main as default
};
