<template>
  <div id="portal-body">

    <CarouselCard style="grid-column-start: 1; grid-column-end: 3;"/>

    <div>
      <el-card :style="{height: this.courseRowHeight + 'px'}">
        <div class="portal-card-title">
          <div class="portal-card-title-main">我的课程</div>
          <div style="font-size: 10px; color: #777777" v-if="myCourseList.length>6">可滚动查看课程列表</div>
        </div>
        <el-divider class="portal-card-divider"/>
        <div>

          <div v-if="!isLogin"
               :style="{height: (this.courseRowHeight - 63) + 'px', marginTop: (this.courseRowHeight / 2 - 100) + 'px'}"
               class="portal-card-main" style="cursor: pointer"
               @click="toAuth">
            <el-icon :size="72" color="#bfbfbf">
              <Lock/>
            </el-icon>
            <div class="tip">登录以查看</div>
          </div>

          <div v-if="isLogin && isStudent && myCourseList.length!==0"
               :style="{height: (this.courseRowHeight - 63) + 'px'}"
               class="portal-card-main">
            <div class="portal-my-card-main" ref="a">
              <MyCourseCard v-for="course in myCourseList" :key="course.id" :courseVO="course"/>
            </div>
          </div>

          <div v-if="isLogin && isStudent && myCourseList.length===0"
               :style="{height: (this.courseRowHeight - 63) + 'px', marginTop: (this.courseRowHeight / 2 - 100) + 'px'}"
               class="portal-card-main" style="cursor: pointer"
               @click="toCourse">
            <el-icon :size="72" color="#bfbfbf">
              <ShoppingCart/>
            </el-icon>
            <div class="tip">去选择课程</div>
          </div>

          <div v-show="isLogin && isTeacher"
               :style="{height: (this.courseRowHeight - 63) + 'px', marginTop: (this.courseRowHeight / 2 - 100) + 'px'}"
               class="portal-card-main" style="cursor: pointer"
               @click="toManage">
            <el-icon :size="72" color="#bfbfbf">
              <SetUp/>
            </el-icon>
            <div class="tip">去管理课程</div>
          </div>
        </div>
      </el-card>
    </div>

    <div>
      <el-card id="portal-course-card-main" :style="{height: this.courseRowHeight + 'px'}">
        <div class="portal-card-title">
          <div class="portal-card-title-main">精选课程</div>
          <el-pagination v-if="isExpanding && exampleCourseList.length > 6"
                         :page-size="6"
                         :total="exampleCourseList.length"
                         @current-change="handleCourseCurrentChange"
                         layout="prev, pager, next"
                         style="width: 200px; margin: 0 auto 0 auto"/>
          <ElButton plain round type="primary" @click="toCourse">前往课程广场</ElButton>
        </div>
        <el-divider class="portal-card-divider"/>
        <div class="portal-card-content" v-if="showExampleCourseList.length !== 0">
          <CourseCard v-for="item in showExampleCourseList" :key="item.id" :courseVO="item"/>
        </div>
        <div v-else :style="{marginTop: (this.courseRowHeight / 2 - 100) + 'px'}" style="margin-left: calc(50% - 36px)">
          <el-icon :size="72" color="#bfbfbf">
            <FolderOpened/>
          </el-icon>
          <div class="tip">暂无数据~</div>
        </div>
      </el-card>
    </div>

    <div>
      <el-card :style="{height: this.testRowHeight + 'px'}">
        <div class="portal-card-title">
          <div class="portal-card-title-main">我的测试</div>
          <div style="font-size: 10px; color: #777777" v-if="myTestList.length>6">可滚动查看测试列表</div>
        </div>
        <el-divider class="portal-card-divider"/>
        <div>
          <div v-if="!isLogin"
               :style="{height: (this.testRowHeight - 63) + 'px', marginTop: (this.testRowHeight / 2 - 100) + 'px'}"
               class="portal-card-main" style="cursor: pointer"
               @click="toAuth">
            <el-icon :size="72" color="#bfbfbf">
              <Lock/>
            </el-icon>
            <div class="tip">登录以查看</div>
          </div>

          <div v-if="isLogin && isStudent && myTestList!==null && myTestList.length!==0"
               :style="{height: (this.testRowHeight - 63) + 'px'}"
               class="portal-card-main">
            <div class="portal-my-card-main">
              <MyTestCard v-for="test in myTestList" :key="test.id" :testVO="test"/>
            </div>
          </div>

          <div v-if="isLogin && isStudent && myTestList!==null && myTestList.length===0"
               :style="{height: (this.testRowHeight - 63) + 'px', marginTop: (this.testRowHeight / 2 - 100) + 'px'}"
               class="portal-card-main" style="cursor: pointer"
               @click="toTest">
            <el-icon :size="72" color="#bfbfbf">
              <ShoppingCart/>
            </el-icon>
            <div class="tip">去参加测试</div>
          </div>

          <div v-show="isLogin && isTeacher"
               :style="{height: (this.testRowHeight - 63) + 'px', marginTop: (this.testRowHeight / 2 - 100) + 'px'}"
               class="portal-card-main" style="cursor: pointer"
               @click="toManage">
            <el-icon :size="72" color="#bfbfbf">
              <SetUp/>
            </el-icon>
            <div class="tip">去管理测试</div>
          </div>
        </div>

      </el-card>
    </div>

    <div>
      <el-card id="portal-test-card-main" ref="portalTestCardBodyMain">
        <div class="portal-card-title">
          <div class="portal-card-title-main">智能测试</div>
          <ElButton plain round type="primary" @click="toTest">前往测试广场</ElButton>
        </div>
        <el-divider class="portal-card-divider"/>
        <el-tabs v-model="activeTestPaneName" @tab-click="changeTestPane" style="min-height: 400px;">
          <el-tab-pane label="评测题" name="eval">
            <div class="portal-card-content" v-if="showExampleEvalTestList.length !== 0">
              <TestCard v-for="item in showExampleEvalTestList" :key="item.id" :testVO="item" :isPublicTest="true"/>
            </div>
            <div v-else style="margin: 100px 0 0 calc(50% - 36px);">
              <el-icon :size="72" color="#bfbfbf">
                <FolderOpened/>
              </el-icon>
              <div class="tip">暂无数据~</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="代码题" name="coder">
            <div class="portal-card-content" v-if="showExampleCoderTestList.length !== 0">
              <TestCard v-for="item in showExampleCoderTestList" :key="item.id" :testVO="item" :isPublicTest="true"/>
            </div>
            <div v-else style="margin: 100px 0 0 calc(50% - 36px);">
              <el-icon :size="72" color="#bfbfbf">
                <FolderOpened/>
              </el-icon>
              <div class="tip">暂无数据~</div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import CarouselCard from "@/views/PortalPage/components/CarouselCard";
import CourseCard from "@/components/CourseCard";
import MyCourseCard from "@/views/PortalPage/components/MyCourseCard";
import MyTestCard from "@/views/PortalPage/components/MyTestCard";
import { FolderOpened, Lock, SetUp, ShoppingCart } from "@element-plus/icons-vue";
import TestCard from "@/components/TestCard";

export default {
  //数据
  name: "PortalPage",
  components: {
    FolderOpened,
    TestCard,
    SetUp,
    ShoppingCart,
    Lock,
    MyTestCard,
    CourseCard,
    CarouselCard,
    MyCourseCard
  },
  data() {
    return {
      isExpanding: false,
      activeTestPaneName: "eval",
      exampleEvalTestList: [],
      exampleCourseList: [],
      showCourseList_current: 1,
      exampleCoderTestList: [],
      myCourseList: [],
      myEvalExamList: [],
      myCoderExamList: [],
      courseRowHeight: 360,
      testRowHeight: 300,
    };
  },
  computed: {
    isLogin() {
      return this.$store.getters.isLogin;
    },
    isTeacher() {
      return this.$store.getters.isTeacher;
    },
    isStudent() {
      return this.$store.getters.isStudent;
    },
    myTestList() {
      return []
        .concat(this.myEvalExamList)
        .concat(this.myCoderExamList)
        .sort((a, b) => {
          let a_time = a["startAt"] * 1000 || new Date(a.startTime).getTime();
          let b_time = b["startAt"] * 1000 || new Date(b.startTime).getTime();
          return a_time - b_time;
        });
    },
    showExampleCourseList() {
      return this.exampleCourseList.slice((this.showCourseList_current - 1) * 6, this.showCourseList_current * 6);
    },
    showExampleCoderTestList() {
      return this.exampleCoderTestList
        // .filter(i => this.state(i) === "RUNNING")
        .slice(0, 6);
    },
    showExampleEvalTestList() {
      return this.exampleEvalTestList
        // .filter(i => this.state(i) === "RUNNING")
        .slice(0, 6);
    },
  },

  //生命周期函数
  created() {
    window.addEventListener("scroll", this.handleResize, true);
  },
  beforeUnmount() {
    window.removeEventListener("scroll", this.handleResize,);
  },
  async mounted() {
    const that = this;

    this.exampleCourseList = (await this.$apis.getExampleCourses()).data.data;
    this.exampleEvalTestList = (await this.$apis.getRecommendEvalExams()).data.data;
    this.exampleCoderTestList = (await this.$apis.getRecommendCoderExams({})).data.data;

    if (this.isLogin && this.isStudent) {
      this.myCourseList = (await this.$apis.getStudentCourses()).data.data;
      this.myEvalExamList = (await this.$apis.getStudentEvalExams()).data.data.filter(i => this.state(i) === "RUNNING");
      this.myCoderExamList = (await this.$apis.getStudentCoderExams({})).data.data.res.filter(i => this.state(i) === "RUNNING");
    }

    await this.$nextTick(() => that.handleResize());
  },

  //其他函数
  methods: {
    toAuth() {
      this.$router.push("/auth");
    },
    toCourse() {
      this.$router.push("/course");
    },
    toManage() {
      this.$router.push("/manage");
    },
    toTest() {
      this.$router.push("/test");
    },
    handleResize() {
      if (this.$route.path !== "/portal") return;
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 100) {
        this.courseRowHeight = 640;
        this.isExpanding = true;
      }
      if (this.$refs.portalTestCardBodyMain) {
        this.testRowHeight = Math.max(this.$refs.portalTestCardBodyMain.$el.clientHeight, 300);
      }
    },
    changeTestPane() {
      const that = this;
      this.$nextTick(() => that.handleResize());
    },
    state(testVO) {
      const now = new Date();
      if (testVO["examId"]) {
        if (new Date(testVO.endTime) < now) {
          return "FINISHED";
        } else if (new Date(testVO.startTime) > now) {
          return "NOT_STARTED";
        } else {
          return "RUNNING";
        }
      } 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 {
          return "RUNNING";
        }
      }
    },
    handleCourseCurrentChange(index) {
      this.showCourseList_current = index;
    }
  }
};
</script>

<style scoped src="./PortalPage.css"/>
