<template>
  <el-row class="body" @click="jump">
    <el-col :span="4" style="display: flex; flex-direction:column; justify-content: space-between;margin-left: 4px">
      <el-row>
        <el-tag size="large" type="" v-if="type === 'ANNOUNCEMENT'" class="tag">公告</el-tag>
        <el-tag size="large" type="success" v-else-if="type === 'HOMEWORK'" class="tag">作业</el-tag>
        <el-tag size="large" type="warning" v-else-if="type === 'EXAM'" class="tag">考试</el-tag>
        <el-tag size="large" type="" v-else-if="type === 'COMMENT'" class="tag">回复</el-tag>
        <el-tag size="large" type="warning" v-else-if="type === 'COURSE'" class="tag">评论</el-tag>
      </el-row>
      <el-row class="time">
        {{ time }}
      </el-row>
    </el-col>
    <el-col :span="4" style="display: flex; flex-direction:column; justify-content: space-between">
      <el-row class="title">
        {{ title }}
      </el-row>
      <el-row class="course" v-if="course!==''">
        相关课程: {{ course }}
      </el-row>
      <el-row class="sender">
        {{ sender }}
      </el-row>
    </el-col>
    <el-col :span="10">
      <el-row class="content">
        {{ content }}
      </el-row>
    </el-col>
    <el-col :span="2"/>
    <el-col :span="2" style="display: flex; flex-direction:column; justify-content: center">
      <div>
        <span>详情</span>
        <el-icon :size="20" style="position: relative; top: 5px">
          <ArrowRightBold/>
        </el-icon>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import {ArrowRightBold} from "@element-plus/icons-vue";

export default {
  name: "MessageCard",
  components: {ArrowRightBold},
  props: {
    messageVO: {
      type: Object
    }
  },
  data() {
    return {
      course: "",
    };
  },
  computed: {
    type() {
      return this.messageVO.type || this.messageVO.actionType;
    },
    time() {
      const date = new Date(this.messageVO.createdAt);
      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;
    },
    title() {
      return this.messageVO.title || "回复评论";
    },
    sender() {
      return "来自: " + this.messageVO.sender.name;
    },
    content() {
      return this.messageVO.content.length > 20 ? this.messageVO.content.substring(0, 20) + "..." : this.messageVO.content;
    },
  },

  async created() {
    if (this.messageVO.courseId) {
      this.course = (await this.$apis.getCourseById(this.messageVO.courseId)).data.data["name"];
    }
  },

  methods: {
    async jump() {
      if (this.messageVO.courseId) {
        await this.$router.push({ name: "CourseDetail", params: { jump_from_message: "1", id: this.messageVO.courseId } });
      } else {
        const viewInfo = (await this.$apis.getViewByMessage(this.messageVO.id)).data.data;
        await this.$apis.readMessage(this.messageVO.id);
        await this.$router.push({ name: "CourseDetail", params: { jump_from_message: "2", id: viewInfo["course"] } });
      }
    }
  }
};
</script>

<style scoped>
.body {
  height: 70px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 5px;
}

.body:hover {
  background: #f9fcff;
  cursor: pointer;
}

.tag {
  width: 80px;
  text-align: center
}

.time {
  font-weight: lighter;
}

.title {
  font-weight: bold;
  font-size: medium;
}

.course {
  font-size: small;
  color: #999999;
}

.sender {
  font-size: small;
  color: #999999;
}

.content {
  margin: 10px 20px 0 20px;
  border-radius: 6px;
  padding: 10px;
  background: #f6f6f6;
  font-size: small;
  color: #777777;
}
</style>