"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
var React = _interopRequireWildcard(require("react"));
var _locale = require("./locale");
var _row = _interopRequireDefault(require("../../components/row"));
var _utils = require("../../utils");
require("./index.less");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var KEY_ARROW_DOWN = 'ArrowDown';
var KEY_ARROW_UP = 'ArrowUp';
var positionConfig = (0, _locale.intlLocal)();
var _default = exports["default"] = function _default(props) {
  var onStyleChange = props.onStyleChange,
    styleData = props.styleData,
    unit = props.unit;
  var positionTemplete = positionConfig.positionTemplete;
  var onInputChange = function onInputChange(styleKey, value) {
    if (value != '') {
      // 判断是否是数字
      if (!isNaN(parseInt(value))) {
        onStyleChange([{
          styleKey: styleKey,
          value: (0, _utils.addUnit)(value, unit)
        }]);
      }
    } else {
      onStyleChange([{
        styleKey: styleKey,
        value: null
      }]);
    }
  };
  var onInputKeyDown = function onInputKeyDown(key, styleKey) {
    var onStyleChange = props.onStyleChange,
      _props$unit = props.unit,
      unit = _props$unit === void 0 ? 'px' : _props$unit,
      styleData = props.styleData;
    var value = styleData[styleKey] || 0;
    if (key == KEY_ARROW_DOWN) {
      onStyleChange([{
        styleKey: styleKey,
        value: (0, _utils.addUnit)(parseInt(value) - 1, unit)
      }]);
    } else if (key == KEY_ARROW_UP) {
      onStyleChange([{
        styleKey: styleKey,
        value: (0, _utils.addUnit)(parseInt(value) + 1, unit)
      }]);
    }
  };
  var onPositionTempleteChange = function onPositionTempleteChange(styleDataList) {
    // 解析模板的值
    styleDataList.map(function (item) {
      if (item.value == 'topLeft') {
        onStyleChange([{
          styleKey: 'top',
          value: 0
        }, {
          styleKey: 'left',
          value: 0
        }, {
          styleKey: 'bottom',
          value: null
        }, {
          styleKey: 'right',
          value: null
        }]);
      } else if (item.value === 'topRight') {
        onStyleChange([{
          styleKey: 'top',
          value: 0
        }, {
          styleKey: 'left',
          value: null
        }, {
          styleKey: 'bottom',
          value: null
        }, {
          styleKey: 'right',
          value: 0
        }]);
      } else if (item.value === 'bottomLeft') {
        onStyleChange([{
          styleKey: 'top',
          value: null
        }, {
          styleKey: 'left',
          value: 0
        }, {
          styleKey: 'bottom',
          value: 0
        }, {
          styleKey: 'right',
          value: null
        }]);
      } else if (item.value === 'bottomRight') {
        onStyleChange([{
          styleKey: 'top',
          value: null
        }, {
          styleKey: 'left',
          value: null
        }, {
          styleKey: 'bottom',
          value: 0
        }, {
          styleKey: 'right',
          value: 0
        }]);
      }
      return item;
    });
  };
  return /*#__PURE__*/React.createElement("div", null, styleData['position'] && styleData['position'] === 'absolute' && /*#__PURE__*/React.createElement(_row["default"], {
    dataList: positionTemplete.dataList,
    onStyleChange: onPositionTempleteChange,
    styleKey: 'positionTemplete'
  }), /*#__PURE__*/React.createElement("div", {
    className: "position-box-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "top-div"
  }, /*#__PURE__*/React.createElement(_input["default"], {
    className: "next-noborder",
    placeholder: "auto",
    maxLength: 4,
    value: (0, _utils.removeUnit)(styleData['top']),
    onChange: function onChange(val) {
      return onInputChange('top', val);
    },
    onKeyDown: function onKeyDown(e) {
      return onInputKeyDown(e.key, 'top');
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "right-div"
  }, /*#__PURE__*/React.createElement(_input["default"], {
    className: "next-noborder",
    placeholder: "auto",
    maxLength: 4,
    value: (0, _utils.removeUnit)(styleData['right']),
    onChange: function onChange(val) {
      return onInputChange('right', val);
    },
    onKeyDown: function onKeyDown(e) {
      return onInputKeyDown(e.key, 'right');
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "bottom-div"
  }, /*#__PURE__*/React.createElement(_input["default"], {
    className: "next-noborder",
    placeholder: "auto",
    maxLength: 4,
    value: (0, _utils.removeUnit)(styleData['bottom']),
    onChange: function onChange(val) {
      return onInputChange('bottom', val);
    },
    onKeyDown: function onKeyDown(e) {
      return onInputKeyDown(e.key, 'bottom');
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "left-div"
  }, /*#__PURE__*/React.createElement(_input["default"], {
    className: "next-noborder",
    placeholder: "auto",
    maxLength: 4,
    value: (0, _utils.removeUnit)(styleData['left']),
    onChange: function onChange(val) {
      return onInputChange('left', val);
    },
    onKeyDown: function onKeyDown(e) {
      return onInputKeyDown(e.key, 'left');
    }
  }))));
};