<template>
    <div class="course-class" v-show="DataLoading">
        <classHeader>{{store.user.role === 'STUDENT'?Coursedata.courseName:Studentdata.stuName}}:{{store.user.role === 'STUDENT'?Classdata.className: Studentdata.officialNumber }} 
            <template #TeacherName v-if="store.user.role === 'STUDENT'">{{ Coursedata.teacherNames[0] }}</template>
        </classHeader>
        <div class="content">
            <div class="search">
                <img src="@/assets/search.svg" width="20px" height="20px"></img> 
                <div class="searchInput">
                    <input type="text" v-model.trim="searchInput" placeholder="输入作业序号或作业名称">
                    <div class="fix">
                        <span>搜索</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#b8b8b8" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
                    </div>
                </div>
                <div class="Myselect">
                    <select id="selectSort" v-model="TheSort" > 
                        <option value="无">排序方式</option>
                        <option v-for="item in sortMethods" :value="item">{{item}}</option>
                    </select>
                    <div class="show">
                            {{ ShowTheSort }}
                    </div>
                </div>
            </div>
            <div class="table">
                <div class="table-half left-half">
                    <classTable>
                        <template #head>
                            <tr>
                                <th>序号</th>
                                <th>作业列表</th>
                                <th>成绩</th>
                            </tr>
                        </template>
                        <template #body>
                            <tr v-for="(item,index) in showData.slice(0,5)" :key="index+item.assignmentName">
                                <template v-if="item.status!==''">
                                    <td>{{ (currentPage-1)*10+index+1 }}</td>
                                    <td>{{ item.assignmentName }}</td>
                                    <td @click="$router.push(`/home/assignment/${item.assignmentId}/correct?studentId=${studentId}`)">
                                        <div class="highScore" v-if="item.score>=80"> {{ item.score }}</div>
                                        <div class="midScore" v-else-if="item.score>=60"> {{ item.score }}</div>
                                        <div class="lowScore" v-else-if="item.score>0"> {{ item.score }}</div>
                                        <div class="uncorrected" v-else-if="item.status==='SUBMITTED'"> 未批改</div>
                                        <div class="unsubmitted" v-else-if="item.status==='NOT_SUBMITTED'"> 未提交</div>      
                                    </td>
                                </template>
                                <template v-else>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                </template>
                            </tr>
                        </template>
                    </classTable>
                </div>
                <div class="table-half right-half">
                    <classTable>
                        <template #head>
                            <tr>
                                <th>序号</th>
                                <th>作业列表</th>
                                <th>成绩</th>
                            </tr>
                        </template>
                        <template #body>
                            <tr v-for="(item,index) in showData.slice(5,10)" :key="index+item.assignmentName">
                                <template v-if="item.status!==''">
                                    <td>{{ (currentPage-1)*10+index+6 }}</td>
                                    <td>{{ item.assignmentName }}</td>
                                    <td @click="$router.push(`/home/assignment/${item.assignmentId}/correct?studentId=${studentId}`)">
                                        <div class="highScore" v-if="item.score>=80"> {{ item.score }}</div>
                                        <div class="midScore" v-else-if="item.score>=60"> {{ item.score }}</div>
                                        <div class="lowScore" v-else-if="item.score>0"> {{ item.score }}</div>
                                        <div class="uncorrected" v-else-if="item.status==='SUBMITTED'"> 未批改</div>
                                        <div class="unsubmitted" v-else-if="item.status==='NOT_SUBMITTED'"> 未提交</div>      
                                    </td>
                                </template>
                                <template v-else>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                </template>
                            </tr>
                        </template>
                    </classTable>
                </div>
            </div>
            <div class="pages">
                <el-pagination
                    v-model:current-page="currentPage"
                    :page-size="10"
                    :pager-count="5"
                    layout="total, prev, pager, next"
                    :total="searchData.length"
                />
            </div>
        </div>
    </div>
    <div class="loading" v-show="!DataLoading"> Loading...</div>
</template>

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

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

const currentPage = ref(1)
const searchInput = ref("")
const TheSort = ref("无")
const ShowTheSort = ref("默认")

const StudentdataLoading = ref(false)
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 = ref<ClassVO>({
  classId: null,
  className: '',
  courseId: null,
  stuNumber: null,
  classTime: '',
  teacherId: null,
  classCode: null,
})
const sortMethods = ["默认","成绩从低到高","成绩从高到低","未批改优先","未提交优先"]

const Studentdata = ref({
    "officialNumber": 0,
    "stuName": "",
    "studentId": 0,
    "assignments":[]
})
const getStudent = async () => {
    StudentdataLoading.value = false
    console.log(courseId)
    console.log(studentId)
    await apis.getHomeworkOfStudent(courseId,studentId)
        .then((res:any)=>{
            Studentdata.value = res.data.data
            console.log('zcx',Studentdata.value);
        })
    StudentdataLoading.value = true
    console.log('zzzz','修改',StudentdataLoading.value);
}
const getClass = async () => {
    console.log("classId:",classId)
    await apis.getClassByClassId(classId)
        .then((res:any)=>{
            console.log(res.data.data);
            Classdata.value = res.data.data
            console.log("Classdata",Classdata.value);
            
        })

    ClassDataLoading.value = true
}

const getCourse = async () => {
  // 获取课程信息
    await apis.getCourseByCourseId(courseId)
      .then((res: any) => {
        let data = res.data.data.records[0]
        Object.assign(Coursedata, {...data})
      })
      .catch((err: any) => {
        console.error(err);
      })
    CourseDataLoading.value = true
}

const DataLoading = computed(() => {
//   return CourseDataLoading.value && ClassDataLoading.value
    if(store.user.role === "STUDENT"){
        console.log('finally',StudentdataLoading.value,CourseDataLoading.value,ClassDataLoading.value)
        return StudentdataLoading.value && CourseDataLoading.value && ClassDataLoading.value
    }
    else{
        return StudentdataLoading.value
    }
})
const searchData = computed(()=>{
    if(searchInput.value===""){
        return Studentdata.value.assignments??[]
    }
    else{
        return Studentdata.value.assignments.filter(student => {
          return (
            student.assignmentName.includes(searchInput.value)
          )
        })??[]
    }
})
const showData = computed(() => {
    const showdata = searchData.value.slice((currentPage.value-1)*10,currentPage.value*10)
    while(showdata.length<10){
        showdata.push(    {
        "assignmentId": -1,
        "assignmentName": "",
        "status": "",
        "score": 0
        })
    }
    return showdata
})
watch(TheSort, () => {
    nextTick(() => {
        // console.log(ShowTheSort.value,TheSort.value);
        if(TheSort.value != "无"){
            ShowTheSort.value = TheSort.value
            TheSort.value = "无"
        }
        // console.log(ShowTheSort.value,TheSort.value);
    });
});
watch(ShowTheSort,(newData) =>{
    if(newData==="未批改优先"){
        Studentdata.value.assignments = Studentdata.value.assignments.sort((a,b)=>{
            return a.status === "SUBMITTED" ? -1 : b.status === "SUBMITTED" ? 1 : 0;
        })
    }
    else if(newData==="未提交优先"){
        Studentdata.value.assignments = Studentdata.value.assignments.sort((a,b)=>{
            return a.status === "NOT_SUBMITTED" ? -1 : b.status === "NOT_SUBMITTED" ? 1 : 0;
        })
    }
    else if(newData==="成绩从低到高"){
        Studentdata.value.assignments = Studentdata.value.assignments.sort((a,b)=>{
            if (a.status === "CORRECTED" && b.status !== "CORRECTED") return -1;
            if (a.status !== "CORRECTED" && b.status === "CORRECTED") return 1;
            return a.score - b.score;
        })
    }
    else if(newData==="成绩从高到低"){
        Studentdata.value.assignments = Studentdata.value.assignments.sort((a,b)=>{
            if (a.status === "CORRECTED" && b.status !== "CORRECTED") return -1;
            if (a.status !== "CORRECTED" && b.status === "CORRECTED") return 1;
            return b.score - a.score;
        })
    }
})

onMounted(async () => {
    // identify()
    if(store.user.role === "STUDENT"){
        await getCourse()
        await getClass()
    }
    await getStudent()
    
})
</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;
        flex-direction: column;
        justify-content: start;
        padding: 10px;
        .search{
            height: 50px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            margin-top: 20px;
            .searchInput{
                height: 100%;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                margin-left: 20px;
                input{
                    border: 2px solid #e4e7ed;
                    border-right: none;
                    height: 27px;
                    border-radius: 7px 0 0 7px;
                    padding: 0 10px;
                    color: #606266;
                }
                input::placeholder {
                    color:#c2c4c9;
                }
                .fix{
                    background-color: #f5f7fa;
                    padding: 2px 10px;
                    color:#b8b8b8;
                    font-weight: 600;
                    border: 2px solid #e4e7ed;
                    border-radius: 0 7px 7px 0;
                }
            }
            .Myselect{
                margin-left: 15px;
                display: flex;
                flex-direction: row;
                select {
                    border: none;
                    background-color: #4a90c4;
                    font-size: 14px;
                    font-weight: 600;
                    color:#fff;
                    padding: 3px 10px;
                    padding-right: 0;
                    border-radius: 5px 0 0 5px;
                    max-width: 100px;
                }
                select:focus {
                    outline: none;
                    border: none;
                    background-color: #FFF;
                    border: 3px solid #4a90c4;
                    border-right: 0;
                    color:#4a90c4;
                }
                .show{
                    width: fit-content;
                    color: #4a90c4;
                    border: 3px solid #4a90c4;
                    font-weight: 600;
                    padding-left: 6px;
                    padding-right: 5px;
                    border-radius: 0 5px 5px 0;
                }
            }
            .toggle{
                margin-left: 20px;
                .left{
                    border: 3px solid #4A90C4;
                    border-radius: 20px 0 0 20px;
                    border-right: 0;
                    padding: 2px 7px;
                    font-weight: 700;
                    cursor: pointer;
                }
                .right{
                    border: 3px solid #4A90C4;
                    border-radius: 0 20px 20px 0;
                    padding: 2px 7px;
                    font-weight: 700;
                    cursor: pointer;
                }
                .unactive{
                    color: #70BBDB;
                    background-color: #fff;
                }
                .active{
                    color: #fff;
                    background-color:#4A90C4;
                }
            }
        }
        .table{
            flex-grow: 1;
            width: 100%;
            display: flex;
            flex-direction: row;
            margin-top: 20px;
            .table-half{
                width: 50%;
                height: 100%;
                border: 5px solid #70bbdb;
                padding: 15px;
                padding-top: 0;
                td{
                    height:45px;
                }
                .highScore{
                    padding: 2px 10px;
                    background-color: #7ADBB0;   
                    color: #fff;
                    border-radius: 20px;
                    width: fit-content;
                    margin: auto;
                }
                .midScore{
                    padding: 2px 10px;
                    background-color: #F0C05A;   
                    color: #fff;
                    border-radius: 20px;
                    width: fit-content;
                    margin: auto;
                }
                .lowScore{
                    padding: 2px 10px;
                    background-color: #F4A261;   
                    color: #fff;
                    border-radius: 20px;
                    width: fit-content;
                    margin: auto;
                }
                .unsubmitted{
                    padding: 2px 10px;
                    background-color: #C45C4A;   
                    color: #fff;
                    border-radius: 20px;
                    width: fit-content;
                    margin: auto;
                }
                .uncorrected{
                    padding: 2px 10px;
                    background-color: #D9D9D9;   
                    color: #fff;
                    border-radius: 20px;
                    width: fit-content;
                    margin: auto;
                }
            }
            .left-half{
                border-right: 0;
                border-radius: 10px 0 0 10px;
            }
            .right-half{
                border-left: 5px solid #B9DDF5;
                border-radius: 0 10px 10px 0;
            }
        }
        .pages{
            height: 30px;
            margin-top: 40px;
        }
    }
}
.loading{
    height: 100%;
    width: 100%;
    text-align: center;
    line-height: 100vh;
    font-size: 44px;
    font-weight: 700;
    color: #70bbdb;
}
</style>