<template>
    <div class="">
        <ezm-layout>
            <van-nav-bar
                slot="nav"
                title="Выпадающая загрузка с вытягиванием вверх"
                left-arrow
                @click-left="g_navigate.back()"
            ></van-nav-bar>
            <!-- Компонент бесконечной прокрутки -->
            <!-- Для использования выпадающей или вытягивающей вверх функций необходимо передать объект разбивки на страницы -->
            <ezm-scroll-box
                :pull-down="true"
                :pull-up="true"
                :paginate="paginate"
            >
                <van-cell
                    v-for="item in list" :key="item.id"
                    :title="item.title"
                    :label="item.label"
                    :value="item.id"
                ></van-cell>
            </ezm-scroll-box>
        </ezm-layout>
    </div>
</template>

<script>
import EzmLayout from "@/components/layout/ezm-layout";
import EzmScrollBox from "@/components/scroll/ezm-scroll-box";
import Paginate from "@/utils/paginate.util";
import {mockUtil} from "@/utils/common.util";
import {request} from "@/utils/request.util";
import {PageMixin} from "@/mixin/navigate.mixin";

export default {
    name: 'BetterScrollAll',
    mixins: [PageMixin],
    components: {EzmScrollBox, EzmLayout},
    data() {
        return {
            // Создание объекта разбивки на страницы
            // Объект разбивки на страницы принимает два параметра Function: обратный вызов выпадающей или вытягивающей вверх функции (необязательно) Integer: количество элементов на странице
            paginate: new Paginate(this.getList),
            list: [],
        }
    },
    methods: {
        /**
         * При входе на страницу эта функция будет автоматически запущена
         * Возврат на эту страницу не вызовет выполнения
         */
        init() {
            // Автоматически запускает операцию выпадающей загрузки
            this.paginate.autoPullDown();
        },
        /**
        * Функция, которая будет вызываться при выпадающей и вытягивающей вверх обратных вызовах
        * paginate автоматически передаст параметр refresh при вызове этой функции
        * Выпадающая загрузка передаст true, вытягивающая вверх загрузка передаст false
        * @param refresh Является ли это выпадающей загрузкой
        */
        getList(refresh = false) {
            // Предварительно использовать mockjs для имитации данных, если есть реальный интерфейс, не нужно имитировать
            this.mockData();
``` **Запрос интерфейса BetterScrollAll и передача параметров разбивки на страницы**

// Запрос интерфейса BetterScrollAll и передача параметров разбивки на страницы
request('BetterScrollAll')
    .get(this.paginate.getRequestParams())
    .then(resp => {
        // Добавление данных в список или его расширение
        this.list = refresh ? resp.records : this.list.concat(resp.records);
        // Завершение загрузки данных
        // Не забудьте передать resp, paginate будет использовать результат resp для определения наличия следующей страницы
        // Отображение различного содержимого внизу, например «больше нет» и т. д.;
        this.paginate.finishLoading(resp);
    })
    // Если запрос не удался, необходимо вызвать завершение загрузки данных
    // Нет необходимости передавать параметры, просто завершите анимацию загрузки
    .catch(_ => this.paginate.finishLoading());
},
/**
 * Имитация 2 страниц полных данных,
 * Третья страница содержит 5 записей
 */
mockData() {
    mockUtil.mock(/BetterScrollAll/i, 'get', {
        code: 200,
        message: '',
        data: {
            current: this.paginate.toPage,
            size: this.paginate.size,
            [`records|${this.paginate.toPage > 2 ? 5 : this.paginate.size}`]: [{
                'id|+1': (this.paginate.toPage - 1) * this.paginate.size + 1,
                'title': '@cname',
                'label': '@name',
            }],
        }
    });
};

let confirm = (content, title = "确认信息", type = 'warning') => {
    let dialog = Dialog.confirm({
        title: title,
        message: content,
    });
    let task = Events.addWaitTask(() => Dialog.close());
    return dialog.then(() => {
        Events.removeWaitTask(task);
        return Promise.resolve();
    }).catch(() => {
        Events.removeWaitTask(task);
        return Promise.reject();
    })
}

export class WaitForTask {
    constructor(id, task) {
        this.id = id;
        this.task = task;
    }

    id = '';
    task = null;