import template from "./Pagination.html";

  import style from "antd/lib/pagination/style/index.css";

  
  class Pagination {
  

      useModules = ["esNgAntd"];
  

      template = template;
  
      props = {
          defaultCurrent: Number,
          current: Number,
          total: Number,
          defaultPageSize: Number,
          pageSize: Number,
          onChange: Function,
          onShowSizeChange: Function,
          showQuickJumper: Boolean,
          showSizeChanger: Boolean,

          size: String,

      };
  
      state = {
          total: null,
          current: null,
          pageSize: null,
          pageNum: null,
          pageNumList: null,
      };
  
      constructor() {

          esNgAntd.createStyle("ant-pagination", style);

          this.state.total = Number(this.props.total || 0);
          this.state.current = Number(this.props.current || this.props.defaultCurrent || 1);
          this.state.pageSize = this.props.pageSize || this.props.defaultPageSize || 10;
          this.state.pageNum = this.getPageNum();
          this.state.pageNumList = Array(this.state.pageNum)
              .fill(0)
              .map((v, i) => i + 1);
      }
  
      getPageNum() {
          return Math.ceil(this.state.total / (this.props.pageSize || this.props.defaultPageSize || 10)) || 1;
      }
  
      handleNext() {
          if (this.state.current === this.state.pageNum) {
              return false;
          }
          this.handleClick(++this.state.current);
      }
  
      getPopupContainer() {
          return $element[0].querySelector(".ant-pagination-options");
      }
  
      handlePrev() {
          if (this.state.current === 1) {
              return false;
          }
          this.handleClick(--this.state.current);
      }
  
      handleClick(value) {
          this.state.current = value;
          // 更新回调
          this.props.onChange({
              page: this.state.current,
              pageSize: this.state.pageSize,
          });
      }
  
      handleChange() {
          let current = this.state.current;
          if (this.state.current > this.state.pageNum) {
              current = this.state.pageNum;
          } else if (this.state.current < 1) {
              current = 1;
          }
          this.props.onChange({
              page: current,
              pageSize: this.state.pageSize,
          });
      }
  
      handleSelectChange(value) {
          this.state.current = 1;
          this.state.pageSize = parseInt(value);
          this.handleChange();
      }
      
      getCurrent(number) {
          if (number > this.state.pageNum) {
              return this.state.pageNum;
          }
          if (number < 1) {
              return 1;
          }
          return parseInt(number);
      }
  

      setCurrent(value) {

          if (!value) {
              return;
          }
          this.state.current = this.getCurrent(value);
          this.handleChange();

      }
  
      handleBlur(event) {
          this.setCurrent(event.target.value);

          event.target.value = null;
      }

  
      onKeyPress(event) {
          if (event.keyCode === 13 || event.keyCode === 32) {
              this.setCurrent(event.target.value);
              event.target.value = null;
          }
      }

  }