<template>
  <app-container :title="$t('pages.learn.courseDetail.title')" v-loading="loading">
    <div class="course-top">
      <div class="course-top-hd">
        <div class="course-top-hd-left">
          <div class="course-top__title">{{ curriculum.curriculum_name }}</div>
          <div class="course-top__text" v-html="topText"></div>
          <div class="course-top__progress">
            {{ $t('pages.learn.courseDetail.Videoviewingprogress') }}
            <el-progress :percentage="detail.video_progress" color="#b49441"></el-progress>
          </div>
        </div>
        <div class="course-top-hd-right">
          <el-button type="primary" size="small" @click="onChapterClick(latestVideo)" v-if="latestVideo">
            {{ buttonText }}
          </el-button>
        </div>
      </div>
      <div class="course-top-bd">
        <div class="course-top__pic"><img :src="curriculum.curriculum_picture" /></div>
        <div class="course-top__content" v-html="curriculum.curriculum_represent"></div>
      </div>
    </div>
    <div class="course-bottom">
      <div class="course-bottom-left">
        <el-tabs v-model="tabActive">
          <el-tab-pane lazy :label="$t('pages.learn.courseDetail.Coursecontent')">
            <course-chapter :course="detail"></course-chapter>
          </el-tab-pane>
          <el-tab-pane lazy :label="$t('pages.learn.courseDetail.Coursediscussion')">
            <course-discuss :course="detail"></course-discuss>
          </el-tab-pane>
          <el-tab-pane lazy :label="$t('pages.learn.courseDetail.Courseassessment')">
            <course-assessment :course="detail"></course-assessment>
          </el-tab-pane>
          <el-tab-pane lazy label="课程直播">
            <course-live :course="detail"></course-live>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="course-bottom-right">
        <el-tabs>
          <el-tab-pane label="课程讲师">
            <course-teacher :data="detail.lecturers"></course-teacher>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </app-container>
</template>

<script>
import AppContainer from '@/components/AppContainer'
import CourseChapter from './components/CourseChapter'
import CourseDiscuss from './components/CourseDiscuss'
import CourseAssessment from './components/CourseAssessment'
import CourseLive from './components/CourseLive'
import CourseTeacher from './components/CourseTeacher'
import * as api from '@/api/course'
export default {
  components: { AppContainer, CourseChapter, CourseDiscuss, CourseAssessment, CourseLive, CourseTeacher },
  data() {
    return {
      tabActive: '0',
      loading: false,
      detail: {
        chapters: []
      }
    }
  },
  computed: {
    sid() {
      return this.$route.params.sid
    },
    cid() {
      return this.$route.params.cid
    },
    curriculum() {
      return this.detail.curriculum || {}
    },
    buttonText() {
      return this.detail.latest_play
        ? this.$t('pages.learn.courseDetail.Keeplearning')
        : this.$t('pages.learn.courseDetail.Startlearning')
    },
    // 扁平化章节数据
    flatChapters() {
      return this.detail.chapters.reduce((result, item) => {
        return result.concat(item.children)
      }, [])
    },
    // 最新的视频
    latestVideo() {
      if (this.detail.latest_play && this.flatChapters.length) {
        return this.flatChapters.find(item => item.resource_id === this.detail.latest_play)
      } else {
        return this.flatChapters.length ? this.flatChapters[0] : null
      }
    },
    courseType() {
      const map = {
        1: this.$t('action.courseAction.mustLearn'),
        2: this.$t('action.courseAction.changeLearn'),
        3: this.$t('action.courseAction.repeatLearn')
      }
      return map[this.detail.course_type]
    },
    topText() {
      if (this.loading) {
        return ''
      }
      // 学分
      let output = `${this.curriculum.curriculum_credit}${this.$t('action.courseAction.credit')}`
      // 课程
      output += ` | ${this.courseType} | ${this.detail.semester_name} `
      // 时间
      if (this.detail.begin_date) {
        output += this.detail.begin_date + this.$t('action.courseAction.to') + this.detail.end_date + ' '
      }
      // 发布状态
      output += this.curriculum.is_enabled
        ? this.$t('action.courseAction.publish')
        : this.$t('action.courseAction.noPublish')
      return output
    }
  },
  methods: {
    // 课程学习
    getCourse() {
      this.loading = true
      api
        .getCourse(this.sid, this.cid)
        .then(response => {
          this.detail = response
        })
        .finally(() => {
          this.loading = false
        })
    },
    onChapterClick(data) {
      this.$router.push({ name: 'viewerCourseChapter', params: { cid: this.cid, id: data.id } })
    }
  },
  beforeMount() {
    this.getCourse()
  }
}
</script>

<style lang="scss" scoped>
.main-container {
  height: 100%;
  padding: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-sizing: border-box;
}
.course-top {
  padding-bottom: 20px;
}
.course-top-hd {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
}
.course-top-hd-left {
  flex: 1;
}
.course-top__title {
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}
.course-top__text {
  margin-top: 10px;
}
.course-top__progress {
  margin-top: 10px;
  display: flex;
  align-items: center;
  .el-progress {
    width: 50%;
    margin: 0 10px;
  }
}
.course-top-bd {
  display: flex;
}
.course-top__pic {
  width: 160px;
  height: 100px;
  margin-right: 20px;
  border-radius: 2px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.course-top__content {
  flex: 1;
  line-height: 24px;
  overflow: hidden;
}
.course-bottom {
  display: flex;
}
.course-bottom-left {
  flex: 1;
  overflow: hidden;
}
.course-bottom-right {
  margin-left: 20px;
  width: 300px;
}
</style>
