import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import React__default, { useState, useRef, useEffect, useMemo } from 'react';
import GlobalContext from '@para-ui/core/GlobalContext';
import { $ as $prefixCls, a as $rcPrefixCls } from '../_verture/constant-66aa48a1.js';
import { TextField } from '../TextField/index.js';
import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
import Select from '../Select/index.js';
import DoubleLeft from '@iam-com/icons/DoubleLeft';
import NavigateBefore from '@iam-com/icons/Left';
import PaginationCom from 'rc-pagination';
import Right from '@iam-com/icons/Right';
import DoubleRight from '@iam-com/icons/DoubleRight';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
import '../_verture/unsupportedIterableToArray-cb478f24.js';
import '../_verture/typeof-498dd2b1.js';
import '../_verture/tslib.es6-55ed4bd2.js';
import '../Label/index.js';
import '../Help/index.js';
import '../Tooltip/index.js';
import 'rc-tooltip';
import 'rc-tooltip/lib/placements';
import 'clsx';
import '@iam-com/icons/Help';
import '@iam-com/lib';
import '@iam-com/icons/PreviewClose';
import '@iam-com/icons/PreviewOpen';
import '@iam-com/icons/CloseCircle';
import '../AutoTips/index.js';
import '../Loading/index.js';
import '@iam-com/icons/LoadingF';
import '../HelperText/index.js';
import '../_verture/useGlobalProps-1b846a65.js';
import '../_verture/index-fac03ce3.js';
import 'rc-dropdown';
import '../_verture/usePopupContainer-87febeb9.js';
import 'dayjs';
import '../_verture/defineProperty-62acccfc.js';
import '../_verture/toConsumableArray-81040c9e.js';
import '../Empty/index.js';
import '@iam-com/icons/Close';
import '@iam-com/icons/Down';
import '@iam-com/icons/Check';
import '@iam-com/icons/Search';
import '../Popover/index.js';

var en = {
  total: 'Total {total}',
  linePerPage: 'Lines per page',
  currentPage: 'Current page {currentPage}',
  jumpTo: 'Jump to',
  page: 'page'
};

var zh = {
  total: '共{total}条',
  linePerPage: '每页行数',
  currentPage: '当前第{currentPage}页',
  jumpTo: '跳转到',
  page: '页'
};

var localeJson = {
  zh: zh,
  en: en
};

var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2021/10/26 13:57\n* @description 分页样式\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-pagination {\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  color: rgba(46, 55, 67, 0.7);\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  opacity: 1;\n}\n.paraui-v3-pagination.paraui-v3-pagination-over {\n  overflow: hidden;\n  height: 32px;\n  opacity: 0;\n  transition: all 0.3s;\n}\n.paraui-v3-pagination.paraui-v3-pagination-no-left-arrow > .pagination-content {\n  padding-left: 0;\n}\n.paraui-v3-pagination.paraui-v3-pagination-no-right-arrow > .pagination-content {\n  padding-right: 0;\n}\n.paraui-v3-pagination > .pagination-space {\n  margin-right: 24px;\n}\n.paraui-v3-pagination > .pagination-space:last-child {\n  margin-right: 0;\n}\n.paraui-v3-pagination > .current-page > .current-page-num {\n  color: rgb(46, 55, 67);\n  margin-right: 4px;\n  margin-left: 4px;\n}\n.paraui-v3-pagination > .current-page > .current-page-sign {\n  margin-right: 3px;\n}\n.paraui-v3-pagination > .page-line-memo > span {\n  display: inline-block;\n  margin-right: 8px;\n  vertical-align: middle;\n}\n.paraui-v3-pagination > .page-line-memo .page-line-select {\n  min-width: 80px;\n  width: inherit;\n  vertical-align: middle;\n}\n.paraui-v3-pagination > .pagination-content {\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  border-radius: 4px;\n  height: 32px;\n  line-height: 30px;\n  padding: 0 12px;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v3-pagination > .pagination-content > .left-page, .paraui-v3-pagination > .pagination-content > .right-page {\n  display: inline-block;\n}\n.paraui-v3-pagination > .pagination-content > .left-page > div, .paraui-v3-pagination > .pagination-content > .right-page > div {\n  display: inline-block;\n  line-height: 0;\n  vertical-align: top;\n  cursor: pointer;\n  width: 20px;\n  height: 20px;\n  border-radius: 2px;\n  margin-right: 8px;\n  position: relative;\n  top: 5px;\n}\n.paraui-v3-pagination > .pagination-content > .left-page > div.disabled-btn, .paraui-v3-pagination > .pagination-content > .right-page > div.disabled-btn {\n  cursor: not-allowed;\n}\n.paraui-v3-pagination > .pagination-content > .left-page > div.disabled-btn > svg, .paraui-v3-pagination > .pagination-content > .right-page > div.disabled-btn > svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-pagination > .pagination-content > .left-page > div.disabled-btn:hover, .paraui-v3-pagination > .pagination-content > .right-page > div.disabled-btn:hover {\n  background-color: white;\n}\n.paraui-v3-pagination > .pagination-content > .left-page > div.disabled-btn:hover > svg, .paraui-v3-pagination > .pagination-content > .right-page > div.disabled-btn:hover > svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-pagination > .pagination-content > .left-page > div:last-child, .paraui-v3-pagination > .pagination-content > .right-page > div:last-child {\n  margin-right: 0;\n}\n.paraui-v3-pagination > .pagination-content > .left-page > div:hover, .paraui-v3-pagination > .pagination-content > .right-page > div:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-pagination > .pagination-content > .left-page > div:hover > svg, .paraui-v3-pagination > .pagination-content > .right-page > div:hover > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-pagination > .pagination-content > .left-page > div > svg, .paraui-v3-pagination > .pagination-content > .right-page > div > svg {\n  font-size: 16px;\n  position: relative;\n  top: 2px;\n  left: 2px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-pagination > .pagination-content > .left-page {\n  margin-right: 8px;\n}\n.paraui-v3-pagination > .pagination-content > .component-pagination {\n  height: 100%;\n  display: inline-block;\n  box-shadow: none;\n  vertical-align: top;\n  line-height: 30px;\n}\n.paraui-v3-pagination > .pagination-content > .component-pagination > li {\n  min-width: 20px;\n  height: 20px;\n  line-height: 20px;\n  display: inline-block;\n  text-align: center;\n  cursor: pointer;\n  border-radius: 2px;\n  padding: 0 5px;\n  margin: 0 3px;\n}\n.paraui-v3-pagination > .pagination-content > .component-pagination > li:first-child, .paraui-v3-pagination > .pagination-content > .component-pagination > li:last-child, .paraui-v3-pagination > .pagination-content > .component-pagination > li.component-pagination-next {\n  display: none;\n}\n.paraui-v3-pagination > .pagination-content > .component-pagination > li:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-pagination > .pagination-content > .component-pagination > li.component-pagination-item-active {\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-pagination > .pagination-content > .right-page {\n  margin-left: 8px;\n}\n.paraui-v3-pagination > .skip-page-memo {\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-pagination > .skip-page-memo > span {\n  margin-right: 8px;\n}\n.paraui-v3-pagination > .skip-page-memo > .skip-page-text-field {\n  width: 65px;\n}\n.paraui-v3-pagination > .skip-page-memo > .skip-page-text-field .right-icon {\n  margin-right: 8px;\n}\n.paraui-v3-pagination > .skip-page-memo > .skip-page-text-field .text-field-content .text-field-content-within .text-field-content-within-input input {\n  padding-left: 8px;\n  padding-right: 4px;\n}\n.paraui-v3-pagination > .skip-page-memo > .skip-page-text-field .text-field-content .text-field-content-within .text-field-content-within-input .text-field-label-placeholder {\n  padding: 0 8px;\n}";
styleInject(css_248z);

var Pagination = function Pagination(props) {
  var className = props.className,
    style = props.style,
    _props$type = props.type,
    type = _props$type === void 0 ? 'simple' : _props$type,
    _props$autoType = props.autoType,
    autoType = _props$autoType === void 0 ? true : _props$autoType,
    _props$total = props.total,
    total = _props$total === void 0 ? 0 : _props$total,
    totalRender = props.totalRender,
    _props$rowsPerPage = props.rowsPerPage,
    rowsPerPage = _props$rowsPerPage === void 0 ? [10, 20, 30] : _props$rowsPerPage,
    _props$flippingArrow = props.flippingArrow,
    flippingArrow = _props$flippingArrow === void 0 ? ['first', 'prev', 'last', 'next'] : _props$flippingArrow,
    _props$currentRowsPer = props.currentRowsPerPage,
    currentRowsPerPage = _props$currentRowsPer === void 0 ? 10 : _props$currentRowsPer,
    _props$page = props.page,
    page = _props$page === void 0 ? 1 : _props$page,
    _props$pageMaxLimit = props.pageMaxLimit,
    pageMaxLimit = _props$pageMaxLimit === void 0 ? true : _props$pageMaxLimit,
    skipFunc = props.skipFunc,
    changePage = props.changePage,
    changeRowsPerPage = props.changeRowsPerPage,
    getPopupContainer = props.getPopupContainer;
  var _React$useContext = React__default.useContext(GlobalContext),
    language = _React$useContext.language,
    locale = _React$useContext.locale;
  var intl = useFormatMessage('Pagination', localeJson);
  var _useState = useState(currentRowsPerPage),
    _useState2 = _slicedToArray(_useState, 2),
    currentRowsPerPageCom = _useState2[0],
    setCurrentRowsPerPageCom = _useState2[1]; // 当前选中每页行数
  var _useState3 = useState([]),
    _useState4 = _slicedToArray(_useState3, 2),
    rowsPerPageCom = _useState4[0],
    setRowsPerPageCom = _useState4[1]; // 每页显示的行数
  var _useState5 = useState(page),
    _useState6 = _slicedToArray(_useState5, 2),
    pageCom = _useState6[0],
    setPageCom = _useState6[1]; // 当前页数
  var _useState7 = useState(),
    _useState8 = _slicedToArray(_useState7, 2),
    totalPage = _useState8[0],
    setTotalPage = _useState8[1]; // 总页数
  var _useState9 = useState(),
    _useState10 = _slicedToArray(_useState9, 2),
    skipValue = _useState10[0],
    setSkipValue = _useState10[1]; // 跳转页数
  var _useState11 = useState(),
    _useState12 = _slicedToArray(_useState11, 2),
    typeCom = _useState12[0],
    setTypeCom = _useState12[1]; // 组件类型
  var refDom = useRef();
  var constData = useRef({});
  constData.current.type = type;
  constData.current.autoType = autoType;
  useEffect(function () {
    return function () {
      window.removeEventListener("resize", changeSize);
      clearTimeout(constData.current.timer);
      clearTimeout(constData.current.timerClass);
      clearTimeout(constData.current.changePagination);
    };
  }, []);
  useEffect(function () {
    setTypeCom(type);
  }, [type]);
  useEffect(function () {
    setPageCom(page);
  }, [page]);
  // 当前选中每页行数
  useEffect(function () {
    setCurrentRowsPerPageCom(currentRowsPerPage);
  }, [currentRowsPerPage]);
  // 下拉页数列表
  useEffect(function () {
    var arr = [];
    for (var i = 0, l = rowsPerPage.length; i < l; i++) {
      var item = rowsPerPage[i];
      var arrItem = {
        label: item.toString(),
        value: item
      };
      arr.push(arrItem);
    }
    setRowsPerPageCom(arr);
  }, [props.rowsPerPage]);
  useEffect(function () {
    var num = Number(totalPage);
    if (pageMaxLimit && pageCom > num && num !== pageCom) {
      setPageCom(num);
    }
  }, [pageCom, totalPage, pageMaxLimit]);
  useEffect(function () {
    var num = Math.ceil(total / currentRowsPerPageCom);
    // props.page 防止外部传入自定义页面,设置无效(表格分页)
    setTotalPage(num || props.page || 1);
  }, [currentRowsPerPageCom, total]);
  useEffect(function () {
    if (type === 'complex' && autoType) {
      changeSize();
      // 复杂模式,且开启自适应模式
      window.addEventListener("resize", changeSize);
    } else {
      window.removeEventListener("resize", changeSize);
      setTypeCom(type);
    }
  }, [type, autoType]);
  useEffect(function () {
    if (constData.current.type === 'complex' && constData.current.autoType) {
      changePagination();
    }
  }, [total, currentRowsPerPageCom, pageCom, language]);
  /**
   * 改变了分页数据,需要判断当前是否换行了
   * */
  var changePagination = function changePagination() {
    clearTimeout(constData.current.changePagination);
    constData.current.changePagination = setTimeout(function () {
      var current = refDom.current;
      var skipDom = current && current.querySelector('.skip-page-memo');
      // 简单模式,不存在跳转
      if (skipDom) {
        // 复杂模式,换行了 -> 变成简单模式
        if (current.offsetTop !== skipDom.offsetTop) {
          setTypeCom('simple');
        }
      } else {
        setTypeCom('complex');
        // 简单模式 -> 复杂, 需要再次判断是否换行了
        changePagination();
      }
    });
  };
  /** 改变屏幕大小 */
  var changeSize = function changeSize() {
    clearTimeout(constData.current.timer);
    clearTimeout(constData.current.timerClass);
    var current = refDom.current;
    if (!current) return;
    current.classList.add($prefixCls + '-pagination-over');
    constData.current.timer = setTimeout(function () {
      if (!current) return;
      var skipDom = current.querySelector('.skip-page-memo');
      // 简单模式,不存在跳转
      if (skipDom) {
        // 复杂模式,换行了 -> 变成简单模式
        if (current.offsetTop !== skipDom.offsetTop) {
          setTypeCom('simple');
        }
      } else {
        setTypeCom('complex');
        // 简单模式 -> 复杂, 需要再次判断是否换行了
        changeSize();
      }
      constData.current.timerClass = setTimeout(function () {
        current.classList.remove($prefixCls + '-pagination-over');
      }, 200);
    }, 200);
  };
  /**
   * 是否存在当前类型
   * */
  var notLayout = function notLayout(layout) {
    return constData.current.type instanceof Array && constData.current.type.indexOf(layout) === -1;
  };
  // 点击分页
  var clickPage = function clickPage(type) {
    return function (value) {
      var num = pageCom;
      switch (type) {
        case "first":
          if (pageCom === 1) return;
          num = 1;
          break;
        case "prev":
          if (pageCom === 1) return;
          num--;
          break;
        case "last":
          if (pageCom === totalPage) return;
          num = totalPage;
          break;
        case "next":
          if (pageCom === totalPage) return;
          num++;
          break;
        case "pagination":
          num = value;
          break;
      }
      if (num !== undefined) setPageCom(num);
      changePage && changePage(num);
    };
  };
  // 点击每页行数下拉
  var clickRowsPerPage = function clickRowsPerPage(num) {
    if (num === currentRowsPerPageCom) return;
    setCurrentRowsPerPageCom(num);
    if (changeRowsPerPage) changeRowsPerPage(num);
  };
  // 鼠标按下
  var keyPress = function keyPress(event) {
    var arr = ['E', 'e', '.', '-'];
    if (arr.indexOf(event.key) !== -1) {
      event.preventDefault();
    }
  };
  // 回车事件
  var keyUp = function keyUp(event) {
    if (event.keyCode === 13) {
      var num = parseInt(skipValue && skipValue.toString() || '0');
      if (num <= 0) {
        num = 1;
        setSkipValue(num);
      }
      if (num > Number(totalPage)) {
        num = Number(totalPage);
        setSkipValue(num);
      }
      // 回车事件
      if (skipFunc) skipFunc(num, skipValue);
      setPageCom(num);
      changePage && changePage(num);
    }
  };
  // 改变输入框
  var changeSkipValue = function changeSkipValue(event) {
    setSkipValue(event.target.value);
  };
  /* 总数量 */
  var TotalMemo = useMemo(function () {
    if (typeCom === 'simple' || notLayout('sizes')) {
      return null;
    }
    var _ref = totalRender || {},
      _ref$realTotal = _ref.realTotal,
      realTotal = _ref$realTotal === void 0 ? 0 : _ref$realTotal,
      _ref$render = _ref.render,
      render = _ref$render === void 0 ? null : _ref$render;
    // 共{total}条
    var rawTotal = jsx("div", Object.assign({
      className: "total-num pagination-space"
    }, {
      children: intl({
        id: 'total'
      }, {
        total: total
      })
    }));
    var realTotalRender = jsx("div", Object.assign({
      className: "total-num pagination-space"
    }, {
      children: render
    }));
    if (!realTotal) return rawTotal;
    return total < realTotal ? realTotalRender : rawTotal;
  }, [total, totalRender, language, locale, typeCom]);
  /* 每页行数 */
  var PageLineMemo = useMemo(function () {
    if (notLayout('pageRow')) {
      return null;
    }
    return jsxs("div", Object.assign({
      className: "page-line-memo pagination-space"
    }, {
      children: [jsx("span", {
        children: intl({
          id: 'linePerPage'
        })
      }), jsx(Select, {
        className: 'page-line-select',
        size: "medium",
        value: currentRowsPerPageCom,
        list: rowsPerPageCom,
        hideErrorDom: true,
        onChange: clickRowsPerPage,
        allowClear: false,
        getPopupContainer: getPopupContainer
      })]
    }));
  }, [rowsPerPageCom, currentRowsPerPageCom, getPopupContainer, language, locale, typeCom]);
  /* 当前页面 */
  var CurrentPageMemo = useMemo(function () {
    if (notLayout('currentPage')) {
      return null;
    }
    var html = jsxs(React__default.Fragment, {
      children: [jsx("span", Object.assign({
        className: "current-page-num"
      }, {
        children: pageCom
      })), jsx("span", Object.assign({
        className: "current-page-sign"
      }, {
        children: "/"
      })), jsx("span", Object.assign({
        className: "current-page-last"
      }, {
        children: totalPage
      }))]
    }, 'fragment');
    return jsx("div", Object.assign({
      className: "current-page pagination-space"
    }, {
      children: intl({
        id: 'currentPage'
      }, {
        currentPage: html
      })
    }));
  }, [pageCom, totalPage, language, locale, typeCom]);
  /* 页码 */
  var PaginationMemo = useMemo(function () {
    if (notLayout('pager')) {
      return null;
    }
    var bol = constData.current.type instanceof Array && constData.current.type.indexOf('pager') !== -1;
    return jsxs("div", Object.assign({
      className: "pagination-content pagination-space"
    }, {
      children: [jsxs("div", Object.assign({
        className: "left-page"
      }, {
        children: [flippingArrow.indexOf('first') !== -1 && jsx("div", Object.assign({
          onClick: clickPage('first'),
          className: pageCom === 1 ? 'disabled-btn' : ''
        }, {
          children: jsx(DoubleLeft, {})
        })), flippingArrow.indexOf('prev') !== -1 && jsx("div", Object.assign({
          onClick: clickPage('prev'),
          className: pageCom === 1 ? 'disabled-btn' : ''
        }, {
          children: jsx(NavigateBefore, {})
        }))]
      })), (typeCom === 'complex' || bol) && jsx(PaginationCom, {
        prefixCls: $rcPrefixCls + '-pagination',
        current: pageCom,
        pageSize: currentRowsPerPageCom,
        total: total,
        jumpPrevIcon: '...',
        jumpNextIcon: '...',
        onChange: clickPage('pagination'),
        showTitle: false
      }), jsxs("div", Object.assign({
        className: "right-page"
      }, {
        children: [flippingArrow.indexOf('next') !== -1 && jsx("div", Object.assign({
          onClick: clickPage('next'),
          className: pageCom === totalPage ? 'disabled-btn' : ''
        }, {
          children: jsx(Right, {})
        })), flippingArrow.indexOf('last') !== -1 && jsx("div", Object.assign({
          onClick: clickPage('last'),
          className: pageCom === totalPage ? 'disabled-btn' : ''
        }, {
          children: jsx(DoubleRight, {})
        }))]
      }))]
    }));
  }, [total, pageCom, totalPage, currentRowsPerPageCom, typeCom, props.flippingArrow]);
  /* 跳转页数 */
  var SkipPageMemo = useMemo(function () {
    if (typeCom === 'simple' || notLayout('jumper')) {
      return null;
    }
    return jsxs("div", Object.assign({
      className: "skip-page-memo pagination-space"
    }, {
      children: [jsx("span", {
        children: intl({
          id: 'jumpTo'
        })
      }), jsx(TextField, {
        className: 'skip-page-text-field',
        size: "medium",
        type: "number",
        value: skipValue || '',
        onChange: changeSkipValue,
        rightIcon: intl({
          id: 'page'
        }),
        hideErrorDom: true,
        onKeyDown: keyPress,
        onKeyUp: keyUp
      })]
    }));
  }, [skipValue, totalPage, language, locale, typeCom]);
  // 处理class
  var handClass = function handClass() {
    var str = $prefixCls + '-pagination';
    if (flippingArrow.indexOf('first') === -1 && flippingArrow.indexOf('prev') === -1) str += ' ' + $prefixCls + '-pagination-no-left-arrow';
    if (flippingArrow.indexOf('next') === -1 && flippingArrow.indexOf('last') === -1) str += ' ' + $prefixCls + '-pagination-no-right-arrow';
    if (className) str += ' ' + className;
    return str;
  };
  return jsxs("div", Object.assign({
    className: handClass(),
    style: style,
    ref: refDom
  }, {
    children: [TotalMemo, CurrentPageMemo, PageLineMemo, PaginationMemo, SkipPageMemo]
  }));
};

export { Pagination, Pagination as default };
