<template>
  <el-row id="project-page-body">
    <el-col :span="4">
      <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-item index="3">
            <el-icon>
              <Document/>
            </el-icon>
            <span style="padding-left: 20px">个人分析</span>
          </el-menu-item>

          <el-menu-item index="4">
            <el-icon>
              <Document/>
            </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'">
          <div v-for="(item, key) in courseProjectList" :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="project-page-main">
                <ProjectCard v-for="project in item"
                             :is-public="key"
                             :key="project.id"
                             :projectVO="project"
                             type="courseProject"/>
              </div>
            </div>
          </div>
        </div>

        <div v-if="this.activeIndex === '2' && isStudent">
          <el-tabs v-model="activeProjectPaneName" style="width: 100%">
            <el-tab-pane label="课程下项目" name="courseProject">
              <div v-for="(item, key) in myCourseProjects" :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="project-page-main">
                    <ProjectCard v-for="project in item" :key="project.id" :projectVO="project" type="courseProject"/>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="非课程项目" name="commonProject">
              <div class="project-page-main">
                <ProjectCard v-for="(item,key) in myNonCourseProjects" :key="key" :projectVO="item" type="commonProject"></ProjectCard>
              </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('/login')">登录</span>
        </div>

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

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

<!--          <div v-if="this.activeIndex === '2' ">-->
<!--                            <span style="cursor: pointer;color: #409eff"-->
<!--                                  @click="$router.push('/login')">跳转</span>-->
<!--          </div>-->

<!--          <div v-if="this.activeIndex === '3'" >-->
        <div v-if="this.activeIndex === '3' && isStudent">
<!--            <AnalysisStudentCard :num="1575"/>-->
            <AnalysisStudentCard :num="$store.state.user.id"/>
        </div>

<!--          <div v-if="this.activeIndex === '4'">-->
        <div v-if="this.activeIndex === '4' && isStudent">
<!--            <AnalysisGroupCard :num="1575"/>-->
          <AnalysisGroupCard :num="$store.state.user.id"/>
        </div>

      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import {Back, Document, DocumentChecked} from "@element-plus/icons-vue";
import ProjectCard from "@/views/ProjectPage/ProjectCard.vue";
import AnalysisGroupCard from "@/views/ProjectPage/analysis/AnalysisGroupCard";
import AnalysisStudentCard from "@/views/ProjectPage/analysis/AnalysisStudentCard";

export default {
  name: "projectPage",
  components: {AnalysisGroupCard,AnalysisStudentCard, ProjectCard, Back, Document, DocumentChecked,},
  data() {
    return {
      activeIndex: "1",
      courseProjectList: null,
      myNonCourseProjects: null,
      myCourseProjects: null,
      activeProjectPaneName: "courseProject",
      activeProjectPaneName_my: "courseProject_my",
      userId:this.$store.state.user.id,//传递给分析系统
    };
  },
  computed: {
    activeName() {
      if (this.activeIndex === "1") {
        return "公开项目";
      } else if(this.activeIndex === "3"){
        return "个人项目分析";
      } else if(this.activeIndex === "4"){
        return "小组项目分析";
      }
      else {
        return "我的项目";
      }
    },
    isTeacher() {
      return this.$store.getters.isTeacher;
    },
    isStudent() {
      return this.$store.getters.isStudent;
    },
    isLogin() {
      return this.$store.getters.isLogin;
    },
  },
  mounted() {
    this.$apis.findCourseProjects().then(res =>{
        this.myCourseProjects = res.data.data;
        });

    this.$apis.findNonCourseProjects().then(res =>{
      this.myNonCourseProjects = res.data.data;
    });

    this.$apis.findAllPublicProjectsGroupByCourse().then(res =>{
      this.courseProjectList = res.data.data;
    });

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

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

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

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