<template>
  <el-card class="body" shadow="hover" @click="toTestInfo">

    <div :style="{borderBottom: type==='eval' ? '30px solid #f5b86e' : '30px solid #8dc9e2'}"
         style="float: right; width: 0; height: 0; position: absolute;right: 0;bottom: -1px;border-left: 30px solid transparent;">
      <div v-if="type==='eval'" style="padding: 0 4px 0 4px; position: absolute; right: 0; bottom: -30px; color: white">
        E
      </div>
      <div v-else style="padding: 0 3px 0 3px; position: absolute; right: 0; bottom: -30px; color: white">
        C
      </div>
    </div>

    <el-row>
      <el-col :span="20">
        <el-col class="title">
          {{ title }}
        </el-col>
      </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_IN'" size="small" type="success">已参加</el-tag>
        <el-tag v-else-if="state==='RUNNING_NOT'" size="small">未参加</el-tag>
        <el-tag v-else-if="state==='FINISHED'" size="small" type="danger">已结束</el-tag>
        <el-tag v-else-if="state==='CLOSED'" size="small" type="info">已关闭</el-tag>
      </el-col>
    </el-row>

    <el-row class="course" v-if="course!==''">
      {{ course }}
    </el-row>

    <el-row class="teacher">
      {{ teacherName }}
    </el-row>

    <el-row class="test-period">
      {{ timePeriod }}
    </el-row>
  </el-card>
</template>

<script>
import { ElMessageBox } from "element-plus";

export default {
  name: "MyTestCard",
  props: {
    testVO: Object,
  },
  data() {
    return {
      teacher: "Loading...",
    };
  },
  computed: {
    type() {
      if (this.testVO.examId) {
        return "eval";
      } else {
        return "coder";
      }
    },
    title() {
      if (this.type === "eval") {
        return this.testVO.examName;
      } else {
        return this.testVO.name;
      }
    },
    course() {
      if (this.type === "eval") {
        return "";
      } else {
        return "所属课程: " + this.testVO.course;
      }
    },
    teacherName() {
      if (this.type === "eval") {
        return "教师: " + this.teacher.name;
      } else {
        return "教师: " + this.teacher;
      }
    },
    timePeriod() {
      if (this.type === "eval") {
        return "时间: " + this.testVO.startTime.substring(0, 16) + "至" + this.testVO.endTime.substring(0, 16);
      } else {
        return "时间: " + this.timestampToTime(this.testVO.startAt) + "至" + this.timestampToTime(this.testVO.endAt);
      }
    },
    state() {
      const now = new Date();
      if (this.type === "eval") {
        if (new Date(this.testVO.endTime) < now) {
          return "FINISHED";
        } else if (new Date(this.testVO.startTime) > now) {
          return "NOT_STARTED";
        } else if (this.testVO.isJoined) {
          return "RUNNING_IN";
        } else {
          return "RUNNING_NOT";
        }
      } else {
        if (this.testVO.status === "CLOSED") {
          return "CLOSED";
        } else if (this.testVO.startAt * 1000 > now) {
          return "NOT_STARTED";
        } else if (this.testVO.endAt * 1000 < now) {
          return "FINISHED";
        } else if (this.testVO.joined) {
          return "RUNNING_IN";
        } else {
          return "RUNNING_NOT";
        }
      }
    },
  },
  async created() {
    if (this.type === "eval") {
      this.teacher = (await this.$apis.getUserAPI(this.testVO.creatorId)).data.data;
    } else {
      this.teacher = (await this.$apis.getNameByUsernameAPI(this.testVO.creator.username)).data.data;
    }
  },
  methods: {
    timestampToTime(timestamp) {
      const date = new Date(timestamp * 1000);
      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()) + " ";
      const h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      const m = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes());
      return Y + M + D + h + m;
    },
    toTestInfo() {
      let messageBoxContent = "";
      let messageBoxTitle = "";
      let confirmButtonText = "";
      let cancelButtonText = "让我想想";
      let nextURL = "";

      if (this.type === "eval") {
        messageBoxTitle = "Eval";
        if (this.testVO.isJoined) {
          nextURL = "https://eval.seec.seecoder.cn/exam/" + this.testVO.examId + "/before-exam/?id_token=" + this.$store.state.user.token;
          window.open(nextURL);
          return;
        } else {
          messageBoxContent = "尚未参加该测试，是否立即参加？";
          confirmButtonText = "立即参加";
          nextURL = "https://eval.seec.seecoder.cn/student/home/?id_token=" + this.$store.state.user.token;
        }
      } else {
        messageBoxTitle = "Coder";
        if (this.testVO.joined) {
          nextURL = "https://coder.seec.seecoder.cn/exam/" + this.testVO.id + "?id_token=" + this.$store.state.user.token;
          window.open(nextURL);
          return;
        } else {
          messageBoxContent = "尚未参加该测试，是否立即参加？";
          confirmButtonText = "立即参加";
          nextURL = "https://coder.seec.seecoder.cn/exam?id_token=" + this.$store.state.user.token;
        }
      }

      ElMessageBox.confirm(messageBoxContent, messageBoxTitle, {
        distinguishCancelAndClose: true,
        confirmButtonText,
        cancelButtonText,
      }).then(() => {
        if (nextURL.startsWith("http")) {
          window.open(nextURL);
        } else {
          this.$router.push(nextURL);
        }
      });
    },
  }
};
</script>

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

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

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

.course {
  font-size: x-small;
}

.teacher {
  font-size: x-small;
  color: #888888;
}

.test-period {
  border-radius: 4px;
  font-size: x-small;
  color: #999999;
}
</style>