<template>
  <el-card class="course-card" shadow="hover" @click="toCourseInfo">
    <img :src="imageUrl" alt="" class="image">
    <el-row>
      <el-col :span="16" class="name">{{ title }}</el-col>
      <el-col :span="8" class="status">
        <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==='FINISHED'" size="small" type="danger">已结束</el-tag>
      </el-col>
    </el-row>
    <el-row class="teacher">
      教师: {{ teacher }}
    </el-row>
    <el-row class="semester">
      季度: {{ semester }}
    </el-row>
    <el-row class="time">
      时间: {{ startTime }} 至 {{ endTime }}
    </el-row>
    <el-row class="description">
      {{ description }}
    </el-row>
    <el-row v-if="isManagePage">
      <div class="button">
        <el-button type="primary" size="small" icon="el-icon-edit" round plain @click.stop="$emit('update')">修改</el-button>
        <el-button type="danger" size="small" icon="el-icon-delete" round plain @click.stop="$emit('delete')">删除</el-button>
      </div>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: "CourseCard",
  props: {
    courseVO: Object,
  },
  data() {
    return {
      noImgUrl: this.$variables.noImgUrl,
    };
  },
  computed: {
    imageUrl() {
      return this.courseVO.imageUrl === null ? this.noImgUrl : this.courseVO.imageUrl + "?t=" + Date.now().valueOf();
    },
    title() {
      return this.courseVO.name;
    },
    state() {
      const now = new Date();
      if (new Date(this.courseVO.endTime) < now) {
        return "FINISHED";
      } else if (new Date(this.courseVO.startTime) > now) {
        return "NOT_STARTED";
      } else {
        return "RUNNING";
      }
    },
    teacher() {
      return this.courseVO.teacher.name || "无教师姓名";
    },
    semester() {
      return this.courseVO.semester || "无季度信息";
    },
    startTime() {
      return this.timestampToTime(this.courseVO.startTime);
    },
    endTime() {
      return this.timestampToTime(this.courseVO.endTime);
    },
    description() {
      return this.courseVO.description.length > 28 ? this.courseVO.description.substring(0, 28) + "..." : this.courseVO.description;
    },
    isManagePage() {
      return this.$route.name === "Manage" && this.$store.getters.isTeacher;
    },
  },
  emits: ["delete", "update"],
  methods: {
    timestampToTime(timestamp) {
      const date = new Date(timestamp);
      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;
    },
    toCourseInfo() {
      this.$router.push("/course/" + this.courseVO.id);
    },
  },
};
</script>

<style scoped>
.course-card {
  margin-bottom: 10px;
  border-radius: 8px;
  position: relative;
  border: 1px solid #cccccc;
  padding-top: 100px;
}

.course-card:hover {
  cursor: pointer;
}

.image {
  position: absolute;
  height: 100px;
  width: 100%;
  top: 0;
  left: 0;
  outline: solid 1px #eeeeee;
  min-height: 60px;
  object-fit: cover;
}

.name {
  font-weight: bold;
}

.status {
  text-align: right;
}

.teacher {
  font-size: 10px;
  margin-top: 10px;
  color: #999999;
}

.semester {
  margin-top: 4px;
  font-size: 10px;
  color: #999999;
}

.time {
  margin-top: 4px;
  font-size: 10px;
  color: #999999;
}

.description {
  background-color: #f6f6f6;
  margin-top: 10px;
  border-radius: 8px;
  padding: 10px;
  font-size: 10px;
  color: #777777;
}

.button {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  width: 100%;
}
</style>
