<template>
  <div class="my-course">
    <div class="search-course">
      <SearchInput v-model="searchValue" @query="searchCourse" />
    </div>
    <el-tabs
      v-model="nowCheckType"
      type="card"
      @tab-click="handleClick"
      v-loading="listLoading"
    >
      <el-empty
        v-show="!showCourseList.length"
        description="暂无课程"
      ></el-empty>
      <el-tab-pane
        v-show="tabData.length > 0"
        :label="tab.label + listCounts"
        :name="tab.name"
        v-for="tab in tabData"
        :lazy="true"
        :key="tab.name"
        style="overflow: auto"
      >
        <div slot="label"> {{ tab.label }}{{ !searchValue?`(${tab.count})`:''}}</div>
        <div v-infinite-scroll="loadNewData">
          <MyCourseList v-for="course in showCourseList" :key="course.id" :courseInfo="course" @startStudy="startStudy" ></MyCourseList>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import MyCourseList from '../components/my-course-info.vue'
import { getMyCourseListAllAPI, getMyCourseListTypeAPI } from '@/api/online-course/my-course'
import { dataReportMixin } from '@/utils/data-report'
import SearchInput from '@/components/widget/QueryInput.vue'
export default {
  data () {
    return {
      nowCheckType: 0,
      tabData: [
        { name: 0, label: '所有课程', count: 0 },
        { name: 1, label: '未开始', count: 0 },
        { name: 2, label: '已学习', count: 0 },
        { name: 3, label: '已完成', count: 0 }
      ],
      pageInfo: { page: 1, pageSize: 10, total: 0 },
      showCourseList: [],
      listCounts: [],
      listLoading: false,
      searchValue: ''
    }
  },
  components: { MyCourseList, SearchInput },
  activated () {
    this.getMyCourseList()
  },
  methods: {
    handleClick (e, ev) {
      this.pageInfo.page = 1
      this.pageInfo.total = 0
      this.showCourseList = []
      this.getMyCourseList()
    },
    async getMyCourseList (searchValue) {
      this.listLoading = true
      let res
      if (!+this.nowCheckType) {
        const { data } = await getMyCourseListAllAPI({
          page: this.pageInfo.page,
          pageSize: this.pageInfo.pageSize,
          search: searchValue
        })
        const type = ['all', 'no', 'start', 'over']
        if (!this.searchValue) {
          type.forEach((type, i) => {
            this.tabData[i].count = data.count[type]
          })
        }

        data.data.forEach((course, index) => {
          const newData = course.record
          const oldData = course
          data.data[index] = newData
          data.data[index].courseInfo = oldData
        })
        res = data
      } else {
        const { data } = await getMyCourseListTypeAPI({
          page: this.pageInfo.page,
          pageSize: this.pageInfo.pageSize,
          type: this.nowCheckType
        })
        res = data
      }

      this.pageInfo.total = res.total
      this.showCourseList.push(...res.data)
      this.listLoading = false
    },
    startStudy (course) {
      this.$router.push('/online-course/my-course/course-study/' + course.id)
    },
    loadNewData (e) {
      if (this.pageInfo.page * this.pageInfo.pageSize > this.pageInfo.total) {
        return
      }
      if (this.showCourseList.length <= 0) {
        return
      }
      this.pageInfo.page++
      this.getMyCourseList()
    },
    searchCourse () {
      if (this.searchValue.trim()) {
        this.pageInfo.page = 1
        this.pageInfo.total = 0
        this.showCourseList = []
        this.getMyCourseList(this.searchValue)
        this.tabData = [{ name: 0, label: '所有课程', count: 0 }]
      } else {
        this.tabData = [
          { name: 0, label: '所有课程', count: 0 },
          { name: 1, label: '未开始', count: 0 },
          { name: 2, label: '已学习', count: 0 },
          { name: 3, label: '已完成', count: 0 }
        ]
        this.pageInfo.page = 1
        this.pageInfo.total = 0
        this.showCourseList = []
        this.getMyCourseList()
      }
    }
  },
  watch: {},

  mixins: [
    /**
     * 数据上报
     */
    dataReportMixin('ONLINE_COURSE')
  ]
}
</script>

<style lang="scss" scoped>
.my-course {
  height: 100%;
  position: relative;
  // overflow: hidden;
}
.search-course {
  position: absolute;
  right: 0;
  top: -5px;
  z-index: 5;
  border-bottom: 0px;
}
::v-deep .el-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-tab-pane {
    height: 100%;
    > div {
      height: 100%;
      overflow: auto;
    }
  }
}
::v-deep .el-form.el-form--label-left {
  .el-form-item__label {
    width: 60px !important;
    padding: 0 0 0 12px;
  }
}

::v-deep .el-tabs--card > .el-tabs__header {
  border: none;
  border-bottom: 1px solid #e4e7ed;
}

::v-deep .el-tabs__nav-scroll {
  border: none;

  .el-tabs__nav {
    // all:unset;
    border: unset;
    border-bottom: 1px solid #e4e7ed;

    .el-tabs__item {
      border-radius: 4px 4px 0 0 !important;
      border: 0;
      background: #fff;
      color: $--color-primary;

      &.is-active {
        background: $--color-primary;
        color: #fff;
      }
    }
  }
}
</style>
