<template>
  <div class="course-chapter">
    <el-collapse v-model="activeNames">
      <template v-for="(item, index) in chapters">
        <el-collapse-item :title="item.name" :name="item.id" :key="item.id" v-if="item.children">
          <ul>
            <li v-for="subItem in item.children" :key="subItem.id" @click="handleClick(subItem)">
              <div class="name">{{ subItem.name }}</div>
              <div class="duration">
                <!-- 视频 -->
                <template v-if="subItem.video">{{ formatDuration(subItem.video.video_length) }}</template>
                <!-- 直播 -->
                <template v-if="subItem.live">
                  {{ subItem.live.start_time }}
                  {{ calcTimeText(subItem.live) }}
                </template>
              </div>
            </li>
          </ul>
        </el-collapse-item>
        <div class="el-collapse-item" :key="item.id + index" @click="handleClick(item)" v-else>
          <div class="el-collapse-item__header">{{ item.name }}</div>
        </div>
      </template>
    </el-collapse>
  </div>
</template>

<script>
export default {
  props: {
    course: { type: Object, default: () => ({}) }
  },
  data() {
    return {
      activeNames: []
    }
  },
  computed: {
    sid() {
      return this.$route.params.sid
    },
    cid() {
      return this.$route.params.cid
    },
    // 章节列表
    chapters() {
      const chapters = this.course.chapters || []
      const customeChapter = [
        { name: this.$t('viewerMain.courseData'), id: 'course_info', type: 100 }
        // { name: this.$t('viewerMain.teachingEvaluation'), id: 'teach_evaluation', type: 102 }
      ]
      // 课程大作业
      if (this.course.curriculum && this.course.curriculum.curriculum_essay) {
        customeChapter.unshift({ name: this.$t('viewerMain.courseWork'), id: 'course_work', type: 99 })
      }
      // 课程考试
      if (this.course.course_examination) {
        customeChapter.push({ name: this.$t('viewerMain.courseExam'), id: 'course_exam', type: 101 })
      }
      const survey = window.QA_LIST.filter(item => item.course_id === this.cid).map((item, index, arr) => {
        const name = arr.length > 1 ? `教学评估 —— ${item.teacher_name}` : '教学评估'
        return { name, id: 'teach_evaluation', type: 102, order_id: index + 1 }
      })
      return chapters.concat(customeChapter, survey)
    }
  },
  methods: {
    handleClick(data) {
      // 直播
      const live = data.live
      if ([6, 8].includes(data.type) && live) {
        const hasRecordUrl = live.enable_record && live.record_url
        if ([3, 5].includes(live.live_status) && !hasRecordUrl) {
          this.$message.error(this.$t('viewerMain.liveEnd'))
          return
        }
        window.open(live.record_url || live.join_url, '_blank')
        return
      }
      // 课程大作业
      // if (data.id === 'course_work' && !this.course.survey) {
      //   this.$message(this.$t('viewerMain.teachingEvaluationTips'))
      //   return
      // }
      // 教学评估
      if (data.id === 'teach_evaluation') {
        if (this.course.surveys.includes(data.order_id + '')) {
          this.$message('已提交')
          return
        }
        const { sid, cid } = this.$route.params
        this.$router.push({ name: 'survey2', params: { sid, cid }, query: { order_id: data.order_id } })
        return
      }

      this.$router.push({ name: 'viewerCourseChapter', params: { sid: this.sid, cid: this.cid, id: data.id } })
    },
    formatDuration(duration) {
      const h = Math.floor(duration / 3600)
      const m = Math.floor((duration - h * 3600) / 60)
      const s = (duration - h * 3600 - m * 60) % 60
      function tenify(a) {
        return a >= 10 ? a : '0' + a
      }
      const to = { h: tenify(h), m: tenify(m), s: tenify(s) }
      const format = 'h:m:s'
      return format.replace(/h|m|s/g, k => to[k]).replace(/^00:/, '')
    },
    // 计算日期
    calcTimeText(data) {
      let { start_time: liveTime, live_status: liveStatus } = data
      const map = {
        1: this.$t('live.notStarted'),
        2: this.$t('live.liveStreaming'),
        3: this.$t('live.liveEnd'),
        4: this.$t('live.start'),
        5: this.$t('live.liveEnd')
      }
      let result = map[liveStatus] || liveTime

      if (liveStatus === 1 && liveTime) {
        liveTime = liveTime.replace(/-/g, '/')
        const time = (new Date(liveTime).getTime() - new Date().getTime()) / 1000 || 0
        if (time <= 5 * 60) {
          result = this.$t('live.start')
        } else if (time <= 1 * 60 * 60) {
          result = this.$t('live.startInMinutes', {
            minutes: parseInt(time / 60)
          })
        } else if (time <= 24 * 60 * 60) {
          result = this.$t('live.startInHours', {
            h: parseInt(time / (60 * 60)),
            min: parseInt((time / 60) % 60)
          })
        } else {
          result = this.$t('live.startInDay', {
            day: parseInt(time / (24 * 60 * 60))
          })
        }
      }
      if (liveStatus === 3 && data.enable_record && data.record_url) {
        result = this.$t('live.watchReplay')
      }
      return result
    }
  }
}
</script>

<style lang="scss" scoped>
.course-chapter {
  padding: 0.2rem;
  background-color: #fff;
}
.el-collapse {
  border: 0;
}
::v-deep .el-collapse-item {
  margin-bottom: 10px;
}
::v-deep .el-collapse-item__header {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  background-color: #e5e5e5;
  padding-left: 10px;
}
::v-deep .el-collapse-item__wrap {
  border-bottom: 0;
}
::v-deep .el-collapse-item__content {
  padding-bottom: 10px;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  display: flex;
  padding: 10px;
  cursor: pointer;
  color: #666;
  &:hover {
    color: #c01540;
    background-color: #f3f3f3;
  }
  .name {
    flex: 1;
    overflow: hidden;
  }
  .progress {
    margin-left: 20px;
    color: #999;
  }
}
</style>
