<!--  -->
<template>
  <div
    :class="`my-course-info`"
    v-loading="infoLoading"
    @mouseenter="isMoveCourse = true"
    @mouseleave="isMoveCourse = false"
  >
    <!-- <div :class="`my-course-info ${isMoveCourse?'move-my-course-info':''}` " v-loading="infoLoading" @mouseenter="isMoveCourse = true" @mouseleave="isMoveCourse = false"> -->
    <div class="my-course-cover">
      <img :src="courseInfo.courseInfo.cover.fileLinkTransfer()" alt="" />
    </div>
    <div class="my-course-content">
      <div class="course-title">
        <h2 style="display: inline-block">
          {{ courseInfo.courseInfo.name }}
        </h2>
        <span
          class="course-status course-status-nodo"
          v-if="courseInfo.studyProgress == 1"
          >未开始</span
        >
        <span
          class="course-status course-status-todo"
          v-if="courseInfo.studyProgress == 2"
          >已进行</span
        >
        <span
          class="course-status course-status-overdo"
          v-if="courseInfo.studyProgress == 3"
          >已完成</span
        >
         <span
          class="course-status course-status-overdo-noAnswer"
          v-if="courseInfo.studyProgress == 3&&!courseInfo.isAnswer&&courseInfo.exercise?.length"
          >试题未答</span
        >
        <span
          class="course-status course-status-overdo"
          v-if="checkExerciseIsOver(courseInfo)"
        ></span>
      </div>
      <div class="course-update">
        <span class="create-time">
          <i class="el-icon-time"></i> 创建时间
          {{ new Date(courseInfo.courseInfo.createTime).format("yyyy-MM-dd") }}
        </span>
        <span class="create-time">
          <i class="el-icon-user"></i> 讲师：{{ courseInfo.lecturer?.name }}
        </span>
      </div>
      <div class="course-detailed">
        <span class="course-detailed-item"
          >课程分类：{{ courseInfo.classify?.name }}</span
        >
        <span class="course-detailed-item"
          >课程章节：{{ courseInfo.courseInfo?.sectionCount }}</span
        >
        <!-- <span class="course-detailed-item"
          >课程分值：{{ courseInfo.courseInfo?.grade }}</span
        > -->
        <span class="course-detailed-item"
          >课程难度：{{
            difficulty[courseInfo.courseInfo?.difficulty].name
          }}</span
        >
        <span class="course-detailed-item"
          >课程学时：{{ timeFormat(courseInfo.courseInfo.courseHours) }}</span
        >
        <span class="course-detailed-item"
          >已观看人数：{{ courseInfo.courseInfo.viewNumber }}</span
        >
      </div>
    </div>
    <div class="my-course-manage">
      <div @click="startStudy">
        <span
          class="study-open study-start"
          v-if="courseInfo.studyProgress == 1"
        >
          <i class="el-icon-notebook-1"></i> 开始学习</span
        >
        <span
          class="study-open study-continue"
          v-if="courseInfo.studyProgress == 2"
        >
          <i class="el-icon-timer"></i> 继续学习</span
        >
        <span
          class="study-open study-view"
          v-if="courseInfo.studyProgress == 3"
        >
          <i class="el-icon-collection"></i>
          再次查看</span
        >
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
  // import引入的组件需要注入到对象中才能使用
  props: {
    courseInfo: {
      type: Object,
      required: true
    }
  },
  components: {},
  data () {
    // 这里存放数据
    return {
      difficulty: {
        1: {
          name: '初级',
          id: 1
        },
        2: {
          name: '中级',
          id: 1
        },
        3: {
          name: '高级',
          id: 1
        }
      },
      classifyList_map: [],
      infoLoading: false,
      detailCourseInfo: undefined,
      isShowStudyBox: false,
      isMoveCourse: false
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async startStudy () {
      this.$emit('startStudy', this.courseInfo)
    },
    async getCourseInfo () {},
    timeFormat (minute) {
      const hours = Math.floor(minute / 60)
      const _minute = Math.floor(minute % 60)
      const second = (minute - Math.floor(minute)) * 60
      return `${hours}小时${_minute}分钟${second}秒`
    },
    checkExerciseIsOver (record) {

    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.listLoading = true
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeUnmount () {}, // 生命周期 - 销毁之前
  unmounted () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
.move-my-course-info {
  background-color: $--background-color-base;
}
.my-course-info:hover {
  background-color: $--background-color-base;
}
.my-course-info {
  margin: 0 5px 20px 0;
  display: flex;
  justify-content: space-between;
  padding: 10px 0 10px 5px;
  border-radius: 4px;
  height: 140px;
  .my-course-cover {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    border: 1px solid #eee;
    border-radius: 4px;

    img {
      width: 100%;
      height: 100%;
      display: block;
      overflow: hidden;
      object-fit: cover;
    }
  }
  .my-course-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    margin-right: 20px;
    .course-update {
      flex: 1;
      padding-top: 10px;
      > span {
        margin-right: 10px;
      }
    }
    .course-status {
      display: inline-block;
      margin-left: 10px;
      padding: 4px 10px;
      color: white;
      font-size: 12px;
      align-items: center;
      border-radius: 4px;
    }
    .course-status-nodo {
      background-color: #fe9139;
    }
    .course-status-overdo {
      background-color: #20cf92;
    }
    .course-status-todo {
      background-color: #ef4142;
    }
    .course-status-overdo-noAnswer{
      background-color: #ef4142;
    }
    .course-detailed {
      color: #ababab;
      > span {
        margin-right: 20px;
      }
    }
  }
  .my-course-manage {
    width: 100px;
    height: 100%;
    display: flex;
    align-items: center;
    .study-open {
      cursor: pointer;
      font-weight: 700;
      > i {
        font-weight: 700;
      }
    }
    .study-continue {
      color: #ef4142;
    }
    .study-start {
      color: #fe9139;
    }
    .study-view {
      color: #20cf92;
    }
  }
}
</style>
