"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _right = _interopRequireDefault(require("../../assets/icon/grid-nav/right.png"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var ExampleComponent = function ExampleComponent(props, ref) {
  var columns = props.columns,
    _props$iconSize = props.iconSize,
    iconSize = _props$iconSize === void 0 ? 'medium' : _props$iconSize,
    _props$fontWeight = props.fontWeight,
    fontWeight = _props$fontWeight === void 0 ? 'normal' : _props$fontWeight,
    _props$fontSize = props.fontSize,
    fontSize = _props$fontSize === void 0 ? 12 : _props$fontSize,
    _props$fontColor = props.fontColor,
    fontColor = _props$fontColor === void 0 ? '#222' : _props$fontColor,
    _props$lineHeight = props.lineHeight,
    lineHeight = _props$lineHeight === void 0 ? 'auto' : _props$lineHeight,
    _props$lineNum = props.lineNum,
    lineNum = _props$lineNum === void 0 ? 1 : _props$lineNum,
    dataSourceSetting = props.dataSourceSetting;
  console.log('dataSourceSetting的值为', dataSourceSetting);

  // 设置图标尺寸
  var iconStyle = {};
  switch (iconSize) {
    case 'large':
      iconStyle = {
        width: '64px',
        height: '64px'
      };
      break;
    case 'medium':
      iconStyle = {
        width: '48px',
        height: '48px'
      };
      break;
    case 'small':
      iconStyle = {
        width: '32px',
        height: '32px'
      };
      break;
    default:
      iconStyle = {
        width: '48px',
        height: '48px'
      };
  }

  // 设置字重
  var fontStyle = {
    fontWeight: fontWeight,
    fontSize: fontSize,
    color: fontColor,
    lineHeight: lineHeight
  };

  // 设置行数
  var fontLineStyle = {};
  fontLineStyle = {
    maxWidth: '80px',
    overflow: 'hidden',
    // whiteSpace: lineNum === 1 ? 'nowrap' : 'none',
    textOverflow: 'ellipsis',
    display: '-webkit-box',
    WebkitLineClamp: lineNum,
    WebkitBoxOrient: 'vertical'
  };
  var fontAllStyle = (0, _extends2["default"])({}, fontStyle, fontLineStyle);
  return /*#__PURE__*/React.createElement("div", {
    ref: ref,
    className: "dc-grid-nav",
    style: {
      gridTemplateColumns: "repeat(" + columns + ", 1fr)"
    }
  }, dataSourceSetting.map(function (item, index) {
    var _item$rightText;
    return item ? /*#__PURE__*/React.createElement("a", {
      key: index,
      href: item.link || '#',
      className: "grid-item"
    }, /*#__PURE__*/React.createElement("img", {
      src: item.icon || 'https://qcloudimg.tencent-cloud.cn/raw/fe54a986a821473655ba20afe30a543a.png',
      alt: item.title || '导航',
      style: iconStyle,
      className: "dc-grid-nav-item-img"
    }), /*#__PURE__*/React.createElement("span", {
      style: fontAllStyle,
      className: "dc-grid-nav-item-title"
    }, item.title || '无标题'), item.rightText ? /*#__PURE__*/React.createElement("div", {
      className: "dc-grid-nav-item-right"
    }, /*#__PURE__*/React.createElement("img", {
      src: _right["default"],
      className: "dc-grid-nav-item-right-img"
    }), /*#__PURE__*/React.createElement("span", {
      className: "dc-grid-nav-item-right-title"
    }, (_item$rightText = item.rightText) !== null && _item$rightText !== void 0 ? _item$rightText : '右侧')) : '') : null;
  }));
};
var GridNav = /*#__PURE__*/(0, _react.forwardRef)(ExampleComponent);
GridNav.displayName = 'GridNav';
var _default = exports["default"] = GridNav;