<template>
  <div class="cus-loadmore">
    <co-loadmore
        ref="loadmore"
        :topMethod="topMethod"
        :bottomMethod="bottomMethod"
        :show-bottom-end="showBottomEnd"
        :max-distance="maxDistance"
        :auto-fill="autoFill"
        :show-top-end="showTopEnd"
        :bottom-all-loaded="bottomAllLoaded"
        @top-status-change="handleTopChange"
        @bottom-status-change="handleBottomChange">
      <div slot="top" class="co-loadmore-top">
        <span v-show="topStatus !== 'loading' && topStatus !== 'done'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span>
        <span v-show="topStatus === 'done'">{{topLoadingSuccess}}</span>
      <span v-show="topStatus === 'loading'">
        <co-spinner type="snake"></co-spinner>
      </span>
      </div>
      <slot></slot>
      <div slot="bottom" class="co-loadmore-bottom">
        <span v-show="bottomStatus === 'pull' || bottomStatus === 'drop'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
        <span v-show="bottomStatus === 'done'">{{bottomPullEndText}}</span>
      <span v-show="bottomStatus === 'loading'">
        <co-spinner type="snake"></co-spinner>
      </span>
      </div>
    </co-loadmore>
  </div>
</template>

<script type="es6">
  export default {
    name: 'cus-loadmore',
    data() {
      return {
        list: [],
        allLoaded: false,
        topStatus: '',
        bottomStatus: '',
        bottomPullEndText: '暂无更多数据'
      };
    },

    props: {
      maxDistance: Number,
      autoFill: Boolean,
      distanceIndex: Number,
      showTopEnd: Boolean,
      topPullText: String,
      topDropText: String,
      topLoadingText: String,
      topLoadingSuccess: {
        type: String,
        default: '刷新成功'
      },
      topDistance: Number,
      topMethod: Function,
      showBottomEnd: Boolean,
      bottomPullText: String,
      bottomDropText: String,
      bottomLoadingText: String,
      bottomDistance: Number,
      bottomMethod: Function,
      bottomAllLoaded: Boolean
    },

    methods: {
      onTopLoaded() {
        this.$refs.loadmore.onTopLoaded(...arguments);
      },

      onBottomLoaded() {
        this.$refs.loadmore.onBottomLoaded(...arguments);
      },

      handleTopChange(status) {
        this.topStatus = status;
      },

      handleBottomChange(status) {
        this.bottomStatus = status;
      }

    }

  };
</script>

<style lang="less">
  .cus-loadmore {

    .co-loadmore-top, .co-loadmore-bottom {
      span {
        display: inline-block;
        transition: .2s linear;
        vertical-align: middle;

        p {
          line-height: 20px;
        }
      }
    }

    .is-rotate {
      transform: rotate(180deg);
    }

    .co-spinner {
      display: inline-block;
      vertical-align: middle;
    }
  }
</style>
