<!--  -->

<template>

<div class='mine-loading' :class="{'mine-loading-inline':inline}">

    <span class="mine-loading-indicator" v-if="indicator==='on'">

        <slot>

            <img src="./loading.gif" alt="">

        </slot>

    </span>

    <span class="mine-loading-text" v-if="loadingText">{{loadingText}}</span>

</div>

</template>

<script>

//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

//例如：import 《组件名称》 from '《组件路径》';

export default {

//import引入的组件需要注入到对象中才能使用

components: {},

name:'MeLoading',

props:{

    indicator:{

        type:String,

        default:'on',

        validator(value) {

            return ['on','off'].indexOf(value) > -1;

        }

    },

    text:{

        type:String,

        default:'加载中...',

    },

    inline:{

        type:Boolean,

        default:false

    }

},

data() {

//这里存放数据

return {

    loadingText: this.text

};

},

//监听属性 类似于data概念

computed: {},

//监控data中的数据变化

watch: {

    text(text){

        this.loadingText=text;

    }

},

//方法集合

methods: {

    setText(){

        this.loadingText = text;

    }

},

//生命周期 - 创建完成（可以访问当前this实例）

created() {

},

//生命周期 - 挂载完成（可以访问DOM元素）

mounted() {

},

beforeCreate() {}, //生命周期 - 创建之前

beforeMount() {}, //生命周期 - 挂载之前

beforeUpdate() {}, //生命周期 - 更新之前

updated() {}, //生命周期 - 更新之后

beforeDestroy() {}, //生命周期 - 销毁之前

destroyed() {}, //生命周期 - 销毁完成

activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发

}

</script>

<style lang="scss" scoped>

@import "~assets/scss/mixins";

.mine-loading{

    overflow: hidden;

    width: 100%;

    height: 100%;

    @include flex-center(column);

    &.mine-loading-inline{

        flex-direction: row;

        .mine-loading-indicator ~ .mine-loading-text{

            margin-top: 0px;

            margin-left: 6px;

            }

    }

}

.mine-loading-indicator ~ .mine-loading-text{

    margin-top: 6px;

}

</style>

<!--  -->

<template>

<swiper :options="swiperOption" ref="swiper">

    <div class="mine-scroll-pull-down" v-if="pullDown">

        <me-loading :text="pullDownText" inline ref="pullDownLoading"></me-loading>

    </div>

    <swiper-slide>

        <slot></slot>

    </swiper-slide>

    <div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div>

</swiper>

</template>

<script>

//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

//例如：import 《组件名称》 from '《组件路径》';

import {swiper,swiperSlide} from 'vue-awesome-swiper'

import MeLoading from 'base/loading'

import {

    PULL_DOWN_HEIGHT,

    PULL_DOWN_TEXT_INIT,

    PULL_DOWN_TEXT_START,

    PULL_DOWN_TEXT_ING,

    PULL_DOWN_TEXT_END,

    PULL_UP_HEIGHT,

    PULL_UP_TEXT_INIT,

    PULL_UP_TEXT_START,

    PULL_UP_TEXT_ING,

    PULL_UP_TEXT_END

  } from './config';

export default {

//import引入的组件需要注入到对象中才能使用

name:'MeScroll',

components: {

    swiper,

    swiperSlide,

    MeLoading

},

props:{

    scrollbar:{

        type:Boolean,

        default:true

    },

    data:{

        type:[Array,Object]

    },

    pullDown:{

        type:Boolean,

        default:false

    }

},

data() {

//这里存放数据

return {

    swiperOption:{

        direction:'vertical',

        slidesPerView:'auto',

        freeMode:true,

        setWrapperSize:true,

        scrollbar:{

            el:this.scrollbar ? '.swiper-scrollbar' : null,

            hide:true

        },

        on:{

            sliderMove:this.scroll

        }

    },

    pullDownText:PULL_DOWN_TEXT_INIT

};

},

//监听属性 类似于data概念

computed: {},

//监控data中的数据变化

watch: {

    data(){

        this.update();

    }

},

//方法集合

methods: {

    update(){

        this.$refs.swiper && this.$refs.swiper.swiper.update();

    },

    scroll(){

        const swiper = this.$refs.swiper.swiper;

        if(swiper.translate > 0){

            if(!this.pullDown){

                return;

            }

            if(swiper.translate > PULL_DOWN_HEIGHT){

                this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START);

            }else{

                this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_INIT);

            }

        }

    }

},

//生命周期 - 创建完成（可以访问当前this实例）

created() {

},

//生命周期 - 挂载完成（可以访问DOM元素）

mounted() {

},

beforeCreate() {}, //生命周期 - 创建之前

beforeMount() {}, //生命周期 - 挂载之前

beforeUpdate() {}, //生命周期 - 更新之前

updated() {}, //生命周期 - 更新之后

beforeDestroy() {}, //生命周期 - 销毁之前

destroyed() {}, //生命周期 - 销毁完成

activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发

}

</script>

<style scoped>

    .swiper-container{

        overflow: hidden;

        width: 100%;

        height: 100%;

    }

    .swiper-slide{

        height: auto;

    }

    .mine-scroll-pull-down{

        position: absolute;

        left: 0;

        bottom: 100%;

        width: 100%;

        height: 80px;

    }

</style>