"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const utils = require("./utils.js");
const index_esm = require("../../../@vant/use/dist/index.esm.js");
const useExpose = require("../composables/use-expose.js");
const index = require("../loading/index.js");
const PickerColumn = require("./PickerColumn.js");
const PickerToolbar = require("./PickerToolbar.js");
const PickerGroup = require("../picker-group/PickerGroup.js");
const basic = require("../utils/basic.js");
const constant = require("../utils/constant.js");
const format = require("../utils/format.js");
const dom = require("../utils/dom.js");
const props = require("../utils/props.js");
const pickerSharedProps = basic.extend({
  loading: Boolean,
  readonly: Boolean,
  allowHtml: Boolean,
  optionHeight: props.makeNumericProp(44),
  showToolbar: props.truthProp,
  swipeDuration: props.makeNumericProp(1e3),
  visibleOptionNum: props.makeNumericProp(6)
}, PickerToolbar.pickerToolbarProps);
const pickerProps = basic.extend({}, pickerSharedProps, {
  columns: props.makeArrayProp(),
  modelValue: props.makeArrayProp(),
  toolbarPosition: props.makeStringProp("top"),
  columnsFieldNames: Object
});
var stdin_default = Vue.defineComponent({
  name: utils.name,
  props: pickerProps,
  emits: ["confirm", "cancel", "change", "scrollInto", "clickOption", "update:modelValue"],
  setup(props2, {
    emit,
    slots
  }) {
    const columnsRef = Vue.ref();
    const selectedValues = Vue.ref(props2.modelValue.slice(0));
    const {
      parent
    } = index_esm.useParent(PickerGroup.PICKER_GROUP_KEY);
    const {
      children,
      linkChildren
    } = index_esm.useChildren(PickerColumn.PICKER_KEY);
    linkChildren();
    const fields = Vue.computed(() => utils.assignDefaultFields(props2.columnsFieldNames));
    const optionHeight = Vue.computed(() => format.unitToPx(props2.optionHeight));
    const columnsType = Vue.computed(() => utils.getColumnsType(props2.columns, fields.value));
    const currentColumns = Vue.computed(() => {
      const {
        columns
      } = props2;
      switch (columnsType.value) {
        case "multiple":
          return columns;
        case "cascade":
          return utils.formatCascadeColumns(columns, fields.value, selectedValues);
        default:
          return [columns];
      }
    });
    const hasOptions = Vue.computed(() => currentColumns.value.some((options) => options.length));
    const selectedOptions = Vue.computed(() => currentColumns.value.map((options, index2) => utils.findOptionByValue(options, selectedValues.value[index2], fields.value)));
    const selectedIndexes = Vue.computed(() => currentColumns.value.map((options, index2) => options.findIndex((option) => option[fields.value.value] === selectedValues.value[index2])));
    const setValue = (index2, value) => {
      if (selectedValues.value[index2] !== value) {
        const newValues = selectedValues.value.slice(0);
        newValues[index2] = value;
        selectedValues.value = newValues;
      }
    };
    const getEventParams = () => ({
      selectedValues: selectedValues.value.slice(0),
      selectedOptions: selectedOptions.value,
      selectedIndexes: selectedIndexes.value
    });
    const onChange = (value, columnIndex) => {
      setValue(columnIndex, value);
      if (columnsType.value === "cascade") {
        selectedValues.value.forEach((value2, index2) => {
          const options = currentColumns.value[index2];
          if (!utils.isOptionExist(options, value2, fields.value)) {
            setValue(index2, options.length ? options[0][fields.value.value] : void 0);
          }
        });
      }
      Vue.nextTick(() => {
        emit("change", basic.extend({
          columnIndex
        }, getEventParams()));
      });
    };
    const onClickOption = (currentOption, columnIndex) => {
      const params = {
        columnIndex,
        currentOption
      };
      emit("clickOption", basic.extend(getEventParams(), params));
      emit("scrollInto", params);
    };
    const confirm = () => {
      children.forEach((child) => child.stopMomentum());
      const params = getEventParams();
      Vue.nextTick(() => {
        const params2 = getEventParams();
        emit("confirm", params2);
      });
      return params;
    };
    const cancel = () => emit("cancel", getEventParams());
    const renderColumnItems = () => currentColumns.value.map((options, columnIndex) => Vue.createVNode(PickerColumn.default, {
      "value": selectedValues.value[columnIndex],
      "fields": fields.value,
      "options": options,
      "readonly": props2.readonly,
      "allowHtml": props2.allowHtml,
      "optionHeight": optionHeight.value,
      "swipeDuration": props2.swipeDuration,
      "visibleOptionNum": props2.visibleOptionNum,
      "onChange": (value) => onChange(value, columnIndex),
      "onClickOption": (option) => onClickOption(option, columnIndex),
      "onScrollInto": (option) => {
        emit("scrollInto", {
          currentOption: option,
          columnIndex
        });
      }
    }, {
      option: slots.option
    }));
    const renderMask = (wrapHeight) => {
      if (hasOptions.value) {
        const frameStyle = {
          height: `${optionHeight.value}px`
        };
        const maskStyle = {
          backgroundSize: `100% ${(wrapHeight - optionHeight.value) / 2}px`
        };
        return [Vue.createVNode("div", {
          "class": utils.bem("mask"),
          "style": maskStyle
        }, null), Vue.createVNode("div", {
          "class": [constant.BORDER_UNSET_TOP_BOTTOM, utils.bem("frame")],
          "style": frameStyle
        }, null)];
      }
    };
    const renderColumns = () => {
      const wrapHeight = optionHeight.value * +props2.visibleOptionNum;
      const columnsStyle = {
        height: `${wrapHeight}px`
      };
      if (!props2.loading && !hasOptions.value && slots.empty) {
        return slots.empty();
      }
      return Vue.createVNode("div", {
        "ref": columnsRef,
        "class": utils.bem("columns"),
        "style": columnsStyle
      }, [renderColumnItems(), renderMask(wrapHeight)]);
    };
    const renderToolbar = () => {
      if (props2.showToolbar && !parent) {
        return Vue.createVNode(PickerToolbar.default, Vue.mergeProps(basic.pick(props2, PickerToolbar.pickerToolbarPropKeys), {
          "onConfirm": confirm,
          "onCancel": cancel
        }), basic.pick(slots, PickerToolbar.pickerToolbarSlots));
      }
    };
    const resetSelectedValues = (columns) => {
      columns.forEach((options, index2) => {
        if (options.length && !utils.isOptionExist(options, selectedValues.value[index2], fields.value)) {
          setValue(index2, utils.getFirstEnabledOption(options)[fields.value.value]);
        }
      });
    };
    Vue.watch(currentColumns, (columns) => resetSelectedValues(columns), {
      immediate: true
    });
    let lastEmittedModelValue;
    Vue.watch(() => props2.modelValue, (newValues) => {
      if (!basic.isSameValue(newValues, selectedValues.value) && !basic.isSameValue(newValues, lastEmittedModelValue)) {
        selectedValues.value = newValues.slice(0);
        lastEmittedModelValue = newValues.slice(0);
      }
      if (props2.modelValue.length === 0) {
        resetSelectedValues(currentColumns.value);
      }
    }, {
      deep: true
    });
    Vue.watch(selectedValues, (newValues) => {
      if (!basic.isSameValue(newValues, props2.modelValue)) {
        lastEmittedModelValue = newValues.slice(0);
        emit("update:modelValue", lastEmittedModelValue);
      }
    }, {
      immediate: true
    });
    index_esm.useEventListener("touchmove", dom.preventDefault, {
      target: columnsRef
    });
    const getSelectedOptions = () => selectedOptions.value;
    useExpose.useExpose({
      confirm,
      getSelectedOptions
    });
    return () => {
      var _a, _b;
      return Vue.createVNode("div", {
        "class": utils.bem()
      }, [props2.toolbarPosition === "top" ? renderToolbar() : null, props2.loading ? Vue.createVNode(index.Loading, {
        "class": utils.bem("loading")
      }, null) : null, (_a = slots["columns-top"]) == null ? void 0 : _a.call(slots), renderColumns(), (_b = slots["columns-bottom"]) == null ? void 0 : _b.call(slots), props2.toolbarPosition === "bottom" ? renderToolbar() : null]);
    };
  }
});
exports.default = stdin_default;
exports.pickerProps = pickerProps;
exports.pickerSharedProps = pickerSharedProps;
