import {Component, Prop, Vue, Emit, Watch} from 'vue-property-decorator';

@Component
export default class EflyPage extends Vue {
    @Prop({default: () => [5, 10, 20, 50]}) private list!: any;
    @Prop({default: () => 10}) private count!: any;
    @Prop({default: () => 0}) private total!: any;
    @Prop({default: () => 'one'}) private type!: any;
    @Prop({default: () => ''}) private size!: any;

    private current: any = 1;        // 当前页面数量
    private max: any = 1;            // 最大页面数量
    private pageCount = 10;
    private input = 1;
    private pageList: any = [2, 3, 4];
    private returnData: any = {}
    private location: any = {
        default: {},
        small: {
            first: {top: '37px', left: "6px"},
        }
    }

    private data: any = {
        start: 0,
        length: 0,
    }

    @Watch('total', {deep: true})
    private watchMonitor(value: any) {
        this.getMax();
    }

    private mounted() {
        this.pageCount = this.count;
        this.data.length = this.pageCount
        this.getMax();
    }

    /**
     * 获取页面最大数量
     */
    private getMax() {
        this.max = Math.ceil(this.total / this.pageCount);
        this.max = this.max === 0 ? 1 : this.max
        this.input = 1;
        this.current = 1;
    }

    private getCount($event: any) {
        this.pageCount = $event.value;
        this.data.length = this.pageCount;
        this.data.start = 0;
        this.getMax();
        this.$emit('change', this.data);
    }

    private goPage(type: any) {
        switch (type) {
            case 'first': {
                this.current = 1;
                break;
            }
            case 'prev': {
                if (this.current > 1) {
                    this.current--;
                }
                break;
            }
            case 'next': {
                if (this.current < this.max) {
                    this.current++;
                }
                break;
            }
            case 'last': {
                this.current = this.max;
                break;
            }
            default: {
                this.current = type;
                break;
            }
        }

        this.getPageList();
        this.input = this.current;
        this.data.start = (this.current - 1) * this.pageCount;
        this.$emit('change', this.data)
    }

    private skipPage() {
        this.current = this.input;
        this.data.start = (this.current - 1) * this.pageCount;
        this.$emit('change', this.data)
    }

    private getSkipPage($event: any) {
        let value = Number($event.currentTarget.value);
        if (value < 1) {
            value = 1;
        } else if (value > this.max) {
            value = this.max;
        }
        this.input = value;
    }

    private getPageList() {
        if (this.current > 2 && this.current < this.max - 1) {
            this.pageList = [this.current - 1, this.current, this.current + 1];
        } else if (this.current === this.max && this.max > 4) {
            this.pageList = [this.max - 3, this.max - 2, this.max - 1];
        } else if (this.current === 1) {
            this.pageList = [2, 3, 4];
        }
    }
}