import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { useState, useEffect } from 'react';
import style from "./index.module.scss";
import { getSolitaireData } from "../../api/base";
;
var Solitaire = function Solitaire(_ref) {
  var ideaId = _ref.ideaId;
  var DEFAULT_AVATAR_URL = 'https://img.maimairen.com/low-code/ali/material-icon/default_avatar.png';
  var EMPTY_LIST_ICON = 'https://img.maimairen.com/low-code/ali/material-icon/list_empty_icon.png';
  var EMPTY_TIPS = '暂时没有人接龙';
  // 无ideaId传入只会存在编辑器环境，此时展示模拟数据
  var initUserListData = ideaId ? [] : [{
    submitNickName: '微信用户1',
    submitAvatar: DEFAULT_AVATAR_URL,
    createTime: new Date().getTime() / 1000 - 3600 * 2
  }, {
    submitNickName: '微信用户2',
    submitAvatar: DEFAULT_AVATAR_URL,
    createTime: new Date().getTime() / 1000 - 3600 * 24
  }, {
    submitNickName: '微信用户3',
    submitAvatar: DEFAULT_AVATAR_URL,
    createTime: new Date().getTime() / 1000 - 3600 * 24 * 4
  }];
  var initTotal = initUserListData.length;
  var _useState = useState(initUserListData),
    userListData = _useState[0],
    setUserListData = _useState[1];
  var _useState2 = useState(initTotal),
    total = _useState2[0],
    setTotal = _useState2[1];
  var pageNum = 1;
  var pageSize = 5;
  useEffect(function () {
    if (ideaId) {
      fetchRecordData();
    }
  }, [ideaId]);

  // 查看剩余全部数据
  var getMoreData = function getMoreData() {
    pageNum += 1;
    pageSize = total - pageSize;
    fetchRecordData();
  };
  var fetchRecordData = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var _yield$getSolitaireDa, code, data, list, page, _total, _allList;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return getSolitaireData({
              ideaId: ideaId,
              pageNum: pageNum,
              pageSize: pageSize
            });
          case 2:
            _yield$getSolitaireDa = _context.sent;
            code = _yield$getSolitaireDa.code;
            data = _yield$getSolitaireDa.data;
            if (code === 10200 && data) {
              list = data.list, page = data.page;
              _total = page.total || 0;
              _allList = list ? userListData.concat(list) : userListData;
              setTotal(_total);
              setUserListData(_allList);
            }
          case 6:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function fetchRecordData() {
      return _ref2.apply(this, arguments);
    };
  }();

  // 获取用户参与时间
  var getUserParticipationTime = function getUserParticipationTime(time) {
    var _currentTime = Math.round(new Date().getTime() / 1000);
    var _diffTime = _currentTime - time;
    var _diffM = _diffTime > 0 && _diffTime / 60 || 0;
    var _diffHour = _diffM >= 60 && _diffM / 60 || 0;
    var _diffDay = _diffHour >= 24 && _diffHour / 24 || 0;
    if (_diffTime <= 0) {
      return '刚刚';
    } else if (_diffM > 0 && _diffM < 60) {
      var showM = Math.round(_diffM);
      return showM + "\u5206\u949F\u4E4B\u524D";
    } else if (_diffHour > 0 && _diffHour < 24) {
      var showHour = Math.round(_diffHour);
      return showHour + "\u5C0F\u65F6\u4E4B\u524D";
    } else if (_diffDay > 0) {
      var showDay = Math.round(_diffDay);
      return showDay + "\u5929\u4E4B\u524D";
    } else {
      return '';
    }
  };

  // 获取用户排序
  var getUserIndex = function getUserIndex(index) {
    var _showIndex = total - index;
    if (_showIndex < 100 && _showIndex > 10) {
      return "# 0" + _showIndex;
    } else if (_showIndex < 10) {
      return "# 00" + _showIndex;
    } else {
      return "# " + _showIndex;
    }
  };

  // 有更多数据底部
  var solitaireFooterEl = function solitaireFooterEl() {
    return /*#__PURE__*/React.createElement("div", {
      className: style.solitaire_ft
    }, "\u6709", /*#__PURE__*/React.createElement("span", null, total), "\u4EBA\u53C2\u4E0E\u6BCF\u65E5\u5065\u5EB7\u7533\u62A5", userListData.length < total ? /*#__PURE__*/React.createElement("span", {
      onClick: function onClick() {
        return getMoreData();
      }
    }, "\uFF0C\u67E5\u770B\u5168\u90E8") : '');
  };

  // 接龙记录列表
  var solitaireListEl = function solitaireListEl() {
    return /*#__PURE__*/React.createElement("div", {
      className: style.solitaire_content
    }, /*#__PURE__*/React.createElement("div", {
      className: style.solitaire_list
    }, userListData.length > 0 && userListData.map(function (item, index) {
      return /*#__PURE__*/React.createElement("div", {
        key: item.submitNickName + index,
        className: style.solitaire_item
      }, /*#__PURE__*/React.createElement("div", {
        className: style.solitaire_item_avatar
      }, /*#__PURE__*/React.createElement("img", {
        src: item.submitAvatar || DEFAULT_AVATAR_URL,
        alt: ""
      })), /*#__PURE__*/React.createElement("div", {
        className: style.solitaire_item_info
      }, /*#__PURE__*/React.createElement("p", {
        className: style.solitaire_item_name
      }, item.submitNickName || '微信用户'), /*#__PURE__*/React.createElement("p", {
        className: style.solitaire_item_index
      }, getUserIndex(index))), /*#__PURE__*/React.createElement("p", {
        className: style.solitaire_item_tips
      }, getUserParticipationTime(item.createTime), " \u53C2\u4E0E\u63A5\u9F99"));
    })), total > 5 && solitaireFooterEl());
  };

  // 无接龙记录
  var solitaireEmptyEl = function solitaireEmptyEl() {
    return /*#__PURE__*/React.createElement("div", {
      className: style.solitaire_empty
    }, /*#__PURE__*/React.createElement("div", {
      className: style.solitaire_empty_img
    }, /*#__PURE__*/React.createElement("img", {
      src: EMPTY_LIST_ICON,
      alt: ""
    })), /*#__PURE__*/React.createElement("p", {
      className: style.solitaire_empty_tips
    }, EMPTY_TIPS));
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: style.solitaire_wrap
  }, userListData.length > 0 ? solitaireListEl() : solitaireEmptyEl()));
};
export default Solitaire;