<template>
  <div class="mainPage">
    <scroll ref='scroll' :isloading='isloading' class='wrapper' :data='courseOrderList.list' :pullUpLoad='pullUpLoadObj' :startY='parseInt(startY)' @pullingUp='getList'>
      <div class="box">
        <div class="order-card flex-h" v-for="(item,index) in courseOrderList.list" :key='index' :class="{'opacity' : item.IsDone === 1 || (item.IsDone === 0 && now > time(item.EndDate)) }" @click="toDetail(item)">
          <div class="card-pic">
            <div :class="{'gray-location' : item.IsDone === 1 || (item.IsDone === 0 && now > time(item.EndDate)) }"><span>{{returnLocationName(item.LocationId)}}</span></div>
            <img :src="item.CourseImg" class="cover" width="100%" height="100%" alt="">
          </div>
          <div class="card-msg">
            <div class="title">{{item.CourseName}}</div>
            <div class="text" v-if="item.CourseObtaimType === 'cheng-coin'">付款方式：城币支付</div>
            <div class="text" v-if="item.CourseObtaimType === 'card'">付款方式：卡券抵用</div>
            <div class="text" v-if="item.CourseObtaimType === 'coupon'">付款方式：优惠券抵用</div>
            <div class="text">下单时间：{{toolClass.dateFormat(item.CreateDate)}}</div>
          </div>
          <div class="card-price">
            <div class="price" style="white-space: nowrap;">￥ {{item.Price}}</div>
            <div class="type un-use" v-if="item.IsDone === 0 && now < time(item.EndDate)">未使用</div>
            <div class="type" v-if="item.IsDone === 1">已使用</div>
            <div class="type" v-if="item.IsDone === 0 && now > time(item.EndDate)">已失效</div>
          </div>
        </div>
        <noMore v-if="noData"></noMore>
        <!-- <span v-if="noData" style="width:100%;display:block;text-align:center;font-size:.11rem;color:#ccc;">暂无数据</span> -->
      </div>
    </scroll>
  </div>
</template>

<script>
// 上拉加载组件
import scroll from '../../../components/scroll/scroll'
import noMore from '../../../components/noMore/noMore'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapUserActions, mapState: mapUserState } = createNamespacedHelpers('userCenter')
export default {
  data () {
    return {
      noData: false,
      hasPic: false,
      pullUpLoad: true,
      pullUpLoadThreshold: 40,
      startY: 0,
      page: 1,
      isloading: true,
      hasMore: true,
      list: [],
      now: ''
    }
  },
  components: {
    scroll,
    noMore
  },
  created () {
    this.now = Date.now()
    var _that = this
    this.getCourseLocationList().then((res) => {
      // console.log(JSON.stringify(res))
      this.getCourseOrderList({ page: this.page }).then((res) => {
        // console.log(JSON.stringify(res))
        if (res.list === null) {
          this.noData = true
        }
      })
    })
  },
  computed: {
    ...mapUserState({
      courseOrderList: x => x.courseOrderList,
      courseLocationList: x => x.courseLocationList,
    }),
    pullUpLoadObj: function () {
      return this.pullUpLoad
        ? {
          threshold: parseInt(this.pullUpLoadThreshold),
          txt: {
            more: this.pullUpLoadMoreTxt,
            noMore: this.pullUpLoadNoMoreTxt
          }
        }
        : false
    }
  },
  methods: {
    ...mapUserActions([
      'getCourseOrderList',
      'getCourseLocationList',
    ]),
    returnLocationName (id) {
      for (var n = 0; n < this.courseLocationList.length; n++) {
        if (this.courseLocationList[n].LocationId === id) {
          return this.courseLocationList[n].LocationName
        }
      }
    },
    getList () {
      var _that = this
      Math.ceil(this.courseOrderList.pagenum / this.courseOrderList.pagesize) > this.page ? this.hasMore = true : this.hasMore = false
      // this.list.length <= 8 ? this.hasMore = true : this.hasMore = false
      if (this.hasMore) {
        setTimeout(() => {
          this.getCourseOrderList({
            page: _that.page + 1
          }).then((res) => {
            if (res.list.length) {
              _that.page += 1
            }
          })
        }, 1000)
      } else {
        this.$refs.scroll.forceUpdate()
        return false
      }
    },
    toDetail (item) {
      this.$router.push({ name: 'lessonDetail', query: { id: item.CustomerCourseId } })
    },
    time (time) {
      return new Date(time).getTime()
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'page.scss';
</style>
