import { tag, WeElement } from 'omi'
import '../style/global/index.css'
import style from '../style/_pagination.scss'

@tag('el-pagination', true)
class ElPagination extends WeElement {

    css() {
        return style
    }

    install() {
        this.data = Object.assign({
            total: 0,
            pageSize: 10,
            numDisplay: 5,
            currentPage: 0,
            numEdge: 3,
            linkTo: '#',
            prevText: 'Prev',
            nextText: 'Next',
            ellipseText: '...',
            prevShow: true,
            nextShow: true
        }, this.props)
        this.pageNum = Math.ceil(this.data.total / this.data.pageSize)

    }

    beforeUpdate() {
        this.pageNum = Math.ceil(this.data.total / this.data.pageSize)
    }

    render(props) {
        return (
            <div class="el-pagination is-background">
                <button type="button" class="btn-prev" disabled="disabled">
                    <i class="el-icon el-icon-arrow-left"></i></button>
                <ul class="el-pager">
                    <li class="number active">1</li>
                    <li class="number">2</li>
                    <li class="number">3</li>
                    <li class="number">4</li>
                    <li class="number">5</li>
                    <li class="number">6</li>
                    <li class="el-icon more btn-quicknext el-icon-more"></li>
                    <li class="number">100</li>
                </ul>
                <button type="button" class="btn-next">
                    <i class="el-icon el-icon-arrow-right"></i>
                </button>
            </div>
        )
    }

    beforeRender() {
        this.pageNum = Math.ceil(this.data.total / this.data.pageSize)
    }

    goto(index) {

        this.data.currentPage = index
        this.fire('change', { index })
        this.update()
    }

    render() {
        let arr = []
        var opt = this.data,
            interval = this.getInterval()

        if (interval[0] > 0 && opt.numEdge > 0) {
            var end = Math.min(opt.numEdge, interval[0])
            for (var i = 0; i < end; i++) {
                arr.push(this.getItem(i, i + 1))
            }

            if (opt.numEdge < interval[0] && opt.ellipseText) {
                arr.push(<li class="el-icon more btn-quicknext el-icon-more"></li>)
            }
        }

        for (var i = interval[0]; i < interval[1]; i++) {
            arr.push(this.getItem(i, i + 1))
        }

        if (interval[1] < this.pageNum && opt.numEdge > 0) {
            if (this.pageNum - opt.numEdge > interval[1] && opt.ellipseText) {
                arr.push(<li class="el-icon more btn-quicknext el-icon-more"></li>)
            }
            var begin = Math.max(this.pageNum - opt.numEdge, interval[1])
            for (var i = begin; i < this.pageNum; i++) {
                arr.push(this.getItem(i, i + 1))
            }
        }

        return <div class="el-pagination is-background">{opt.prevShow && this.getPrev()} <ul class="el-pager">{
            arr.map(function (p) {
                return p
            })
        } </ul> {opt.nextShow && this.getNext()}</div>
    }

    getInterval() {
        var ne_half = Math.ceil(this.data.numDisplay / 2)
        var upper_limit = this.pageNum - this.data.numDisplay
        var start = this.data.currentPage > ne_half ? Math.max(Math.min(this.data.currentPage - ne_half, upper_limit), 0) : 0
        var end = this.data.currentPage > ne_half ? Math.min(this.data.currentPage + ne_half, this.pageNum) : Math.min(this.data.numDisplay, this.pageNum)
        return [start, end]
    }

    getPrev() {
        if (this.data.currentPage === 0) {
            return <button type="button" class="btn-prev" disabled="disabled">
                <i class="el-icon el-icon-arrow-left"></i></button>
        }

        return <button type="button" class="btn-prev" onclick={e => { this.goto(this.data.currentPage - 1) }}>
            <i class="el-icon el-icon-arrow-left"></i></button>
    }

    getNext() {
        if (this.data.currentPage === this.pageNum - 1) {
            return <button type="button" class="btn-next" disabled="disabled">
                <i class="el-icon el-icon-arrow-right"></i>
            </button>
        }

        return <button type="button" class="btn-next" onclick={e => { this.goto(this.data.currentPage + 1) }}>
            <i class="el-icon el-icon-arrow-right"></i>
        </button>
    }

    getItem(pageIndex, text) {
        if (this.data.currentPage === pageIndex) {
            return <li class="number active">{text}</li>
        }
        return <li class="number" onclick={e => { this.goto(pageIndex) }}>{text}</li>
    }
}

@@ -776,898 +776,8 @@
  %7D%0A%0A
-    render(props) %7B%0A        return (%0A            %3Cdiv class=%22el-pagination is-background%22%3E%0A                %3Cbutton type=%22button%22 class=%22btn-prev%22 disabled=%22disabled%22%3E%0A                    %3Ci class=%22el-icon el-icon-arrow-left%22%3E%3C/i%3E%3C/button%3E%0A                %3Cul class=%22el-pager%22%3E%0A                    %3Cli class=%22number active%22%3E1%3C/li%3E%0A                    %3Cli class=%22number%22%3E2%3C/li%3E%0A                    %3Cli class=%22number%22%3E3%3C/li%3E%0A                    %3Cli class=%22number%22%3E4%3C/li%3E%0A                    %3Cli class=%22number%22%3E5%3C/li%3E%0A                    %3Cli class=%22number%22%3E6%3C/li%3E%0A                    %3Cli class=%22el-icon more btn-quicknext el-icon-more%22%3E%3C/li%3E%0A                    %3Cli class=%22number%22%3E100%3C/li%3E%0A                %3C/ul%3E%0A                %3Cbutton type=%22button%22 class=%22btn-next%22%3E%0A                    %3Ci class=%22el-icon el-icon-arrow-right%22%3E%3C/i%3E%0A                %3C/button%3E%0A            %3C/div%3E%0A        )%0A    %7D%0A%0A
     

remove dead code