/* empty css                                               */
/* empty css                                                */
/* empty css                                               */
/* empty css                                                  */
/* empty css                                                */
/* empty css                                                  */
/* empty css                                                 */
/* empty css                                                */
/* empty css                                                     */
/* empty css                                               */
/* empty css                                              */
/* empty css                                                       */
/* empty css                                                 */
import { getCurrentInstance, useAttrs, ref, watch, computed, createBlock, openBlock, unref, mergeProps, isRef, createSlots, withCtx, createVNode, withModifiers } from "vue";
import { MobileField } from "../field/index.mjs";
import { getOptions } from "../../../utils/optionUtil.mjs";
import { cloneDeep } from "../../../utils/common.mjs";
import { Picker } from "../../../../node_modules/vant/es/picker/index.mjs";
import { Popup } from "../../../../node_modules/vant/es/popup/index.mjs";
import { Icon } from "../../../../node_modules/vant/es/icon/index.mjs";
const _sfc_main = {
  __name: "FieldPicker",
  props: {
    pickerOptions: {
      type: Array,
      default: []
    },
    treeOptionsFieldNames: {
      type: Object,
      default: {
        text: "text",
        value: "value"
      }
    },
    modelValue: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    "is-link": false,
    optionConfig: {
      type: Object,
      default: () => ({})
    },
    dataSources: {
      type: Array,
      default: () => []
    },
    formData: {
      type: Object,
      default: () => {
      }
    },
    fields: {
      type: Array,
      default: () => []
    }
  },
  emits: ["update:modelValue"],
  setup(__props, { emit: __emit }) {
    const currentInstance = getCurrentInstance();
    const ctx = currentInstance.proxy;
    const props = __props;
    useAttrs();
    const finalOptions = ref([]);
    watch(
      () => cloneDeep(props.optionConfig),
      (val) => {
        getOptions({
          ctx,
          dataSources: props.dataSources,
          formData: props.formData,
          fields: props.fields,
          ...props.optionConfig
        }).then((data) => {
          finalOptions.value = data;
        });
      },
      {
        deep: true,
        immediate: true
      }
    );
    const showPicker = ref(false);
    const emit = __emit;
    const pickerValue = computed({
      get: () => {
        const value = props.modelValue;
        return value.split(",");
      },
      set: (val) => {
        emit("update:modelValue", val.join(","));
      }
    });
    const fieldTextValue = computed(() => {
      const selectedOption = finalOptions.value.find(
        (option) => option.value == pickerValue.value.join(",")
      );
      return selectedOption ? selectedOption.label : "";
    });
    const onConfirm = ({ selectedValues, selectedOptions }) => {
      pickerValue.value = selectedValues;
      showPicker.value = false;
    };
    return (_ctx, _cache) => {
      const _component_van_icon = Icon;
      const _component_van_picker = Picker;
      const _component_van_popup = Popup;
      return openBlock(), createBlock(unref(MobileField), mergeProps(_ctx.$attrs, {
        modelValue: unref(fieldTextValue),
        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isRef(fieldTextValue) ? fieldTextValue.value = $event : null),
        isLink: __props.readonly || __props.disabled ? false : true,
        readonly: "",
        disabled: __props.disabled,
        onOpenPicker: _cache[4] || (_cache[4] = () => {
          if (!__props.readonly) {
            showPicker.value = true;
          }
        })
      }), createSlots({
        default: withCtx(() => [
          createVNode(_component_van_popup, {
            show: unref(showPicker),
            "onUpdate:show": _cache[2] || (_cache[2] = ($event) => isRef(showPicker) ? showPicker.value = $event : null),
            "destroy-on-close": "",
            position: "bottom",
            teleport: "body"
          }, {
            default: withCtx(() => [
              createVNode(_component_van_picker, mergeProps(_ctx.$attrs, {
                title: `${_ctx.$attrs.label}`,
                columns: unref(finalOptions),
                "columns-field-names": {
                  text: "label",
                  value: "value",
                  children: "children"
                },
                "model-value": unref(pickerValue),
                readonly: false,
                onConfirm,
                onCancel: _cache[1] || (_cache[1] = ($event) => showPicker.value = false)
              }), null, 16, ["title", "columns", "model-value"])
            ]),
            _: 1
          }, 8, ["show"])
        ]),
        _: 2
      }, [
        !__props.readonly && !__props.disabled && unref(fieldTextValue) ? {
          name: "right-icon",
          fn: withCtx(() => [
            createVNode(_component_van_icon, {
              name: "clear",
              class: "custom-close-icon",
              onClick: _cache[0] || (_cache[0] = withModifiers(($event) => pickerValue.value = null, ["stop"]))
            })
          ]),
          key: "0"
        } : void 0
      ]), 1040, ["modelValue", "isLink", "disabled"]);
    };
  }
};
export {
  _sfc_main as default
};
