<template>
  <el-row id="test-page-body">
    <el-col :span="3">
      <el-card style="position: fixed;">
        <el-menu default-active="1" @select="handleSelect">
          <el-menu-item index="0">
            <el-icon>
              <Back/>
            </el-icon>
            <span style="padding-left: 20px">返回首页</span>
          </el-menu-item>
          <el-menu-item index="1">
            <el-icon>
              <Document/>
            </el-icon>
            <span style="padding-left: 20px">公开测试</span>
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon>
              <DocumentChecked/>
            </el-icon>
            <span style="padding-left: 20px">我的测试</span>
          </el-menu-item>
        </el-menu>
      </el-card>
    </el-col>
    <el-col :span="2"/>
    <el-col :span="18">
      <el-card>
        <template #header>
          <span style="font-weight: bold; font-size: larger">
            {{ activeName }}
          </span>
        </template>
        <div v-if="this.activeIndex === '1'">
          <el-tabs v-model="activeTestPaneName" style="width: 100%">
            <el-tab-pane label="评测题" name="eval">
              <div v-for="(item, key) in evalExamList" :key="key">
                <div v-if="item.length !== 0">
                  <div>
                    <el-divider style="margin: 10px 0 20px 0" content-position="left">{{ key }}</el-divider>
                  </div>
                  <div class="test-page-main">
                    <TestCard v-for="exam in item" :key="exam.id" :testVO="exam" :isPublicTest="true"/>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="代码题" name="coder">
              <div v-for="(item, key) in coderExamList" :key="key">
                <div v-if="item.length !== 0">
                  <div>
                    <el-divider style="margin: 10px 0 20px 0;" content-position="left">{{ key }}</el-divider>
                  </div>
                  <div class="test-page-main">
                    <TestCard v-for="exam in item" :key="exam.id" :testVO="exam"/>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>

        <div v-if="this.activeIndex === '2' && isStudent">
          <el-tabs v-model="activeTestPaneName_my" style="width: 100%">
            <el-tab-pane label="评测题" name="eval">
              <div v-for="(item, key) in evalExamList_my" :key="key">
                <div>
                  <el-divider style="margin: 10px 0 20px 0" content-position="left">{{ key }}</el-divider>
                </div>
                <div class="test-page-main">
                  <TestCard v-for="exam in item" :key="exam.id" :testVO="exam"/>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="代码题" name="coder">
              <div v-for="(item, key) in coderExamList_my" :key="key">
                <div>
                  <el-divider style="margin: 10px 0 20px 0" content-position="left">{{ key }}</el-divider>
                </div>
                <div class="test-page-main">
                  <TestCard v-for="exam in item" :key="exam.id" :testVO="exam"/>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>

        <div v-if="this.activeIndex === '2' && isTeacher">
          教师请前往
          <span style="cursor: pointer;color: #409eff"
                @click="$router.push('/manage')">管理页面</span>
          查看相关测试。
        </div>

        <div v-if="this.activeIndex === '2' && !isLogin">
          请先
          <span style="cursor: pointer;color: #409eff"
                @click="$router.push('/auth')">登录</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import {Back, Document, DocumentChecked} from "@element-plus/icons-vue";
import TestCard from "@/components/TestCard";

export default {
  name: "TestPage",
  components: {TestCard, Back, Document, DocumentChecked,},
  data() {
    return {
      activeIndex: "1",
      evalExamList: [],
      coderExamList: [],
      evalExamList_my: [],
      coderExamList_my: [],
      activeTestPaneName: "eval",
      activeTestPaneName_my: "eval",
    };
  },
  computed: {
    activeName() {
      if (this.activeIndex === "1") {
        return "公开测试";
      } else {
        return "我的测试";
      }
    },
    isTeacher() {
      return this.$store.getters.isTeacher;
    },
    isStudent() {
      return this.$store.getters.isStudent;
    },
    isLogin() {
      return this.$store.getters.isLogin;
    },
  },
  mounted() {
    this.$apis.getRecommendEvalExamsGroupByCourse().then(res => {
      this.evalExamList = res.data.data;
    });
    this.$apis.getRecommendCoderExamsGroupByCourse().then(res => {
      this.coderExamList = res.data.data;
    });
    if (this.isStudent) {
      this.$apis.getStudentEvalExamsGroupByCourse()
        .then(res => {
          this.evalExamList_my = res.data.data;
        });
      this.$apis.getStudentCoderExamsGroupByCourse()
        .then(res => {
          this.coderExamList_my = res.data.data;
        });
    }
  },
  methods: {
    handleSelect(index) {
      if (index === "0") {
        this.$router.push("portal");
      }
      this.activeIndex = index;
    },
  },
};
</script>

<style scoped>
#test-page-body {
  margin: 40px 60px 80px 0;
  min-height: calc(100vh - 340px);
  position: relative;
}

.test-page-main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
}

:deep(.el-divider) {
  margin: 0;
}
</style>