<template>
  <div>
    <!-- 最新直播 -->
    <course-latest-live />
    <div class="con-title">{{ $t('pages.learn.course.title') }}</div>
    <!-- 筛选 -->
    <div class="con-box">
      <template v-for="(item, index) in find">
        <ul v-bind:key="index" class="tabs-list">
          <template v-if="find[index].arrItem.length">
            <li class="tabs-hd">{{ item.name }}</li>
            <template v-for="(item1, index1) in item.arrItem">
              <li v-bind:key="index1">
                <div
                  :class="['tab', item.selectIndex == index1 ? 'on' : '']"
                  @click="selFindSelect"
                  :data-index="index1"
                  :data-i="index"
                  :data-key="item.key"
                  :data-val="item1.val"
                >
                  {{ item1.name }}
                </div>
              </li>
            </template>
          </template>
        </ul>
      </template>
    </div>
    <!-- 排序 -->
    <div class="switch-box">
      <el-button type="info" size="medium" plain @click="studyEarlyUpdate">
        {{ $t('pages.learn.course.lastLearn') }}
        <i :class="['el-icon-caret-' + (filter.studyEarly == 'down' ? 'bottom' : 'top'), 'icon']"></i>
      </el-button>
      <el-button type="info" size="medium" plain @click="selectTimeUpdate">
        {{ $t('pages.learn.course.updateTime') }}
        <i :class="['el-icon-caret-' + (filter.selectTime == 'down' ? 'bottom' : 'top'), 'icon']"></i>
      </el-button>
      <!--
      <el-button class="rbtn" type="primary" size="medium" icon="el-icon-self-cc-book icon" @click="goCourseAll">
        {{ $t('pages.learn.course.changeCourse') }}
      </el-button>
      -->
    </div>
    <!-- 课程列表 -->
    <div class="con-box" v-loading="loading">
      <ul class="course-list" v-if="homeList.length">
        <course-list-item v-for="(item, index) in homeList" :data="item" :key="index"></course-list-item>
      </ul>
      <div class="no-data" v-else>{{ $t('pages.learn.course.noCourseStr') }}</div>
    </div>
  </div>
</template>

<script>
import cAction from '@action'
import CourseLatestLive from './course/components/CourseLatestLive.vue'
import CourseListItem from './course/components/CourseListItem'
export default {
  components: { CourseLatestLive, CourseListItem },
  data() {
    return {
      filter: {
        studyEarly: 'down',
        selectTime: 'down'
      },
      find: [
        {
          name: this.$t('pages.learn.course.semeter'),
          isShow: false,
          selectIndex: 0,
          key: 'semester_id',
          arrItem: [] // 从后台请求
        },
        {
          name: this.$t('pages.learn.course.courseType'),
          isShow: false,
          selectIndex: 0,
          key: 'course_type',
          arrItem: [
            {
              val: '-1',
              name: this.$t('pages.learn.course.allLearn')
            },
            {
              val: '1',
              name: this.$t('pages.learn.course.mustLearn')
            },
            // {
            //   val: '2',
            //   name: this.$t('pages.learn.course.changeLearn')
            // },
            {
              val: '3',
              name: this.$t('pages.learn.course.repeatLearn')
            }
          ]
        }
      ],
      homeList: [], // 从后台请求
      param: {},
      loading: false
    }
  },
  mounted() {
    cAction.Course.getLearnFind()
      .then(data => {
        this.find[0].arrItem = data
        this.getAjaxList(true, this.$t('pages.learn.course.goCourseAllStr'))
      })
      .catch(e => {
        this.$message.error(e.message)
      })
      .finally(() => {})
  },
  methods: {
    goCourseAll() {
      this.$router.push({
        path: '/app/learn/course-all'
      })
    },
    getAjaxList(bool, str) {
      this.loading = true
      cAction.Course.getCourseList(bool, this.param)
        .then(json => {
          this.homeList = json
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * 分类选择 - 选中某一项
     */
    selFindSelect(e) {
      const _data = e.currentTarget.dataset
      const index = _data.index
      const json = this.find
      const i = _data.i
      json[i].selectIndex = index
      json[i].isShow = false
      if (_data.val === '-1') {
        delete this.param[_data.key]
      } else {
        this.param[_data.key] = _data.val
      }

      /* 调用接口 */
      this.getAjaxList(true, this.$t('pages.learn.course.noFitCourseStr'))
    },
    /**
     * 筛选 - 最近学习顺序
     */
    studyEarlyUpdate() {
      const na = this.filter.studyEarly === 'up' ? 'down' : 'up'
      this.filter.studyEarly = na
      if (na === 'down') {
        this.param.order_type = 'learn_time'
      } else if (na === 'up') {
        this.param.order_type = '-learn_time'
      }

      this.getAjaxList(true, this.$t('pages.learn.course.goCourseAllStr'))
    },
    /**
     * 筛选 - 选修时间顺序
     */
    selectTimeUpdate() {
      const na = this.filter.selectTime === 'up' ? 'down' : 'up'
      this.filter.selectTime = na
      if (na === 'down') {
        this.param.order_type = 'join_time'
      } else if (na === 'up') {
        this.param.order_type = '-join_time'
      }

      this.getAjaxList(true, this.$t('pages.learn.course.goCourseAllStr'))
    }
  }
}
</script>

<style lang="scss" scoped>
/* 列表 筛选 */
ul.tabs-list {
  float: left;
  width: 100%;
  margin: 0 0 0.15rem 0;
  padding: 0;
  font-size: 0.16rem;
  line-height: 1.5;
  border-top: 1px solid #e8e8e8;

  &:last-child {
    margin-bottom: 0;
  }

  .tabs-hd {
    display: inline-block;
    color: #fff;
    padding: 5px 0 9px;
    margin-top: -5px;
    width: 94px;
    text-align: center;
    background: url('~@/assets/images/type.png') no-repeat 0 0;
  }

  li {
    float: left;
    list-style: none;
    padding: 0.1rem 0;
    margin-right: 0.2rem;

    .tab {
      padding: 0 0.1rem;
      cursor: pointer;

      &.on {
        background: #b49441;
        color: #ffffff;
      }

      &:focus,
      &:hover {
        color: #b49441;
        background: #eeeeee;
      }
    }
  }
}

/* 筛选按钮 */
.switch-box {
  margin: 0 0.3rem;

  .icon {
    margin-left: 0.1rem;
  }

  .rbtn {
    float: right;
  }
}

/* 课程列表 */
ul.course-list {
  margin: 0;
  padding: 0;
  font-size: 0.18rem;
  color: #313131;
}
.no-data {
  text-align: center;
  line-height: 2rem;
}

@media (max-width: 767px) {
  .switch-box {
    margin: 0;
  }
}
</style>
