<template>
  <div id="applyCon">
    <ul>
      <li class="applyListItem" @click="toActivity(item)" v-for="item in list">
        <img class="applyListItemImg" :src="item.thumb">
        <p class="applyListItemTitle">{{item.title}}</p>
        <div class="applyListDes">
          <div>
            <img src="../assets/icon_enrollment.png">
            <span>活动时间：{{item.beginTime}} ~ {{item.endTime}}</span>
          </div>
          <div v-if="item.status==1">活动进行中</div>
          <div v-else-if="item.status==2">活动已结束</div>
          <div v-else-if="item.status==3">报名截止还剩：<span v-if="item.diffDays<=1">不足</span>{{item.diffDays}}天</div>
        </div>
        <div class="applyListDes">
          <div>
            <img src="../assets/icon_activitytime.png">
            <span>报名人数：{{item.participants}}/{{item.peoples}}</span>
          </div>
        </div>
      </li>
    </ul>
    <infinite-scroll :scroller="scroller" :loading="loading" :isLoaded="isLoaded" :loadingText="loadingText" @load="loadMore"/>
    <navigation :is-x="isX" :apply-status="applyStatus" :tool-status="toolStatus" :mine-status="mineStatus"></navigation>
    <loading :loadingShow="loadingShow"></loading>
  </div>
</template>
<script>
import navigation from '../components/navigaton/navigation.vue'
import request from '../utils/request'
import loading from '../components/loading/loading.vue'
import infiniteScroll from '../components/infiniteScroll/infiniteScroll.vue'
export default {
  data() {
    return{
      isX: false,
      applyStatus: true,
      toolStatus: false,
      mineStatus: false,
      loadingShow: false,//加载

      list: [],

      pageNum: 1,
      loading: false,
      scroller: null,
      isLoaded: false,
      loadingText: '正在加载中...'
    }
  },
  components: {
    navigation, loading, infiniteScroll
  },
  mounted() {
    this.scroller = this.$el
    // var u = navigator.userAgent, app = navigator.appVersion;
    // var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    // if (isiOS) {
    //   var w=window.screen.width * window.devicePixelRatio;
    //   var h=window.screen.height * window.devicePixelRatio;
    //   if(w==1125&&h==2436){
    //     this.isX = true;
    //   }
    // }

    this.loadingShow = true
    request({
      url: '/api/MarketingToolApi/Activities/list',
      method: 'post',
      data: {
        page: 1,
        limit: 20
      }
    }).then(response => {
      this.loadingShow = false
      this.list = response.data.list
    })
  },
  methods: {
    toActivity(item) {
      this.$router.push({name: 'activityDetail',params:{id: item.activityId}})
    },
    loadMore () {
      let me = this;
      me.loading = true;
      me.loadingText = '正在加载中...'
      me.pageNum += 1;
      request({
        url: '/api/MarketingToolApi/Activities/list',
        method: 'post',
        data: {
          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">
#applyCon{
  padding-bottom: 60px;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.applyListItem{
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
}
.applyListItemImg{
  display: block;
  width: 100%;
  height: 200px;
}
.applyListItemTitle{
  font-size: 19px;
  color: #282B2F;
  padding: 10px 0 5px;
}
.applyListDes{
  font-size: 12px;
  color: #70767A;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  >div{
    display: flex;
    align-items: center;
    >img{
      width: 14px;
      height: 14px;
      margin-right: 5px;
    }
  }
}
</style>