<template>
    <div class="course-class" v-show="DataLoading">
        <classHeader>{{Coursedata.courseName}}:{{ Classdata.className }}</classHeader>
        <div class="content">
            <router-view></router-view>
            <!-- <classTable></classTable> -->
        </div>
        <!-- <classDetailFooter :classId=classId :courseId=courseId :flag=true></classDetailFooter> -->
        <div class="class-footer">
            <button 
                :class="{'active':choose,'unactive':!choose,'inhover':(!choose && hoverid===1)}"
                :disabled="choose"
                @click="{choose = true;$router.replace(`/home/classDetail/student?classId=${classId}&courseId=${courseId}`);}"
                @mouseenter="hoverid = 1"
                @mouseleave="hoverid = 0"
            >
            班级学生管理
            </button>
            <button 
                :class="{'active':!choose,'unactive':choose,'inhover':(choose && hoverid===2)}"
                :disabled="!choose"
                @click="{choose = false;$router.replace(`/home/classDetail/homework?classId=${classId}&courseId=${courseId}`);}"
                @mouseenter="hoverid = 2"
                @mouseleave="hoverid = 0"
            >
            班级作业管理
            </button>
        </div>
    </div>
    <div class="loading" v-show="!DataLoading"> Loading...</div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref, computed} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import classHeader from './components/classHeader.vue';
import type {CourseDetailVO, ClassVO} from "@/types/vo";
import { useStore } from "@/store"
import useApis from "@/apis";

const store = useStore()
const route = useRoute()
const router = useRouter()
const apis = useApis()
const classId = +route.query.classId;
const courseId = +route.query.courseId;

const choose = ref(true)
let hoverid = ref(0) // 0 没有 1 学生 2 作业 

const CourseDataLoading = ref(false)
const ClassDataLoading = ref(false)

const Coursedata = reactive<CourseDetailVO>({
  courseId: null,
  courseName: '',
  teacherIds: [],
  teacherNames: [],
  courseImages: [''],
  targetGrade: '',
  startTime: '',
  endTime: '',
  createTime: '',
  description: '',
})

const Classdata = reactive<ClassVO>({
  classId: null,
  className: '',
  courseId: null,
  stuNumber: null,
  classTime: '',
  teacherId: null,
  classCode: null,
})

const identify = () => {
    if(store.user.role === "STUDENT"){
        router.push('/404')
    }
}
const getClass = () => {
    apis.getClassByClassId(classId)
        .then((res: any) => {
            console.log(res.data.data);
            Object.assign(Classdata, {...res.data.data})
            ClassDataLoading.value = true
        })
        .catch((err: any) => {
            console.error(err);
        })
}
const getCourse = () => {
  // 获取课程信息
  apis.getCourseByCourseId(courseId)
      .then((res: any) => {
        let data = res.data.data.records[0]
        Object.assign(Coursedata, {...data})
        CourseDataLoading.value = true
      })
      .catch((err: any) => {
        console.error(err);
      })
}
const setchoose = () => {
    const currentPath = route.path
    const parts = currentPath.split('/')
    if(parts[parts.length-1]=="homework")
        choose.value=false
    else
        choose.value=true
}
const DataLoading = computed(() => {
  return CourseDataLoading.value && ClassDataLoading.value
})


onMounted(() => {
    identify()
    setchoose()
    getClass()
    getCourse()
})
</script>

<script lang="ts">
export default {
  name: "ClassDetail"
}
</script>

<style scoped>
.course-class {
    width: 66vw;
    height: 65vh;
    background-color: #fff;
    border-radius: 15px;
    margin: 0 auto;
    margin-top: 4.6vh;
    border-bottom: 1px solid #70bbdb;
    padding:  7vh 5.5vw;
    .content {
        height: 55vh;
        width: 100%;
        /* border:1px solid; */
        margin: 0 auto;
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: start;
        padding: 10px;
        gap: 3.6vw;
    }
    .class-footer {
        width: '100%';
        height: 7.5vh;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 250px;
        .active {
            font-size: 24px;
            font-weight: 600;
            color: #fff;
            border-radius: 50px;
            padding: 2px 10px;
            background-color: #70bbdb;
            border:none;
            border-bottom: 5px solid #4FA3C5;
        }
        .unactive {
            font-size: 24px;
            font-weight: 600;
            color: #fff;
            border-radius: 50px;
            padding: 2px 10px;
            background-color: rgb(112, 187, 219, 0.5);
            border:none;
            border-bottom: 5px solid #4FA3C5;
            box-shadow: -5px 7px 7px 0 rgba(0, 0, 0, 0.25);
        }
        .inhover{
            box-shadow: -10px 7px 20px #70bbdb;
            border-bottom: 5px solid rgb(112, 187, 219, 0.5);
        }
    }
}
.loading{
    height: 100%;
    width: 100%;
    text-align: center;
    line-height: 100vh;
    font-size: 44px;
    font-weight: 700;
    color: #70bbdb;
}
</style>