<template>
  <u-list
    :paging-enabled="pagingEnabled"
    :list-id="listId"
    class="flex-1 list"
    :triggered="triggered"
    :lower-threshold="loadmoreoffset"
    :scrollable="scrollable"
    :refresher-enabled="refresh"
    :bounce="bounce"
    :offset-accuracy="offsetAccuracy"
    :scroll-top="scrollTop"
    :scroll-into-view="scrollIntoView"
    @scrolltolower="scrolltolowerHandler"
    @scroll="scrollHandler"
    @refresherrefresh="refresherrefreshHandler"
    @init="initHandler"
  >
    <!-- #ifdef APP-VUE -->
    <refresh
      v-if="refresh"
      class="refresh flex-center"
      :display="triggered ? 'show' : 'hide'"
      @refresh="refresherrefreshHandler"
    >
      <image
        src="@/static/images/loading.gif"
        mode="aspectFit"
        class="loading"
      />
      <text class="fs-24 text-regular mt-10">
        加载中
      </text>
    </refresh>
    <slot v-if="isPage" /><cell v-else>
      <slot />
    </cell>
    <!-- #endif -->
    <!-- #ifndef APP-NVUE -->
    <slot />
    <!-- #endif -->
  </u-list>
</template>
<script>
// #ifdef APP-NVUE

const animation = uni.requireNativePlugin('animation');
// #endif
export default {
  name: 'GList',
  props: {
    triggered: {
      type: Boolean,
      default: false
    },
    bounce: {
      type: Boolean,
      default: true
    },
    listId: {
      type: String,
      default: ''
    },
    loadmoreoffset: {
      type: Number,
      default: 100
    },
    pagingEnabled: {
      type: Boolean,
      default: false
    },
    refresh: {
      type: Boolean,
      default: false
    },
    refreshWidth: {
      type: String,
      default: '750rpx'
    },
    scrollable: {
      type: Boolean,
      default: true
    },
    offsetAccuracy: {
      type: Number,
      default: 10
    },
    scrollTop: {
      type: Number,
      default: 0
    },
    scrollIntoView:{
      type: String,
      default: ''
    }
  },
  data() {
    return {
      refreshHeight: 0
    };
  },
  computed: {
    isPage() {
      return !!this.$listeners.scrolltolower;
    }
  },
  created() {
    // #ifdef APP-NVUE
    const { platform } = uni.getSystemInfoSync();
    if (this.refresh && platform === 'android') {
      this.refreshHeight = uni.upx2px(106);
    }
    // #endif
  },
  methods: {
    scrolltolowerHandler() {
      if (this.isPage) {
        this.$emit('scrolltolower');
      }
    },
    refresherrefreshHandler() {
      this.$emit('refresherrefresh');
    },
    scrollHandler(e) {
      this.$emit('scroll', e - this.refreshHeight);
    },
    initHandler(list) {
      this.$emit('init', list);
    }
  }
};
</script>
<style lang="scss" scoped>
.list {
  position: relative;
}
.loading {
  width: 72rpx;
  height: 72rpx;
}
.refresh {
  left: 0;
  right: 0;
  position: absolute;
  height: 106rpx;
}
.list {
  justify-content: flex-start;
}
</style>
