<template>
  <div id="posterHistory">
    <ul id="posterHistoryList">
      <li v-for="(item,index) in list" :class="index.toString().substr(index.toString().length-1,1)==0 || index.toString().substr(index.toString().length-1,1)==1 || index.toString().substr(index.toString().length-1,1)==5 || index.toString().substr(index.toString().length-1,1)==6 ?'single':'double'" :key="index">
        <img :src="item.imgUrl">
      </li>
    </ul>
    <p class="noDataText" v-show="list.length==0">{{list.length}}暂无数据</p>
    <infinite-scroll :scroller="scroller" :loading="loading" :isLoaded="isLoaded" :loadingText="loadingText" @load="loadMore"/>
    <loading :loadingShow="loadingShow"></loading>
  </div>
</template>
<script>
import request from '../utils/request'
import loading from '../components/loading/loading.vue'
import infiniteScroll from '../components/infiniteScroll/infiniteScroll.vue'
export default {
  data() {
    return{
      loadingShow: false,//加载
      pageNum: 1,
      list: [],

      loading: false,
      scroller: null,
      isLoaded: false,
      loadingText: '正在加载中...'
    }
  },
  components: {
    loading,infiniteScroll
  },
  mounted() {
    this.scroller = this.$el
    this.loadingShow = true
    request({
      url: '/api/MarketingToolApi/Posters/userPosters',
      method: 'post',
      data: {
        token: localStorage.getItem("token"),
        page: 1,
        limit: 20
      }
    }).then(response => {
      this.loadingShow = false
      this.list = response.data.list
    })
  },
  methods: {
    loadMore () {
      let me = this;
      me.loading = true;
      me.loadingText = '正在加载中...'
      me.pageNum += 1;
      request({
        url: '/api/MarketingToolApi/Posters/userPosters',
        method: 'post',
        data: {
          token: localStorage.getItem("token"),
          page: me.pageNum,
          limit: 20
        }
      }).then(response => {
        console.log(me.pageNum)
          if (response.data.list == ''){
            me.loadingText = '没有更多数据了'
            setTimeout(function () {
              me.isLoaded = true
              me.loading = false
            },1000)
            setTimeout(function () {
              me.isLoaded = false
            },1500)
          } else {
            this.list.push(response.data.list)
            me.loading = false
          }
      })
    }
  }
}
</script>
<style lang="scss">
#posterHistory{
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#posterHistoryList{
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
  li{
    flex: 1;
    padding: 2px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .single{
    min-width: 50%;
    height: 217px;
  }
  .double{
    min-width: 33.33%;
    height: 142px;
  }
}
</style>