import { Component, Vue, Watch, Prop, Emit, PropSync } from 'vue-property-decorator'
import {
    State,
    Getter,
    Action,
    Mutation,
} from "vuex-class";
import { Table, TableColumn } from "view-design";
import Events from "@/utils/Events";
import { TableExportCsvParams } from "view-design/types/table";
import { stringify } from "postcss";
import Project from "@/views/home/pages/project/project";


@Component
export default class page extends Vue {
    name : string = "CustomPage"

    @Prop({type : Number, default : 0})
    total : number;

    @Prop({default : true})
    showPaginate : boolean

    @PropSync('page', {type : Number}) currentPage! : Number

    @Prop({type : Number, default : 10})
    pageSize : number;

    @Prop({type : Array, default : () => []})
    columns : TableColumn[];

    @Prop({type : Array, default : () => []})
    dataList : Array<any>;
    @Prop({default : false})
    rowKey : Boolean | string

    @Prop({type: String, default: "暂无数据"})
    noDataText: string;

    sizeOpt : number[] = [20, 40, 80, 120];

    get currentPageSize() {
        return this.pageSize;
    }

    mounted() {
        if (!this.sizeOpt.includes(this.pageSize)) {
            this.sizeOpt.push(this.pageSize);
            this.sizeOpt = this.sizeOpt.sort((a, b) => a - b);
        }
    }

    public exportCsv(params : TableExportCsvParams) {
        let table : Table = this.$refs["table"] as Table;
        table.exportCsv(params);
    }

    public onPageSizeChange(size : number) {
        this.$emit("update:pageSize", size);
    }

    @Emit(Events.ON_PAGE_CHANGE)
    public onPageChange(page : number) : number {
        return page;
    }

    @Emit(Events.ON_SELECTION_CHANGE)
    public onSelectionChange(selection : any[]) : any[] {
        return selection
    }
}