<template>
  <el-card class="body" shadow="hover" @click="this.$router.push('/course/' + this.courseVO.id)">
    <el-row>
      <el-col :span="6">
        <img :src="imageUrl" alt="err" class="course-img">
      </el-col>
      <el-col :span="2"/>
      <el-col :span="16">
        <el-row>
          <el-col :span="18" class="title">{{ title }}</el-col>
          <el-col :span="4">
            <el-tag v-if="state==='NOT_STARTED'" size="small" type="info">未开始</el-tag>
            <el-tag v-else-if="state==='RUNNING'" size="small">进行中</el-tag>
            <el-tag v-else-if="state==='OVER'" size="small" type="danger">已结束</el-tag>
          </el-col>
        </el-row>
        <el-row class="info">
          <el-col>
            <el-row class="teacher">教师: {{ teacher }}</el-row>
            <el-row class="time">开课时间: {{ startTime }}</el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: "MyCourseCard",
  props: {
    courseVO: Object,
  },
  computed: {
    title() {
      return this.courseVO.name || "无课程名称";
    },
    state() {
      const now = new Date();
      if (new Date(this.courseVO.endTime) < now) {
        return "OVER";
      } else if (new Date(this.courseVO.startTime) > now) {
        return "NOT_STARTED";
      } else {
        return "RUNNING";
      }
    },
    teacher() {
      return this.courseVO.teacher.name || "无教师名称";
    },
    imageUrl() {
      return this.courseVO.imageUrl === null ? this.$variables.noImgUrl : this.courseVO.imageUrl;
    },
    startTime() {
      const date = new Date(this.courseVO.startTime);
      const Y = date.getFullYear() + "-";
      const M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
      const D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      return Y + M + D;
    },
  },
};
</script>

<style scoped>
.body {
  min-width: 250px;
  margin-bottom: 8px;
  position: relative;
  border: 1px solid #cccccc;
}

.body:hover {
  cursor: pointer;
  border: 1px solid #aaaaaa;
}

.course-img {
  width: 100%;
  min-height: 50px;
  height: 100%;
  outline: solid 1px #dddddd;
  border-radius: 4px;
  object-fit: cover;
}

.title {
  font-weight: bold;
  font-size: medium;
  margin-bottom: 10px;
}

.info {
  position: absolute;
  bottom: 0;
}

.teacher {
  font-size: 12px;
  color: #999999;
}

.time {
  font-size: 12px;
  color: #999999;
}
</style>