<template>
  <div class="home">
    <header class="g-header-container">
      <home-header :class="{'header-transition':isHeaderTransition}" ref="header"></home-header>
    </header>
    <me-scroll
     :data="recommends" 
     pullDown pullUp @pull-down="pullToRefresh" @pull-up="pullToLoadMore"
     @scroll="scroll" @pull-down-transition-end="pullDownTransitionEnd"
     @scroll-end="scrollEnd" ref="scroll">
      <home-slider ref="slider"></home-slider> 
      <home-nav></home-nav>
      <home-recommend @loaded="getRecommends" ref="recommend"></home-recommend>
    </me-scroll>
    <div class="g-backtop-container">
      <me-backtop :visible="isBacktopVisible" @backtop="backToTop"></me-backtop>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  import MeScroll from 'base/scroll';
  import MeBacktop from 'base/backtop';
  import HomeHeader from './header';
  import HomeSlider from './slider';
  import HomeNav from './nav';
  import HomeRecommend from './recommend';
  import {HEADER_TRANSITION_HEIGHT} from './config';
  export default {
    name: 'Home',
    components:{
      MeScroll,
      MeBacktop,
      HomeHeader,
      HomeSlider,
      HomeNav,
      HomeRecommend
    },
    data(){
      return {
        recommends:[],
        isBacktopVisible:false,
        isHeaderTransition:false
      };
    },
    created(){

    },
    methods:{
      updateScroll(){},
      getRecommends(recommend){
        this.recommends=recommend;
      },
      pullToRefresh(end){
        this.$refs.slider.update().then(end);
        // setTimeout(() =>{
        //   console.log(1);
        //   end();
        // },1000);
      },
      pullToLoadMore(end){
        this.$refs.recommend.update().then(end).catch(err => {
          if(err){
            console.log(err);
          }
          end();
        });
      },
      scroll(translate){
        this.changeHeaderStatus(translate);//切换header的背景颜色以及显示隐藏header
      },
      pullDownTransitionEnd(){//当下拉刷新结束时显示header
        this.$refs.header.show();
      },
      scrollEnd(translate,scroll,pulling){
        if(!pulling){
          this.changeHeaderStatus(translate);//切换header的背景颜色以及显示隐藏header
        }
        this.isBacktopVisible=translate<0 && -translate>scroll.height;//返回顶部按钮显示与隐藏
      },
      backToTop(){
        this.$refs.scroll && this.$refs.scroll.scrollToTop();//返回顶部
      },
      changeHeaderStatus(translate){
        if(translate>0){
          this.$refs.header.hide();
          return;
        }
        this.$refs.header.show();
        this.isHeaderTransition=-translate>HEADER_TRANSITION_HEIGHT;
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "~assets/scss/mixins";
  .home{
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: $bgc-theme;
  }
</style>

<template>  
    <div>      
      <me-navbar class="header" v-show="visible">
        <i class="iconfont" slot="left">&#xe582;</i>
        <div slot="center">搜索框</div>
        <i class="iconfont" slot="right">&#xe503;</i>
      </me-navbar>
    </div>  
</template>

<script>
  import MeNavbar from "base/navbar";

  export default {
    name: 'HomeHeader',
    components:{
        MeNavbar
    },
    data(){
      return{
        visible:true
      };
    },
    methods:{
      show(){
        this.visible=true;
      },
      hide(){
        this.visible=false;
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "~assets/scss/mixins";
  .header{
    &.mine-navbar{
      background-color: transparent;
      transition: background-color 0.5s;
    }
    &.header-transition{
      background-color: $header-bgc-translucent;
    }
    .iconfont{
      color: $icon-color-default;
      font-size: $icon-font-size;
    }
  }
</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="mine-scroll-pull-up" v-if="pullUp">
      <me-loading :text="pullUpText" inline ref="pullUpLoading"></me-loading>
    </div>
    <div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div>
  </swiper>
</template>

<script>
  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 {
    name: 'MeScroll',
    components:{
      swiper,
      swiperSlide,
      MeLoading
    },
    props:{
      scrollbar:{
        type:Boolean,
        default:true
      },
      data:{
        type:[Array,Object]  
      },
      pullDown:{
        type:Boolean,
        default:false
      },
      pullUp:{
        type:Boolean,
        default:false
      }
    },
    data(){
      return {
        
      };
    },
    watch:{
      data(){
        this.update();
      }
    },
    created(){
      this.init();
    },
    methods:{
      update(){
        this.$refs.swiper && this.$refs.swiper.swiper.update();
        //更新滚动条，使得滚动条能够在数据加载后正常滚动
      },
      scrollToTop(speed,runCallbacks){
        this.$refs.swiper && this.$refs.swiper.swiper.slideTo(0,speed,runCallbacks);
      },//暴露出去，功能是返回顶部

      init(){
        this.pulling=false;
        this.pullDownText=PULL_DOWN_TEXT_INIT;
        this.pullUpText=PULL_UP_TEXT_INIT;
        this.swiperOption={
          direction: 'vertical',
          slidesPerView: 'auto',//一页能看见几张图片--自适应
          freeMode: true,//每次滚动的距离是自由的
          setWrapperSize: true,//能获取到数据，如：容器的高度
          scrollbar: {
            el: this.scrollbar ? '.swiper-scrollbar' : null,
            hide: true//是否自动隐藏
          },
          on:{
            sliderMove:this.scroll,
            touchEnd:this.touchEnd,
            transitionEnd:this.scrollEnd//暴露出去，监听当手滑过渡结束时在某个时间出现返回顶部按钮
          }
        };
      },
      scroll(){
        const swiper=this.$refs.swiper.swiper;

        this.$emit('scroll',swiper.translate,this.$refs.swiper.swiper);
        //暴露一个事件，监听滚动时，确定在某个距离切换header的背景颜色以及显示隐藏header
        if(this.pulling)return;
        if(swiper.translate > 0){//下拉
          if(!this.pullDown)return;
          this.pulling=true;
          if(swiper.translate > PULL_DOWN_HEIGHT){
            this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START);
            //this.pullDownText='111';这样写就是直接修改data中的数据，会导致更新数据时发生闪动
          }else{
            this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_INIT);
          }
        }else if(swiper.isEnd){//上拉
          if(!this.pullUp)return;
          const isPullUp = Math.abs(swiper.translate) + swiper.height - PULL_UP_HEIGHT > parseInt(swiper.$wrapperEl.css('height'));

          if (isPullUp) {
            this.$refs.pullUpLoading.setText(PULL_UP_TEXT_START);
          } else {
            this.$refs.pullUpLoading.setText(PULL_UP_TEXT_INIT);
          }
        }
      },
      scrollEnd(){
        this.$emit('scroll-end',this.$refs.swiper.swiper.translate,this.$refs.swiper.swiper,this.pulling);
      },
      touchEnd(){
        const swiper=this.$refs.swiper.swiper;
        if(swiper.translate > 0){//下拉
          if(!this.pullDown)return;
          swiper.allowTouchMove = false;// 禁止触摸
          swiper.setTransition(swiper.params.speed);
          swiper.setTranslate(PULL_DOWN_HEIGHT);
          swiper.params.virtualTranslate = true;// 定住不给回弹
          this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_ING);
          this.$emit('pull-down', this.pullDownEnd);// 触发一个事件
        }else if(swiper.isEnd){//底部
          const totalHeight = parseInt(swiper.$wrapperEl.css('height'));
          //totalHeight是通过wrapper的HTML元素的height属性， 也就是所有内容的高度
          const isPullUp = Math.abs(swiper.translate) + swiper.height - PULL_UP_HEIGHT > totalHeight;
          //滚动距离加上显示区域的高度减去一个定的值，如果大于所有滚动内容的总高度，那么就表示用户正在上拉页面， 需要需要加载数据了
          if (isPullUp) { // 上拉
            if (!this.pullUp) {
              return;
            }
            this.pulling = true;
            swiper.allowTouchMove = false; // 禁止触摸
            swiper.setTransition(swiper.params.speed);
            swiper.setTranslate(-(totalHeight + PULL_UP_HEIGHT - swiper.height));
            swiper.params.virtualTranslate = true; // 定住不给回弹
            this.$refs.pullUpLoading.setText(PULL_UP_TEXT_ING);
            this.$emit('pull-up', this.pullUpEnd);
          }
        }
      },
      pullDownEnd(){
        const swiper = this.$refs.swiper.swiper;
        
        this.pulling=false;
        this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_END);
        swiper.params.virtualTranslate = false;
        swiper.allowTouchMove = true;
        swiper.setTransition(swiper.params.speed);
        swiper.setTranslate(0);
        setTimeout(()=>{//暴露出去，监听下拉结束时
          this.$emit('pull-down-transition-end');
        },swiper.params.speed);
      },
      pullUpEnd() {
        const swiper = this.$refs.swiper.swiper;
        this.pulling = false;
        this.$refs.pullUpLoading.setText(PULL_UP_TEXT_END);
        swiper.params.virtualTranslate = false;
        swiper.allowTouchMove = true;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .swiper-container{
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  .swiper-slide{
    height: auto;
  }
  .mine-scroll-pull-up,
  .mine-scroll-pull-down {
    position: absolute;
    left: 0;
    width: 100%;
  }
  .mine-scroll-pull-down {
    bottom: 100%;
    height: 80px;
  }

  .mine-scroll-pull-up {
    top: 100%;
    height: 30px;
  }
</style>