<template>
  <div class="mainPage" @scroll="pageScroll" ref="parentBox">
    <div class="flex-h">
      <div class="flex-item">
        <div ref="box">
          <ul>
            <router-link
              tag="li"
              v-for="(item,index) in list"
              :key="index"
              :to="{name: 'majorProjectsDetail', query: {id: item.id}}"
              class="flex-h"
            >
              <div class="flex-item">
                <div>
                  <courseItem :data="item" marginRight=".2"></courseItem>
                </div>
              </div>
            </router-link>
          </ul>
          <span class="footerWord" v-if="total === list.length">加载完毕</span>
          <span class="footerWord" v-else>正在加载更多</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex'
import courseItem from '../../../components/courseItem/index'
const { mapState: mapIndexState, mapActions: mapIndexActions } = createNamespacedHelpers('index')

export default {
  name: '',
  data () {
    return {
      list: [],
      ajaxOff: true,
      postData: {
        pagesize: 10,
        page: 1
      },
      total: 1
    }
  },
  computed: {
    ...mapState({
      orgid: x => x.app.orgId,
      fiveA: x => x.index.fiveA,
      banner: x => x.index.banner,
      message: x => x.index.message,
      project: x => x.index.project,
      cms: x => x.index.cms,
    }),
    ...mapIndexState({
      courseList: x => x.courseList
    })
  },
  components: {
    courseItem
  },
  created () {
    this.getData()
  },
  methods: {
    ...mapIndexActions(['getCourseList']),
    pageScroll () {
      var docHeight = this.$refs.box.offsetHeight, parHeight = this.$refs.parentBox.offsetHeight, scrollTop = this.$refs.parentBox.scrollTop
      if (scrollTop === docHeight - parHeight) {
        if (this.ajaxOff && this.list.length < this.total) {
          this.ajaxOff = false
          this.postData.page += 1
          this.getData()
        }
      }
    },
    getData () {
      this.getCourseList(this.postData).then((res) => {
        this.ajaxOff = true
        this.total = res.pagenum;
        (res.list || []).map((item) => {
          this.list.push({
            id: item.CourseId,
            title: item.CourseName,
            img: item.CourseImg,
            remark: this.toolClass.dateFormat(item.BeginDate, 'yyyy.MM.dd') + '~' + this.toolClass.dateFormat(item.EndDate, 'MM.dd'),
            address: item.CaseAddress,
            tag: item.CourseTags,
            courseType: '团体课',
            defaultPrice: item.Price + '/节',
            getWay: 'ticket',
            startDate: new Date(item.BeginDate).getTime(),
            endDate: new Date(item.EndDate).getTime(),
          })
        })
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import 'page.scss';
</style>
