<template>
  <div>
    <template v-if="newLiveMsg.live">
      <div class="live-msg">
        <div class="txt">直播提醒：</div>
        <div class="txt">您的直播课程 《{{ newLiveMsg.course_name }}》 将于 {{ newLiveMsg.live.start_time }} 开始</div>
        <el-button class="in-btn" type="primary" size="small" round @click="goLive">进入直播</el-button>
      </div>
    </template>
    <!-- <div class="con-title">{{ $t('pages.learn.course.title') }}</div> -->
    <div class="tab-box">
      <template v-for="(item, index) in find">
        <div class="tap-box" :key="index">
          <div class="name">{{ item.name }}</div>
          <ul>
            <template v-for="(item1, index1) in item.arrItem">
              <li
                :class="['tab', item.selectIndex == index1 ? 'active' : '']"
                @click="selFindSelect"
                :key="index1"
                :data-index="index1"
                :data-i="index"
                :data-key="item.key"
                :data-val="item1.val"
              >
                {{ item1.name }}
              </li>
            </template>
          </ul>
        </div>
      </template>
    </div>

    <!-- <div class="con-box">
    <template v-for="(item, index) in find">
      <ul v-bind:key="index" class="tabs-list" v-if="index != 0">
        <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>
      </ul>
    </template>
    </div>-->

    <!-- <div class="switch-box">
    <el-button type="info" size="medium" @click="studyEarlyUpdate" plain>{{ $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" @click="selectTimeUpdate" plain>{{ $t('pages.learn.course.updateTime') }}<i :class="['el-icon-caret-' + (filter.selectTime == 'down' ? 'bottom' : 'top'), 'icon']"></i></el-button>
    </div>-->
    <div class="new-height">
      <div class="study-title">我的学习</div>
      <div class="con-box" v-loading="loading">
        <ul class="course-list">
          <template v-for="(item, index) in homeList">
            <li v-bind:key="index" class="item">
              <div class="left-pic">
                <img :src="item.src" @click="goCourseContent(item)" v-if="item.src" />
                <template v-else>
                  <div class="no-img">
                    <i class="el-icon-self-13"></i>
                  </div>
                </template>
              </div>
              <div class="right-bd">
                <div class="title" @click="goCourseContent(item)">{{ item.title }}</div>
                <div class="tags">
                  <template v-for="(item1, index) in item.arrTab">
                    <span v-bind:key="index">{{ item1 }}</span>
                  </template>
                </div>
                <div class="time">
                  {{ item.status }}&emsp;&emsp;
                  <em>{{ item.time }}</em>
                </div>
                <!-- <div class="progress">
                {{ $t('pages.learn.course.progress') }}&emsp;<el-progress :percentage="item.progress > 99.5 ? 100 : item.progress" color="#b49441"></el-progress>
                </div>-->
                <div class="right-sel">{{ item.myStatus }}</div>
                <el-button
                  class="in-btn"
                  type="primary"
                  size="small"
                  round
                  @click="goCourseContent(item)"
                  v-show="canOpenCourse(item.id)"
                  >{{ $t('pages.learn.course.showCourse') }}</el-button
                >
              </div>
            </li>
          </template>
          <template v-if="!homeList.length">
            <div class="no-data">{{ $t('pages.learn.course.noCourseStr') }}</div>
          </template>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import cAction from '@action'
let UserInfo = {}
export default {
  components: {},
  data() {
    UserInfo = window.G.UserInfo.student_info || {}
    return {
      userInfo: {},
      filter: {
        studyEarly: 'down',
        selectTime: 'down'
      },
      find: [
        {
          name: '课程类型',
          isShow: false,
          selectIndex: 0,
          key: 'course_type',
          arrItem: [
            { val: '1', name: this.$t('action.courseAction.mustLearn'), show: UserInfo.is_open_textbook_learning },
            { val: '2', name: this.$t('action.courseAction.changeLearn'), show: UserInfo.is_open_required_course },
            { val: '3', name: this.$t('action.courseAction.repeatLearn'), show: UserInfo.is_open_extended_course }
          ]
        }
      ],
      homeList: [], // 从后台请求
      param: {
        course_type: 1,
        order_type: 'begin_date'
      },
      timeInterval: null,
      newLiveMsg: {},
      oneParamYype: 1,
      loading: false
    }
  },
  mounted() {
    this.userInfo = UserInfo
    if (this.timeInterval) {
      clearInterval(this.timeInterval)
      this.timeInterval = null
    }
    // 获取最新直播
    this.getLatestLive()
    // 定时获取最新直播
    this.timeInterval = setInterval(this.getLatestLive, 10000)
    this.find.forEach(k => {
      k.arrItem = k.arrItem.filter(l => Number(l.show) === 1)
    })
    // const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
    // cAction.Course.getLearnFind().then(data => {
    //   this.find[0].arrItem = data
    // }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    this.getAjaxList(true, this.$t('pages.learn.course.noFitCourseStr'))
  },
  destroyed() {
    if (this.timeInterval) {
      clearInterval(this.timeInterval)
      this.timeInterval = null
    }
  },
  methods: {
    // 是否可以打开课程详情
    canOpenCourse(courseId) {
      if (this.userInfo.is_open_course) {
        const ids = this.userInfo.open_course_id || []
        return ids.includes(courseId)
      }
      return true
    },
    goCourseAll() {
      this.$router.push({ path: '/app/learn/course-all' })
    },
    goCourseContent(data) {
      if (this.canOpenCourse(data.id)) {
        this.$router.push({ path: `/app/learn/course-detail/${data.id}` })
      }
    },
    getAjaxList(bool, str) {
      if (this.oneParamYype === 1) {
        if (Number(UserInfo.is_open_textbook_learning) === 1) {
          this.param.course_type = 1
        } else if (Number(UserInfo.is_open_required_course) === 1) {
          this.param.course_type = 2
        } else {
          this.param.course_type = 3
        }
        this.oneParamYype++
      }
      this.loading = true
      cAction.Course.getCourseList(bool, this.param)
        .then(json => {
          this.homeList = json
          if (!json.length) {
            this.$message(str)
          }
        })
        .catch(e => {
          this.$message.error(e.message)
        })
        .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.param.order_type = 'begin_date'
      }

      /* 调用接口 */
      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.noFitCourseStr'))
    },
    /**
     * 筛选 - 选修时间顺序
     */
    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.noFitCourseStr'))
    },
    /* 直接进直播 */
    goLive() {
      if (!this.canOpenCourse(this.newLiveMsg.course_id)) {
        this.$message.error('尚未开通该课程的观看权限')
        return
      }
      const live = this.newLiveMsg.live
      if (live.type === 8) {
        window.open(live.record_url || live.join_url)
      } else {
        this.$router.push({
          name: 'viewerCourseChapter',
          params: { cid: this.newLiveMsg.course_id, id: this.newLiveMsg.chapter_id }
        })
      }
    },
    // 获取最新直播
    getLatestLive() {
      cAction.Player.getNewLiveMsg()
        .then(json => {
          if (json.status === 200) {
            this.newLiveMsg = json.data
          }
        })
        .catch(e => {
          this.$message.error(e.message)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.live-msg {
  position: relative;
  padding: 15px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);

  .txt {
    padding-right: 100px;
  }

  .in-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* 列表 筛选 */
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;
  }

  li.item {
    padding: 0.1rem 0;
    list-style: none;
    border-bottom: 1px solid #dcdcdc;
    overflow: hidden;

    &:first-child {
      padding-top: 0;
    }

    &:last-child {
      margin-bottom: 0.2rem;
    }

    .left-pic {
      position: relative;
      float: left;
      width: 1.8rem;
      // min-height: 1rem;
      overflow: hidden;

      .no-img {
        width: 100%;
        height: 1rem;
        text-align: center;
        line-height: 1.1rem;
        border: 1px solid #e2e2e2;

        i {
          font-size: 0.4rem;
          color: #e2e2e2;
        }
      }

      img {
        // position: absolute;
        // top: 50%;
        // left: 50%;
        display: block;
        width: 100%;
        // height: 100%;
        // transform: translate(-50%, -50%);
        cursor: pointer;
      }
    }

    .right-bd {
      position: relative;
      display: block;
      margin-left: 2rem;

      .title {
        width: 80%;
        line-height: 1.5;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
      }

      .tags {
        margin: 0.05rem 0;
        font-size: 0.14rem;

        span {
          padding: 0 0.1rem;
          margin: 0;
          border-right: 1px solid #313131;

          &:first-child {
            padding-left: 0;
          }

          &:last-child {
            border: none;
          }
        }
      }

      .time {
        font-size: 0.12rem;

        em {
          font-style: normal;
          color: #898989;
        }
      }

      .progress {
        margin-top: 0.05rem;
        font-size: 14px;

        .el-progress {
          width: 50%;
          display: inline-block;
          vertical-align: text-bottom;
        }
      }

      .right-sel {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 14px;
        padding: 0 0.1rem;
      }

      .in-btn {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }
}
.tab-box {
  margin-left: 80px;
  margin-bottom: 20px;
  padding-top: 40px;
}
.con-box {
  margin: 0;
  padding: 20px 0;
}
.new-height {
  margin: 0 40px;
  background: #fff;
  padding: 0 40px;
  border-radius: 6px;
}
.study-title {
  font-size: 18px;
  color: rgba(51, 51, 51, 1);
  line-height: 65px;
  border-bottom: 1px solid #cccccc;
}

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

.tap-box {
  display: flex;
  align-items: center;
  .name {
    color: rgba(51, 51, 51, 1);
    font-size: 30px;
    line-height: 100%;
  }
  ul {
    margin: 0;
    padding: 0;
    margin-left: 20px;
    display: flex;
    li:last-child {
      border: none;
    }
    li.active {
      color: #2994ea;
    }
    li {
      font-size: 24px;
      color: #999;
      list-style: none;
      padding: 0 20px;
      border-right: 1px solid rgba(204, 204, 204, 1);
      cursor: pointer;
    }
  }
}
</style>
