import { LightningElement, track, api } from 'lwc';

export default class JzDataTablePaging extends LightningElement {
    @api name;
    @api options = {};

    connectedCallback(){
        this.initJzDataTablePaging(this.options);
    }

    @track
    config = {
        // 单页是否显示
        singlePageHide: true,
        // 总页数
        pageNum: 0,
        // 上一页Class
        prevClass: '',
        // 下一页Class
        nextClass: '',
        // 首页Class
        homeClass: '',
        // 尾页Class
        lastClass: '',
        // ul Class 根据类型不同显示不同样式
        ulClass: '',
        // 页码列表 {dataIndex：页码  pagesLiClass：页码所在对样式}
        pagesList: [],
    }

    @track
	pagingConfig = {
        // 容器名
        elementName: '',
		// 样式类型  1或2
		type: 1,
		// 当前页
		pageIndex: 1,
		// 每页显示数量
		pageSize: 0,
		// 总条数
		total: 0,
		// 按钮数量
		pageCount: 9,
		// 上一页文字
		prevText: '',
		// 下一页文字
		nextText: '',
        // 首页文字
		homeText: '',
		// 尾页文字
		lastText: '',
		// 输入框跳转
		jumper: false,
		// 单页隐藏
		singlePageHide: true,
		// 是否禁用
		disabled: false,
		/**
		 * @description 按钮事件回调
		 * @param index [number] 当前页码
		 */
		currentChange: function (index) { },
	};

    ceshi(){
		let options01 = {
			elementName: 'pages',
			type: 1,
			pageIndex: 1,
			pageSize: 10,
			total: 100,
			pageCount: 5,
			jumper: true,
			singlePageHide: false,
			prevText: '上一页',
			nextText: '下一页',
            // 首页文字
            homeText: '首页',
            // 尾页文字
            lastText: '尾页',
			disabled: true,
			currentChange: function(index) {
				// console.log(index);
			}
		}
        this.initJzDataTablePaging(options01);
    }

    @api
    initJzDataTablePaging(options) {
        this.pagingConfig = {...this.pagingConfig, ...options};
        if (this.validate(this.pagingConfig)) {
            this.render();
        }
    };

    @api
    get getPage() {
        return {
            currentPage: this.pagingConfig.pageIndex,
            total: this.pagingConfig.total,
            pageSize: this.pagingConfig.pageSize
        };
    }

    // 提供初始化
    render = function () {
        // 总页数
        this.config.pageNum = Math.ceil(this.pagingConfig.total / this.pagingConfig.pageSize);
        // 单页隐藏
        if (this.config.pageNum === 1 && this.pagingConfig.singlePageHide){
            this.config.singlePageHide = true;
            return;
        } else {
            this.config.singlePageHide = false;
        }
        this.config.ulClass = "_pages _pages_" + this.pagingConfig.type;
        // 刷新分页控件内容
        this.refreshPaging(this.pagingConfig.pageIndex);
    };

    // 刷新分页控件内容
    refreshPaging(index){
        // 最大页码
        if (index > this.config.pageNum)
            index = this.config.pageNum;
        // 最小页码
        if (index <= 0)
            index = 1;

        this.pagingConfig.pageIndex = index;
        
        // 禁用上一页
        var prev_disabled = this.pagingConfig.pageIndex <= 1 ? ' _disabled_c ' : '';
        // 手势禁止
        if (this.pagingConfig.pageIndex <= 1 && this.pagingConfig.disabled)
            prev_disabled += ' _disabled ';
        // 首页样式
        if (this.pagingConfig.type <= 1) {
            this.config.homeClass = '_home' + prev_disabled;
        }
        // 上一页
        this.config.prevClass = '_prev_ ' + prev_disabled + (this.pagingConfig.prevText ? ' _prev' : '_iconfont iconzuo');
        // 区间值
        let between = this.getBetween();
        let pagesList = [];
        let pagesLi = {};
        let active;
        for (var i = 1; i <= this.config.pageNum; i++) {
            if (i >= between.min && i <= between.max) {
                active = "_pages_li_" + this.pagingConfig.type;
                active += i === this.pagingConfig.pageIndex ? " _active_" + this.pagingConfig.type : "";
                // 手势禁止
                if (i === this.pagingConfig.pageIndex && this.pagingConfig.disabled)
                    active += ' _disabled';
                pagesLi = {
                    'dataIndex': i,
                    'pagesLiClass': active
                }
                pagesList.push(pagesLi);
            }
        }
        this.config.pagesList = pagesList;

        // 禁用下一页
        var next_disabled = this.pagingConfig.pageIndex >= this.config.pageNum ? ' _disabled_c ' : '';
        // 手势禁止
        if (this.pagingConfig.pageIndex >= this.config.pageNum && this.pagingConfig.disabled)
            next_disabled += ' _disabled ';
        // 下一页
        this.config.nextClass = '_next_ ' + next_disabled + (this.pagingConfig.nextText ? ' _next' : ' _iconfont iconGroup-')
        // 尾页
        if (this.pagingConfig.type <= 1) {
            this.config.lastClass = '_last ' + next_disabled;
        }
    }

    //点击首页
    homeClick(){
        if (this.pagingConfig.pageIndex > 1) {
            this.refreshPaging(1);
            this.callback(1);
        }
    }
    //点击上一页
    prevClick(){
        if (this.pagingConfig.pageIndex - 1 > 0) {
            this.refreshPaging(this.pagingConfig.pageIndex - 1);
            this.callback(this.pagingConfig.pageIndex - 1);
        }
    }
    //区间值点击事件
    pagesClick(event){
        let pagesVal = event.target.innerText;
        if (pagesVal != this.pagingConfig.pageIndex) {
            this.refreshPaging(Number(pagesVal));
            this.callback(Number(pagesVal));
        }
    }
    //点击下一页
    nextClick(){
        if (this.pagingConfig.pageIndex < this.config.pageNum) {
            this.refreshPaging(this.pagingConfig.pageIndex + 1);
            this.callback(this.pagingConfig.pageIndex + 1);
        }
    }
    //点击尾页
    lastClick(){
        if (this.pagingConfig.pageIndex < this.config.pageNum) {
            this.refreshPaging(this.config.pageNum);
            this.callback(this.config.pageNum);
        }
    }
    //输入页号
    jumperPageNumBlur(event){
        let value_1 = ~~event.target.value;
        let value_2 = value_1;
        // 最大页码
        if (value_1 > this.config.pageNum)value_2 = this.config.pageNum;
        // 最小页码
        if (value_1 <= 0)value_2 = 1;

        if (value_2 !== this.pagingConfig.pageIndex){
            this.refreshPaging(value_2);
            this.callback(value_2);
        } else {
            if(value_1 !== this.pagingConfig.pageIndex){
                this.pagingConfig.pageIndex = value_1;
                this.pagingConfig.pageIndex = value_2;
            }
        }
    }
    // 回调
    callback(index){
        // 回调
        typeof this.pagingConfig.currentChange === 'function' && this.pagingConfig.currentChange(index);

        let page = {
            currentPage: this.pagingConfig.pageIndex,
            total: this.pagingConfig.total,
            pageSize: this.pagingConfig.pageSize
        };
        const getPageEvent = new CustomEvent('pagingclick', {
            detail: {page: page}
        });
        this.dispatchEvent(getPageEvent);
    }

    getBetween = function () {
        // 最小下标
        var min = this.pagingConfig.pageIndex - Math.floor(this.pagingConfig.pageCount / 2);
        // 最小下标最大值
        if (min > this.config.pageNum - this.pagingConfig.pageCount) {
            min = this.config.pageNum - this.pagingConfig.pageCount + 1;
        }
        // 最小值
        if (min <= 1)
            min = 1;
        // 最大下标
        var max = this.pagingConfig.pageIndex + Math.floor(this.pagingConfig.pageCount / 2);
        // 最大下标最小值
        if (max < this.pagingConfig.pageCount)
            max = this.pagingConfig.pageCount;
        // 最大值
        if (max > this.config.pageNum)
            max = this.config.pageNum;
        return { min: min, max: max };
    };
    validate = function (options) {
        if (!options)
            throw new Error('options of null');
        if (typeof options !== 'object')
            throw new Error('options not an object');
        try {
            ['type', 'pageIndex', 'pageSize', 'pageCount', 'total'].forEach(function (v) {
                if (options[v]) {
                    if (isNaN(options[v]))
                        throw new Error(v + " not an number");
                    if (v === 'pageCount' && options[v] % 2 === 0)
                        throw new Error(v + " not an odd number");
                }
            });
        }
        catch (error) {
            throw new Error(error);
        }
        return true;
    };

    // 判断类型是否为1
    get isType1(){
        return this.pagingConfig.type === 1;
    }
}