"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.columnProps = exports.FIX_LABEL = void 0;
var _vue = require("vue");
var _commonUtil = require("../utils/commonUtil");
var _Checkbox = _interopRequireDefault(require("./Checkbox"));
var _useSearchOptions = require("../hooks/useSearchOptions");
var _context = require("../context");
var _vnode = require("../../_util/vnode");
const FIX_LABEL = exports.FIX_LABEL = '__cascader_fix_label__';
const columnProps = () => ({
  prefixCls: String,
  multiple: Boolean,
  options: Array,
  activeValue: [String, Number],
  prevValuePath: Array,
  onToggleOpen: Function,
  onSelect: Function,
  onActive: Function,
  checkedSet: Object,
  halfCheckedSet: Object,
  loadingKeys: Array,
  isSelectable: Function
});
exports.columnProps = columnProps;
const Column = (0, _vue.defineComponent)({
  name: 'Column',
  inheritAttrs: false,
  props: columnProps(),
  setup(props) {
    const menuPrefixCls = (0, _vue.computed)(() => `${props.prefixCls}-menu`);
    const menuItemPrefixCls = (0, _vue.computed)(() => `${props.prefixCls}-menu-item`);
    const menuRef = (0, _vue.ref)();
    const {
      fieldNames,
      changeOnSelect,
      expandTrigger,
      expandIcon: expandIconRef,
      loadingIcon: loadingIconRef,
      dropdownMenuColumnStyle,
      customSlots
    } = (0, _context.useInjectCascader)();
    (0, _vue.watch)([() => props.activeValue, () => menuItemPrefixCls.value, () => menuRef.value], () => {
      setTimeout(() => {
        if (menuRef.value) {
          const selector = `.${menuItemPrefixCls.value}-active`;
          const activeElement = menuRef.value.querySelector(selector);
          if (activeElement) {
            (0, _commonUtil.scrollIntoParentView)(activeElement);
          }
        }
      }, 0);
    }, {
      immediate: true
    });
    // ============================ Render ============================
    return () => {
      var _a, _b, _c, _d, _e, _f;
      const {
        prefixCls,
        multiple,
        options,
        activeValue,
        prevValuePath,
        onToggleOpen,
        onSelect,
        onActive,
        checkedSet,
        halfCheckedSet,
        loadingKeys,
        isSelectable
      } = props;
      const expandIcon = (_a = expandIconRef.value) !== null && _a !== void 0 ? _a : (_c = (_b = customSlots.value).expandIcon) === null || _c === void 0 ? void 0 : _c.call(_b);
      const loadingIcon = (_d = loadingIconRef.value) !== null && _d !== void 0 ? _d : (_f = (_e = customSlots.value).loadingIcon) === null || _f === void 0 ? void 0 : _f.call(_e);
      const hoverOpen = expandTrigger.value === 'hover';
      return (0, _vue.createVNode)("ul", {
        "class": menuPrefixCls.value,
        "role": "menu",
        "ref": menuRef
      }, [options.map(option => {
        var _a, _b;
        const {
          disabled
        } = option;
        const searchOptions = option[_useSearchOptions.SEARCH_MARK];
        const label = (_a = option[FIX_LABEL]) !== null && _a !== void 0 ? _a : option[fieldNames.value.label];
        const value = option[fieldNames.value.value];
        const isMergedLeaf = (0, _commonUtil.isLeaf)(option, fieldNames.value);
        // Get real value of option. Search option is different way.
        const fullPath = searchOptions ? searchOptions.map(opt => opt[fieldNames.value.value]) : [...prevValuePath, value];
        const fullPathKey = (0, _commonUtil.toPathKey)(fullPath);
        const isLoading = loadingKeys.includes(fullPathKey);
        // >>>>> checked
        const checked = checkedSet.has(fullPathKey);
        // >>>>> halfChecked
        const halfChecked = halfCheckedSet.has(fullPathKey);
        // >>>>> Open
        const triggerOpenPath = () => {
          if (!disabled && (!hoverOpen || !isMergedLeaf)) {
            onActive(fullPath);
          }
        };
        // >>>>> Selection
        const triggerSelect = () => {
          if (isSelectable(option)) {
            onSelect(fullPath, isMergedLeaf);
          }
        };
        // >>>>> Title
        let title;
        if (typeof option.title === 'string') {
          title = option.title;
        } else if (typeof label === 'string') {
          title = label;
        }
        // >>>>> Render
        return (0, _vue.createVNode)("li", {
          "key": fullPathKey,
          "class": [menuItemPrefixCls.value, {
            [`${menuItemPrefixCls.value}-expand`]: !isMergedLeaf,
            [`${menuItemPrefixCls.value}-active`]: activeValue === value,
            [`${menuItemPrefixCls.value}-disabled`]: disabled,
            [`${menuItemPrefixCls.value}-loading`]: isLoading
          }],
          "style": dropdownMenuColumnStyle.value,
          "role": "menuitemcheckbox",
          "title": title,
          "aria-checked": checked,
          "data-path-key": fullPathKey,
          "onClick": () => {
            triggerOpenPath();
            if (!multiple || isMergedLeaf) {
              triggerSelect();
            }
          },
          "onDblclick": () => {
            if (changeOnSelect.value) {
              onToggleOpen(false);
            }
          },
          "onMouseenter": () => {
            if (hoverOpen) {
              triggerOpenPath();
            }
          },
          "onMousedown": e => {
            // Prevent selector from blurring
            e.preventDefault();
          }
        }, [multiple && (0, _vue.createVNode)(_Checkbox.default, {
          "prefixCls": `${prefixCls}-checkbox`,
          "checked": checked,
          "halfChecked": halfChecked,
          "disabled": disabled,
          "onClick": e => {
            e.stopPropagation();
            triggerSelect();
          }
        }, null), (0, _vue.createVNode)("div", {
          "class": `${menuItemPrefixCls.value}-content`
        }, [((_b = customSlots.value) === null || _b === void 0 ? void 0 : _b.optionRender) ? customSlots.value.optionRender(option) : label]), !isLoading && expandIcon && !isMergedLeaf && (0, _vue.createVNode)("div", {
          "class": `${menuItemPrefixCls.value}-expand-icon`
        }, [(0, _vnode.cloneElement)(expandIcon)]), isLoading && loadingIcon && (0, _vue.createVNode)("div", {
          "class": `${menuItemPrefixCls.value}-loading-icon`
        }, [(0, _vnode.cloneElement)(loadingIcon)])]);
      })]);
    };
  }
});
var _default = exports.default = Column;