<template>
    <van-pull-refresh
        class="home"
        success-text="加载成功"
        success-duration="500"
        v-model="isLoading"
        :head-height="80"
        @refresh="onRefresh"
    >
        <template #default>
            <slot></slot>
        </template>
        <template #loading>
            <loading-page :pageType="pageType"></loading-page>
        </template>
        <template #pulling>
            <loading-page :pageType="pageType"></loading-page>
        </template>
        <template #loosing>
            <loading-page :pageType="pageType"></loading-page>
        </template>
        <template #success>
            <loading-page :pageType="pageType"></loading-page>
        </template>
    </van-pull-refresh>
</template>

<script>
import LoadingPage from './Loading/LoadingPage.vue';
import { PullRefresh } from 'vant';
export default {
    props: {
        value: {
            type: Boolean,
            defalut: false
        },
        pageType: {
            type: String,
            default: 'dark'
        }
    },
    computed: {
        isLoading: {
            get() {
                return this.value;
            },
            set(isLoading) {
                this.$emit('upade:value', isLoading);
            }
        }
    },
    methods: {
        onRefresh() {
            this.$emit('refresh');
        }
    },
    components: { LoadingPage, vanPullRefresh: PullRefresh }
};
</script>

<style lang="less" scoped></style>
