<template>
    <row class="grid-pagination">
        <dropdown class="grid-pagination__dropdown" @on-click="handleSizeChange">
            Show <span>{{ limit }}</span>
            <icon type="ios-arrow-down"></icon>
            <template #list>
                <dropdownMenu>
                    <dropdownItem v-for="(value, index) in pageSize" :key="index" :name="value">{{ value }} 条/页</dropdownItem>
                </dropdownMenu>
            </template>
        </dropdown>
        <div class="grid-page-pre-pro">
            <i class="el-icon-download"></i>
        </div>
        <page
            class="pull-right"
            :transfer="true"
            :total="totalRow"
            simple
            size="small"
            :current="curPage"
            :page-size="limit"
            @on-change="handleChange($event)"
        >
        </page>
        <div class="grid-page-next-pro">
            <i class="el-icon-download"></i>
        </div>
    </row>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component({})
export default class AppGridPagination extends Vue {

    /**
     * 总行数
     *
     * @type {number}
     * @memberof AppGridPagination
     */
    @Prop() totalRow!: number;

    /**
     * 当前页
     *
     * @type {number}
     * @memberof AppGridPagination
     */
    @Prop() curPage!: number;

    /**
     * 分页大小
     *
     * @type {number}
     * @memberof AppGridPagination
     */
    @Prop() limit!: number;

    /**
     * 分页数数组
     *
     * @type {Array<*>}
     * @memberof AppGridPagination
     */  
    public pageSize= [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

    /**
     * 处理当前页改变
     *
     * @type {number}
     * @memberof AppGridPagination
     */
    public handleChange($event: any) {
        this.$emit('page-change', $event);
    }

    /**
     * 处理分页大小改变
     *
     * @type {number}
     * @memberof AppGridPagination
     */
    public handleSizeChange($event: any) {
        this.$emit('page-size-change', $event);
    }
}
</script>

<style lang="scss">
@import "./app-grid-pagination.scss";
</style>
