<template>
  <div id="task-page-body">

    <el-card>
      <template #header>
          <span style="font-weight: bold; font-size: larger">
            即将到期
          </span>
      </template>
      <div id="task-page-expiring-main">
        <TestCard v-for="item in expiringTaskList_show" :key="item.id" :testVO="item"/>
      </div>
      <el-pagination
        :page-size="4"
        :total="expiringTaskList.length"
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        style="width: 200px; margin: 10px auto 0 auto"/>
    </el-card>

    <el-card>
      <template #header>
        <div style="display: flex; justify-content: space-between; align-content: center">
          <span style="font-weight: bold; font-size: larger;padding-top: 6px">
            我的任务
          </span>
          <el-select placeholder="Select" v-model="selector" filterable clearable>
            <el-option-group
              v-for="group in options"
              :key="group.label"
              :label="group.label"
            >
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-option-group>
          </el-select>
        </div>
      </template>
      <div id="task-page-all-task-main">
        <div class="task-content">
          <TestCard v-for="item in myTaskList" :key="item.id" :testVO="item"/>
        </div>
        <!--        <el-tabs v-model="activeTaskPaneName">-->
        <!--          <el-tab-pane label="评测" name="eval">-->
        <!--            <div class="task-content">-->
        <!--              <TestCard v-for="item in myEvalExamList" :key="item.id" :testVO="item"/>-->
        <!--            </div>-->
        <!--          </el-tab-pane>-->
        <!--          <el-tab-pane label="代码" name="coder">-->
        <!--            <div class="task-content">-->
        <!--              <TestCard v-for="item in myCoderExamList" :key="item.id" :testVO="item"/>-->
        <!--            </div>-->
        <!--          </el-tab-pane>-->
        <!--        </el-tabs>-->
      </div>
    </el-card>

  </div>
</template>

<script>
import TestCard from "@/components/TestCard";

const options = [
  {
    label: "全部测试",
    options: [
      {
        value: "ALL",
        label: "全部测试题",
      },
      {
        value: "ALL_NOT_STARTED",
        label: "全部未开始",
      },
      {
        value: "ALL_RUNNING_IN",
        label: "全部已参加",
      },
      {
        value: "ALL_RUNNING_NOT",
        label: "全部未参加",
      },
      {
        value: "ALL_FINISHED",
        label: "全部已结束",
      },
    ]
  },
  {
    label: "评测题",
    options: [
      {
        value: "EVAL_ALL",
        label: "全部评测题",
      },
      {
        value: "EVAL_NOT_STARTED",
        label: "未开始评测题",
      },
      {
        value: "EVAL_RUNNING_IN",
        label: "已参加评测题",
      },
      {
        value: "EVAL_RUNNING_NOT",
        label: "未参加评测题",
      },
      {
        value: "EVAL_FINISHED",
        label: "已结束评测题",
      },
    ],
  },
  {
    label: "代码题",
    options: [
      {
        value: "CODER_ALL",
        label: "全部代码题",
      },
      {
        value: "CODER_NOT_STARTED",
        label: "未开始代码题",
      },
      {
        value: "CODER_RUNNING_IN",
        label: "已参加代码题",
      },
      {
        value: "CODER_RUNNING_NOT",
        label: "未参加代码题",
      },
      {
        value: "CODER_FINISHED",
        label: "已结束代码题",
      },
    ],
  },
];
export default {
  name: "TaskPage",
  components: {TestCard},
  data() {
    return {
      myEvalExamList: [],
      myCoderExamList: [],
      expiringTask_currentPage: 1,
      activeTaskPaneName: "eval",
      options: options,
      selector: "ALL",
    };
  },
  computed: {
    expiringTaskList_show() {
      return this.expiringTaskList.slice((this.expiringTask_currentPage - 1) * 4, this.expiringTask_currentPage * 4);
    },
    expiringTaskList() {
      return []
        .concat(this.myEvalExamList)
        .concat(this.myCoderExamList)
        .sort((a, b) => {
          let a_time = a["endAt"] * 1000 || new Date(a.endTime).getTime();
          let b_time = b["endAt"] * 1000 || new Date(b.endTime).getTime();
          return a_time - b_time;
        })
        .filter(i => (this.state(i) === "RUNNING_IN" || this.state(i) === "RUNNING_NOT"));
    },
    myTaskList() {
      let out = []
        .concat(this.myEvalExamList)
        .concat(this.myCoderExamList)
        .sort((a, b) => {
          return this.state(b).charCodeAt(0) - this.state(a).charCodeAt(0);
        });
      switch (this.selector) {
        case "ALL":
          break;
        case "ALL_NOT_STARTED":
          out = out.filter(i => this.state(i) === "NOT_STARTED");
          break;
        case "ALL_RUNNING_IN":
          out = out.filter(i => this.state(i) === "RUNNING_IN");
          break;
        case "ALL_RUNNING_NOT":
          out = out.filter(i => this.state(i) === "RUNNING_NOT");
          break;
        case "ALL_FINISHED":
          out = out.filter(i => this.state(i) === "FINISHED" || this.state(i) === "CLOSED");
          break;
        case "EVAL_ALL":
          out = out.filter(i => i.examId !== undefined);
          break;
        case "EVAL_NOT_STARTED":
          out = out.filter(i => (i.examId !== undefined && this.state(i) === "NOT_STARTED"));
          break;
        case "EVAL_RUNNING_IN":
          out = out.filter(i => (i.examId !== undefined && this.state(i) === "RUNNING_IN"));
          break;
        case "EVAL_RUNNING_NOT":
          out = out.filter(i => (i.examId !== undefined && this.state(i) === "RUNNING_NOT"));
          break;
        case "EVAL_FINISHED":
          out = out.filter(i => (i.examId !== undefined && this.state(i) === "FINISHED"));
          break;
        case "CODER_ALL":
          out = out.filter(i => i.examId === undefined);
          break;
        case "CODER_NOT_STARTED":
          out = out.filter(i => (i.examId === undefined && this.state(i) === "NOT_STARTED"));
          break;
        case "CODER_RUNNING_IN":
          out = out.filter(i => (i.examId === undefined && this.state(i) === "RUNNING_IN"));
          break;
        case "CODER_RUNNING_NOT":
          out = out.filter(i => (i.examId === undefined && this.state(i) === "RUNNING_NOT"));
          break;
        case "CODER_FINISHED":
          out = out.filter(i => (i.examId === undefined && (this.state(i) === "FINISHED" || this.state(i) === "CLOSED")));
          break;
      }
      return out;
    },
  },

  async created() {
    this.myEvalExamList = (await this.$apis.getStudentEvalExams()).data.data;
    this.myCoderExamList = (await this.$apis.getStudentCoderExams({})).data.data["res"];
  },

  methods: {
    handleCurrentChange(index) {
      this.expiringTask_currentPage = index;
    },
    state(testVO) {
      const now = new Date();
      if (testVO.examId !== undefined) {
        if (new Date(testVO.endTime) < now) {
          return "FINISHED";
        } else if (new Date(testVO.startTime) > now) {
          return "NOT_STARTED";
        } else if (testVO.isJoined) {
          return "RUNNING_IN";
        } else {
          return "RUNNING_NOT";
        }
      } else {
        if (testVO.status === "CLOSED") {
          return "CLOSED";
        } else if (testVO.startAt * 1000 > now) {
          return "NOT_STARTED";
        } else if (testVO.endAt * 1000 < now) {
          return "FINISHED";
        } else if (testVO.joined) {
          return "RUNNING_IN";
        } else {
          return "RUNNING_NOT";
        }
      }
    },
  },
};
</script>

<style scoped>
#task-page-body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-gap: 20px;
  margin: 40px 15vw 80px 15vw;
}

#task-page-expiring-main {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
}

.task-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
}
</style>