<template>
  <sar-popout-input
    v-model="inputValue"
    :placeholder="placeholder"
    :readonly="readonly"
    :disabled="disabled"
    :clearable="clearable"
    @clear="onClear"
    @click="onInputClick"
    :validate-event="validateEvent"
    :loading="loading"
  />

  <sar-popout
    :root-class="rootClass"
    :root-style="rootStyle"
    :visible="innerVisible"
    @update:visible="onVisible"
    :title="title ?? placeholder"
    :show-confirm="showConfirm"
    @confirm="onConfirm"
  >
    <template #visible="{ already }">
      <sar-cascader
        v-if="already"
        :model-value="popoutValue"
        @update:model-value="onChange"
        :options="options"
        :field-keys="fieldKeys"
        :placeholder="hintText"
        @select="(option, tabIndex) => $emit('select', option, tabIndex)"
      >
        <template #top="{ tabIndex }">
          <slot name="top" :tab-index="tabIndex"></slot>
        </template>
      </sar-cascader>
    </template>
  </sar-popout>
</template>

<script lang="ts">
import { defineComponent as _defineComponent } from "vue";
import { ref, watch, computed } from "vue";
import SarPopoutInput from "../popout-input/popout-input.vue";
import SarCascader from "../cascader/cascader.vue";
import {
  defaultFieldKeys,
  getSelectedOptionsByValue
} from "../cascader/common";
import SarPopout from "../popout/popout.vue";
import { isNullish } from "../utils";
import { cascaderInputProps } from "./common";
const __default__ = {
  options: {
    virtualHost: true,
    styleIsolation: "shared"
  }
};
export default /* @__PURE__ */ _defineComponent({
  ...__default__,
  __name: "cascader-input",
  props: cascaderInputProps,
  emits: ["update:visible", "update:model-value", "select"],
  setup(__props, { expose: __expose, emit: __emit }) {
    __expose();
    const props = __props;
    const emit = __emit;
    const innerValue = ref(props.modelValue);
    watch(
      () => props.modelValue,
      () => {
        innerValue.value = props.modelValue;
      }
    );
    const popoutValue = ref(props.modelValue);
    watch(innerValue, () => {
      popoutValue.value = innerValue.value;
    });
    const onConfirm = () => {
      innerValue.value = popoutValue.value;
      emit("update:model-value", popoutValue.value);
      inputValue.value = getInputValue();
    };
    const onChange = (value) => {
      popoutValue.value = value;
      if (!props.showConfirm && !isNullish(popoutValue.value)) {
        onConfirm();
        innerVisible.value = false;
      }
    };
    const inputValue = ref("");
    const fieldkeys = computed(() => {
      return Object.assign(
        {},
        defaultFieldKeys,
        props.fieldKeys
      );
    });
    function getOutletText(options, value, fieldKeys) {
      const selectedOptions = getSelectedOptionsByValue(options, value, fieldKeys);
      if (!selectedOptions) {
        return "";
      }
      const labels = selectedOptions.map((option) => option[fieldKeys.label]);
      return labels.join("/");
    }
    function getInputValue() {
      if (isNullish(innerValue.value) || !props.options) {
        return "";
      }
      return getOutletText(props.options, innerValue.value, fieldkeys.value);
    }
    watch(
      innerValue,
      () => {
        inputValue.value = getInputValue();
      },
      {
        immediate: true
      }
    );
    watch(
      () => props.options,
      () => {
        inputValue.value = getInputValue();
      }
    );
    const onClear = () => {
      inputValue.value = "";
      innerValue.value = void 0;
      emit("update:model-value", void 0);
    };
    const innerVisible = ref(props.visible);
    watch(
      () => props.visible,
      () => {
        innerVisible.value = props.visible;
      }
    );
    const onVisible = (visible) => {
      innerVisible.value = visible;
      emit("update:visible", visible);
    };
    const onInputClick = () => {
      innerVisible.value = true;
      emit("update:visible", true);
    };
    const __returned__ = { props, emit, innerValue, popoutValue, onConfirm, onChange, inputValue, fieldkeys, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarCascader, SarPopout };
    return __returned__;
  }
});
</script>
