"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 _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _lodash = require("lodash");

var _moment = _interopRequireDefault(require("moment"));

var _next = require("@alifd/next");

var _title = _interopRequireDefault(require("../title"));

var _context = _interopRequireDefault(require("../context"));

var _Utils = require("../Utils");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/**
 * 轮播表格
 *
 * @class CarouselTable
 * @extends {Component<ICarouselTable, IState>}
 */
var CarouselTable = /*#__PURE__*/function (_Component) {
  (0, _inheritsLoose2["default"])(CarouselTable, _Component);

  function CarouselTable(props) {
    var _this;

    _this = _Component.call(this, props) || this;
    _this.containerRef = void 0;
    _this.headerRef = void 0;
    _this.titleRef = void 0;

    _this.handlerResize = function () {
      var containerDom = _this.containerRef.current;
      var titleDom = _this.titleRef.current;
      if (!containerDom) return;
      var containerHeight = containerDom.clientHeight;
      var titleHeight = titleDom ? (0, _Utils.Dimension)(titleDom) : 0;

      if (containerHeight !== _this.state.containerHeight) {
        _this.setState({
          containerHeight: containerHeight,
          titleHeight: titleHeight
        });
      }
    };

    _this.state = {
      containerHeight: 0,
      titleHeight: 0
    };
    _this.containerRef = /*#__PURE__*/_react["default"].createRef();
    _this.titleRef = /*#__PURE__*/_react["default"].createRef();
    _this.headerRef = /*#__PURE__*/_react["default"].createRef();
    return _this;
  }

  var _proto = CarouselTable.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this.handlerResize();
    window.addEventListener('resize', this.handlerResize);
  };

  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
    return !(0, _lodash.isEqual)(nextProps.dataSource, this.props.dataSource) || !(0, _lodash.isEqual)(nextState.containerHeight, this.state.containerHeight);
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    window.removeEventListener('resize', this.handlerResize);
  }
  /**
   * resize
   *
   * @memberof CarouselTable
   */
  ;

  _proto.render = function render() {
    var _cssPrefix = this.context._cssPrefix;
    var _this$props = this.props,
        className = _this$props.className,
        title = _this$props.title,
        _this$props$dataSourc = _this$props.dataSource,
        dataSource = _this$props$dataSourc === void 0 ? [] : _this$props$dataSourc,
        universalStyle = _this$props.universalStyle,
        global = _this$props.global,
        _this$props$sliderOpt = _this$props.sliderOptions,
        sliderOptions = _this$props$sliderOpt === void 0 ? {} : _this$props$sliderOpt,
        headerOptions = _this$props.headerOptions,
        _this$props$titleOpti = _this$props.titleOptions,
        titleOptions = _this$props$titleOpti === void 0 ? {
      align: 'left',
      textStyle: {
        marginBottom: 12
      }
    } : _this$props$titleOpti,
        rowOptions = _this$props.rowOptions,
        _this$props$column = _this$props.column,
        column = _this$props$column === void 0 ? [] : _this$props$column,
        _this$props$emptyCont = _this$props.emptyContent,
        emptyContent = _this$props$emptyCont === void 0 ? /*#__PURE__*/_react["default"].createElement("div", {
      className: _cssPrefix + "carousel-table-empty"
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: _cssPrefix + "iconfont-ability",
      dangerouslySetInnerHTML: {
        __html: '&#xe836;'
      }
    }), "\u6682\u65E0\u4EFB\u4F55\u6570\u636E") : _this$props$emptyCont; // const { containerHeight, titleHeight } = this.state;

    var _sliderOptions$slides = sliderOptions.slidesToShow,
        slidesToShow = _sliderOptions$slides === void 0 ? 1 : _sliderOptions$slides,
        _sliderOptions$autopl = sliderOptions.autoplay,
        autoplay = _sliderOptions$autopl === void 0 ? true : _sliderOptions$autopl;
    var oddBackgroundColor = (0, _lodash.get)(rowOptions, 'oddBackgroundColor', '#112854');
    var evenBackgroundColor = (0, _lodash.get)(rowOptions, 'evenBackgroundColor', 'transparent');
    var width = (0, _lodash.get)(universalStyle, 'width', '100%'); // const height = get(universalStyle, 'height', '100%');
    // const heightRate = get(headerOptions, 'heightRate', (1 / (slidesToShow + 1)) * 100);

    var backgroundColor = (0, _lodash.get)(headerOptions, 'universalStyle.backgroundColor', 'transparent');
    var headerHeight = (0, _lodash.get)(headerOptions, 'universalStyle.height', 40); // (containerHeight - titleHeight) * (heightRate / 100);

    var rowHeight = (0, _lodash.get)(rowOptions, 'height', 40); // (containerHeight - titleHeight - headerHeight) / slidesToShow;

    var headerNodes = column.map(function (item) {
      var key = item.key,
          alias = item.alias,
          _item$textStyle = item.textStyle,
          textStyle = _item$textStyle === void 0 ? {} : _item$textStyle;
      var widthRate = (0, _lodash.get)(item, 'widthRate', 100 / column.length);
      return /*#__PURE__*/_react["default"].createElement(_title["default"], (0, _extends2["default"])({
        key: key
      }, headerOptions, {
        textStyle: (0, _extends2["default"])({}, (0, _lodash.get)(global, 'textStyle', {}), textStyle),
        className: (0, _classnames["default"])(_cssPrefix + "carousel-table-column", (0, _lodash.get)(headerOptions, 'className')),
        universalStyle: (0, _extends2["default"])({
          width: widthRate + "%"
        }, (0, _lodash.get)(headerOptions, 'universalStyle', {}))
      }), alias);
    });
    var rowNodes = dataSource.map(function (data, i) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        key: i,
        className: _cssPrefix + "carousel-table-row",
        style: {
          backgroundColor: i % 2 ? evenBackgroundColor : oddBackgroundColor
        }
      }, column.map(function (col) {
        var _ref;

        var key = col.key,
            type = col.type,
            _col$format = col.format,
            format = _col$format === void 0 ? 'HH:mm:ss' : _col$format,
            widthRate = col.widthRate,
            _col$textStyle = col.textStyle,
            textStyle = _col$textStyle === void 0 ? {} : _col$textStyle,
            align = col.align,
            cell = col.cell;
        var content;

        if (cell) {
          content = cell(data[key], i, data) || '-';
        } else if (key === '$index') {
          content = i + 1;
        } else if (type === 'time') {
          content = (0, _moment["default"])(data[key]).format(format);
        } else if (type === 'data') {
          content = (0, _lodash.isNull)(data[key]) || (0, _lodash.isUndefined)(data[key]) ? '-' : (0, _Utils.NWC)(data[key]);
        } else {
          content = (0, _lodash.isNull)(data[key]) || (0, _lodash.isUndefined)(data[key]) ? '-' : data[key];
        }

        return /*#__PURE__*/_react["default"].createElement(_title["default"], {
          key: key,
          className: (0, _classnames["default"])([_cssPrefix + "carousel-table-item", (_ref = {}, _ref[_cssPrefix + "carousel-table-index"] = key === '$index', _ref[_cssPrefix + "circle"] = key === '$index' && !cell, _ref[_cssPrefix + "data"] = key === '$index' || type === 'data', _ref)]),
          textStyle: (0, _extends2["default"])({}, (0, _lodash.get)(global, 'textStyle', {}), textStyle),
          align: align || (0, _lodash.get)(headerOptions, 'align'),
          universalStyle: {
            width: widthRate + "%",
            height: rowHeight + "px"
          }
        }, content);
      }));
    });
    return /*#__PURE__*/_react["default"].createElement("div", {
      ref: this.containerRef,
      className: (0, _classnames["default"])(className, _cssPrefix + "carousel-table"),
      style: {
        width: width,
        // height: height,
        backgroundColor: (0, _lodash.get)(universalStyle, 'backgroundColor')
      }
    }, title && /*#__PURE__*/_react["default"].createElement(_title["default"], (0, _extends2["default"])({}, titleOptions, {
      forwardRef: this.titleRef,
      className: (0, _classnames["default"])(_cssPrefix + "carousel-table-title", _cssPrefix + "main-chart-title", (0, _lodash.get)(titleOptions, 'className')),
      align: (0, _lodash.get)(titleOptions, 'align', 'left')
    }), title), dataSource.length > 0 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
      ref: this.headerRef,
      className: _cssPrefix + "carousel-table-header",
      style: {
        backgroundColor: backgroundColor,
        height: headerHeight
      }
    }, headerNodes), dataSource.length > 0 && (dataSource.length > slidesToShow ? /*#__PURE__*/_react["default"].createElement(_next.Slider // style={{
    //   height: `${containerHeight - titleHeight - headerHeight}px`
    // }}
    , (0, _extends2["default"])({
      arrows: false,
      dots: false,
      draggable: false,
      autoplay: autoplay,
      slideDirection: "ver",
      slidesToShow: slidesToShow
    }, sliderOptions, {
      className: _cssPrefix + "carousel-table-body"
    }), rowNodes) : /*#__PURE__*/_react["default"].createElement("div", {
      className: _cssPrefix + "carousel-table-body" // style={{
      //   height: `${containerHeight - titleHeight - headerHeight}px`
      // }}

    }, rowNodes))) : emptyContent);
  };

  return CarouselTable;
}(_react.Component);

CarouselTable.contextType = _context["default"];
var _default = CarouselTable;
exports["default"] = _default;