<template>
  <el-row id="course-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>
              <Folder/>
            </el-icon>
            <span style="padding-left: 20px">{{ isLogin ? "全部课程" : "公开课程" }}</span>
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon>
              <FolderChecked/>
            </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'" class="course-page-main">
          <CourseCard v-for="course in courses_all" :key="course.id" :courseVO="course"/>
        </div>
        <div v-if="this.activeIndex === '2' && isStudent" class="course-page-main">
          <CourseCard v-for="course in courses_my" :key="course.id" :courseVO="course"/>
        </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, Folder, FolderChecked} from "@element-plus/icons-vue";
import CourseCard from "@/components/CourseCard";

export default {
  name: "CoursePage",
  components: {FolderChecked, Folder, Back, CourseCard},
  data() {
    return {
      activeIndex: "1",
      courses_all: [],
      courses_my: [],
    };
  },
  computed: {
    activeName() {
      if (this.activeIndex === "1") {
        return this.isLogin ? "全部课程" : "公开课程";
      } else {
        return "我的课程";
      }
    },
    isTeacher() {
      return this.$store.getters.isTeacher;
    },
    isStudent() {
      return this.$store.getters.isStudent;
    },
    isLogin() {
      return this.$store.getters.isLogin;
    },
  },

  async created() {
    if (!this.isLogin) {
      this.courses_all = (await (this.$apis.getExampleCourses())).data.data;
    } else {
      this.courses_all = (await (this.$apis.getAllCourses())).data.data;
    }
    if (this.isStudent && this.isLogin) {
      this.courses_my = (await (this.$apis.getStudentCourses())).data.data;
    }
  },

  methods: {
    handleSelect(index) {
      if (index === "0") {
        this.$router.push("portal");
      }
      this.activeIndex = index;
    },
  },
};
</script>

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

.course-page-main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
}
</style>