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,
    };

    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;
        }
    }
}