import { ref, provide, watch, openBlock, createElementBlock, createElementVNode, mergeProps, toDisplayString, createVNode, withCtx, renderSlot, nextTick } from "vue";
import ActionSheep from "../ActionSheep.vue.mjs";
import SvgIcon from "../SvgIcon.vue.mjs";
import ArrowStrokeSelectDownIcon from "../../icons/ArrowStrokeSelectDownIcon.vue.mjs";
/* empty css               */
import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.mjs";
const _hoisted_1 = { class: "label" };
const _hoisted_2 = { class: "custom-option-container" };
const _sfc_main = {
  __name: "SelectH5",
  props: {
    value: {
      type: [String, Number, Date]
    }
  },
  emits: ["change", "input"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const selectedLabel = ref("");
    const selectedRef = ref();
    const options = ref([]);
    const drawerShow = ref(false);
    const toggleDrawer = async () => {
      drawerShow.value = !drawerShow.value;
      await nextTick();
      if (drawerShow.value) {
        await nextTick();
        await selectedRef.value.scrollIntoView({ block: "center" });
      }
    };
    const onChange = (value) => {
      emit("change", value);
      emit("input", value);
    };
    const updateSelectedLabel = (newValue) => {
      const index = options.value.findIndex((option) => option.value === newValue);
      const matchedOption = options.value[index];
      if (matchedOption && matchedOption.label !== selectedLabel.value) {
        selectedLabel.value = matchedOption.label;
        selectedRef.value = matchedOption.ref;
      }
    };
    const addOption = (option) => {
      const index = options.value.findIndex((item) => item.value === option.value);
      if (index >= 0) {
        options.value[index] = option;
        updateSelectedLabel(props.value);
        return;
      }
      options.value.push(option);
      updateSelectedLabel(props.value);
    };
    const handleOptionClick = (value) => {
      updateSelectedLabel(value);
      onChange(value);
      toggleDrawer();
    };
    provide("TSelect", {
      value: props.value,
      label: selectedLabel,
      addOption,
      handleOptionClick
    });
    watch(
      () => props.value,
      (newValue, oldValue) => {
        if (newValue === oldValue) return;
        updateSelectedLabel(newValue);
      },
      { immediate: true }
    );
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", null, [
        createElementVNode("div", mergeProps({
          class: "custom-select",
          onChange: _cache[0] || (_cache[0] = ($event) => onChange($event.target.value)),
          onClick: toggleDrawer
        }, _ctx.$attrs), [
          createElementVNode("span", _hoisted_1, toDisplayString(selectedLabel.value || props.value), 1),
          createVNode(SvgIcon, {
            class: "icon-arrow",
            icon: ArrowStrokeSelectDownIcon
          })
        ], 16),
        createVNode(ActionSheep, {
          visible: drawerShow.value,
          onInput: _cache[1] || (_cache[1] = ($event) => drawerShow.value = $event)
        }, {
          default: withCtx(() => [
            createElementVNode("div", _hoisted_2, [
              renderSlot(_ctx.$slots, "default", {}, void 0, true)
            ])
          ]),
          _: 3
        }, 8, ["visible"])
      ]);
    };
  }
};
const SelectH5 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-79ae4708"]]);
export {
  SelectH5 as default
};
