<template>
  <div id="activityHistory">
    <ul>
      <li class="activityListItem" v-for="item in list">
        <img class="activityListItemImg" :src="item.thumb">
        <div class="activityListItemRight">
          <p class="activityListItemTitle">
            <span>{{item.title}}</span>
            <img v-if="item.completeStatus==1" src="../assets/icon_win.png">
            <img v-else src="../assets/icon_fail.png">
          </p>
          <div class="activityListDes">
            <div>
              <img src="../assets/icon_enrollment.png">
              <span>活动时间：{{item.beginTime}} ~ {{item.endTime}}</span>
            </div>
            <div>
              <img src="../assets/icon_activitytime.png">
              <span>报名人数：{{item.participants}}/{{item.peoples}}</span>
            </div>
            <div class="activityStatus">
              <span class="activityStatusEnd" v-if="item.status==2">已结束</span>
              <span class="activityStatusRun" v-else>进行中</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <infinite-scroll :scroller="scroller" :loading="loading" :isLoaded="isLoaded" :loadingText="loadingText" @load="loadMore"/>
    <p class="noDataText" v-show="list.length==0">暂无数据</p>
    <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,//加载
      list: [],

      pageNum: 1,
      loading: false,
      scroller: null,
      isLoaded: false,
      loadingText: '正在加载中...'
    }
  },
  components: {
    loading, infiniteScroll
  },
  mounted() {
    this.scroller = this.$el
    this.loadingShow = true
    request({
      url: '/api/MarketingToolApi/Activities/userActivities',
      method: 'post',
      data: {
        token: localStorage.getItem("token"),
        page: 1,
        limit: 20
      }
    }).then(response => {
      this.loadingShow = false
      this.list = response.data.list
    })
  },
  methods: {
    loadMore () {
      if(this.list ==''){
        return
      }
      let me = this;
      me.loading = true;
      me.loadingText = '正在加载中...'
      me.pageNum += 1;
      request({
        url: '/api/MarketingToolApi/Activities/userActivities',
        method: 'post',
        data: {
          token: localStorage.getItem("token"),
          page: me.pageNum,
          limit: 20
        }
      }).then(response => {
        if (response.data.list==''||!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">
#activityHistory{
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.activityListItem{
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
}
.activityListItemRight{
  width: 100%;
}
.activityListItemImg{
  display: block;
  width: 100px;
  height: 100px;
  margin-right: 10px;
}
.activityListItemTitle{
  font-size: 19px;
  color: #282B2F;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  img{
    width: 18px;
    height: 18px;
  }
}
.activityListDes{
  font-size: 12px;
  color: #70767A;
  justify-content: space-between;
  >div{
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    >img{
      width: 14px;
      height: 14px;
      margin-right: 5px;
    }
  }
  >.activityStatus{
    justify-content: flex-end;
    margin-bottom: 0;
    span{
      font-size: 12px;
      color: #FFFFFF;
      border-radius: 2px;
      padding: 1px 12px;
    }
    .activityStatusEnd{
      background: #6D7278;
    }
    .activityStatusRun{
      background: #F7B500;
    }
  }
}
</style>