import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import { resolveDirective as _resolveDirective, Fragment as _Fragment, createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
import { defineComponent, ref, computed, watch, nextTick } from 'vue';
import { default as PfSelect, selectProps } from '../select';
import { withInstall } from '../_util/type';
import useConfigInject from '../_util/hooks/useConfigInject';
import { initDefaultProps } from '../_util/props-util';
import InfoTwoTone from '@pf-ui/pf-icons-vue/InfoTwoTone';
import classNames from '../_util/classNames';
function toggleArrayItem(arr, row, key) {
  var index = arr.findIndex(function (item) {
    return item[key] === row[key];
  });
  if (index !== -1) {
    return [].concat(_toConsumableArray(arr.slice(0, index)), _toConsumableArray(arr.slice(index + 1)));
  }
  return [].concat(_toConsumableArray(arr), [row]);
}
export var selectTableProps = function selectTableProps() {
  return _objectSpread(_objectSpread({
    value: Object
  }, selectProps), {}, {
    mode: String,
    tableDrop: Array,
    valueKey: String,
    labelKey: String,
    showSearch: Boolean,
    options: Array
  });
};
var SelectTable = defineComponent({
  name: 'PfSelectTable',
  inheritAttrs: false,
  props: initDefaultProps(selectTableProps(), {
    valueKey: 'id',
    labelKey: 'name',
    showSearch: false
  }),
  emits: ['change', 'search', 'update:value'],
  setup: function setup(props, _ref) {
    var attrs = _ref.attrs,
      emit = _ref.emit;
    var _useConfigInject = useConfigInject('select-table', props),
      prefixCls = _useConfigInject.prefixCls;
    var isMultiple = computed(function () {
      return (props === null || props === void 0 ? void 0 : props.mode) === 'multiple' || (props === null || props === void 0 ? void 0 : props.mode) === 'tags';
    });
    var value = ref(isMultiple.value ? _toConsumableArray(props.options.filter(function (x) {
      var _props$value;
      return props === null || props === void 0 ? void 0 : (_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.includes(x[props.valueKey]);
    })) : props.options.find(function (x) {
      return x[props.valueKey] === (props === null || props === void 0 ? void 0 : props.value);
    }));
    var searchValue = ref('');
    watch(function () {
      return props.value;
    }, function (v) {
      if (v === null || v === undefined) {
        value.value = isMultiple.value ? [] : undefined;
        return;
      }
      if (isMultiple.value) {
        var valueArr = _toConsumableArray(value.value).map(function (x) {
          return x[props.valueKey];
        });
        if (valueArr.join() !== v.join()) {
          var _ref2;
          var newArr = (_ref2 = _toConsumableArray(v)) === null || _ref2 === void 0 ? void 0 : _ref2.filter(function (x) {
            return !valueArr.includes(x);
          });
          var arr = props.options.filter(function (x) {
            return newArr === null || newArr === void 0 ? void 0 : newArr.includes(x[props.valueKey]);
          });
          var delArr = valueArr.filter(function (x) {
            return !v.includes(x);
          });
          value.value = [_toConsumableArray(value.value).filter(function (x) {
            return !delArr.includes(x[props.valueKey]);
          })].concat(_toConsumableArray(arr));
        }
      } else {
        var _value$value;
        if (v !== ((_value$value = value.value) === null || _value$value === void 0 ? void 0 : _value$value[props === null || props === void 0 ? void 0 : props.valueKey])) {
          var obj = props.options.find(function (x) {
            return x[props.valueKey] === v;
          });
          value.value = _objectSpread({}, obj);
        }
      }
    });
    var open = ref(false);
    var handleSelectRowClick = function handleSelectRowClick(e, row) {
      if (isMultiple.value) {
        var toggleArr = toggleArrayItem(_toConsumableArray(value.value || []), row, props.valueKey);
        open.value = true;
        value.value = _toConsumableArray(toggleArr);
        var valueArr = _toConsumableArray(toggleArr).map(function (x) {
          return x[props.valueKey];
        });
        emit === null || emit === void 0 ? void 0 : emit("update:value", valueArr);
        emit('change', _toConsumableArray(toggleArr));
      } else {
        open.value = false;
        value.value = _objectSpread({}, row);
        emit('update:value', row[props.valueKey]);
        emit('change', _objectSpread({}, row));
      }
      nextTick(function () {
        searchValue.value = '';
      });
      e.preventDefault();
    };
    var handleMouseDouwn = function handleMouseDouwn(e) {
      return e.preventDefault();
    };
    var elSelectSlots = {
      $stable: true,
      dropdownRender: function dropdownRender() {
        var _props$tableDrop, _props$options;
        return props !== null && props !== void 0 && (_props$tableDrop = props.tableDrop) !== null && _props$tableDrop !== void 0 && _props$tableDrop.length ? _createVNode("div", null, [props.options.length > 0 ? _createVNode("div", null, [_createVNode("div", {
          "class": "".concat(prefixCls.value, "-drop-header")
        }, [props === null || props === void 0 ? void 0 : props.tableDrop.map(function (item) {
          return _createVNode("div", {
            "style": {
              minWidth: "".concat(item.width || 120, "px")
            },
            "class": "".concat(prefixCls.value, "-drop-header-item")
          }, [item.title]);
        })]), _createVNode("div", {
          "class": "".concat(prefixCls.value, "-drop")
        }, [(_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.map(function (item, index) {
          var _value$value2, _value$value3, _classNames;
          return _createVNode("div", {
            "class": classNames("".concat(prefixCls.value, "-drop-item"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls.value, "-drop-item-striped"), index % 2 === 0), _defineProperty(_classNames, "".concat(prefixCls.value, "-drop-item-selected"), isMultiple.value ? (_value$value2 = value.value) === null || _value$value2 === void 0 ? void 0 : _value$value2.find(function (x) {
              return x[props.valueKey] === item[props.valueKey];
            }) : ((_value$value3 = value.value) === null || _value$value3 === void 0 ? void 0 : _value$value3[props.valueKey]) === item[props.valueKey]), _classNames)),
            "onClick": function onClick(e) {
              return handleSelectRowClick(e, item);
            },
            "onMousedown": handleMouseDouwn
          }, [props.tableDrop.map(function (drop) {
            return _createVNode("div", {
              "class": classNames("".concat(prefixCls.value, "-drop-label"), {}),
              "style": {
                minWidth: "".concat(drop.width || 120, "px")
              },
              "title": item[drop.label]
            }, [item[drop.label]]);
          })]);
        })])]) : null, (props === null || props === void 0 ? void 0 : props.options.length) === 0 ? _createVNode("div", {
          "class": classNames("".concat(prefixCls.value, "-drop-empty"))
        }, [_createVNode(InfoTwoTone, {
          "class": classNames("".concat(prefixCls.value, "-drop-empty-icon"))
        }, null), _createTextVNode("\u6682\u65E0\u6570\u636E")]) : null]) : '';
      }
    };
    var handleChange = function handleChange(_value) {
      if (!_value) {
        value.value = undefined;
        emit('change', undefined);
      }
    };
    var handleDeselect = function handleDeselect(v) {
      if (v) {
        var toggleArr = _toConsumableArray(value.value).filter(function (x) {
          return x[props.valueKey] !== v;
        });
        value.value = _toConsumableArray(toggleArr);
        var valueArr = _toConsumableArray(value.value).map(function (x) {
          return x[props.valueKey];
        });
        emit('change', _toConsumableArray(toggleArr));
        emit === null || emit === void 0 ? void 0 : emit("update:value", valueArr.filter(function (x) {
          return x !== v;
        }));
      }
    };
    var _handleDropdownVisibleChange = function _handleDropdownVisibleChange(_open) {
      open.value = _open;
      if (!_open) {
        searchValue.value = '';
        emit('search', undefined);
      }
    };
    return function () {
      var _value$value4, _value$value5;
      return _createVNode(_Fragment, null, [_createVNode(PfSelect, _objectSpread(_objectSpread({
        "placeholder": "请选择"
      }, attrs), {}, {
        "mode": props.mode,
        "open": open.value,
        "searchValue": searchValue.value,
        "showSearch": props.showSearch || false,
        "onSearch": function onSearch(value) {
          searchValue.value = value;
          emit('search', value);
        },
        "onDropdownVisibleChange": _handleDropdownVisibleChange,
        "defaultActiveFirstOption": false,
        "onChange": handleChange,
        "onDeselect": handleDeselect,
        "value": isMultiple.value ? (_value$value4 = value.value) === null || _value$value4 === void 0 ? void 0 : _value$value4.map(function (x) {
          return x[props.labelKey];
        }) : (_value$value5 = value.value) === null || _value$value5 === void 0 ? void 0 : _value$value5[props.labelKey]
      }), elSelectSlots)]);
    };
  }
});
export default withInstall(SelectTable);