<!-- 评价进度统计表 -->
<template>
    <div class="end_item">
        <div class="end_item">
            <div class=" page_search">
                <div class="search_content">
                    <div class="content_left">
                        <div class="grade_title">年级评价进度统计表</div>
                    </div>
                    <div class="content_right">
                        <el-button class="button_refresh" @click="HandleExportExcel('grade')">导出Excel</el-button>
                    </div>
                </div>
            </div>
            <Table :hidePagination="true" 
                :tableColumns="reviewProcessTableColumns" 
                :tableData="gradeTableData" >
                <template #num="{currentIndex}">{{ currentIndex }}</template>
            </Table>
        </div>
        
        <div class="page_jg_20"></div>
        <div class="end_item">
            <div class=" page_search">
                <div class="search_content">
                    <div class="content_left">
                        <div class="grade_title">班级评价进度统计表</div>
                    </div>
                    <div class="content_right">
                        <el-select 
                            @change="(val)=>HandleSelectChange(val)"
                            v-model="gradeSearchId"  placeholder="请选择">
                            <el-option
                                v-for="selectItem in gradeOptionList"
                                :key="selectItem.value"
                                :label="selectItem.label"
                                :value="selectItem.value"
                            />
                        </el-select>
                        <el-button class="button_refresh" @click="HandleExportExcel('class')">导出Excel</el-button>
                    </div>
                </div>
            </div>
            <Table :hidePagination="true"  
                :tableColumns="reviewProcessTableColumns" 
                :tableData="classTableData" >
                <template #num="{currentIndex}">{{ currentIndex }}</template>
            </Table>
        </div>
    </div>
</template>

<script setup lang="ts">
import Table from '@/baseComponents/Table.vue';
import {  ref, onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';

import { getEvaluationProgressStatisticsApi } from '@/api/evaluationProgressComponent.js';
import {reviewProcessTableColumns} from  './table'

import {useTableExcelExport} from '@/baseComponents/useTableExcelExport'

const route = useRoute()

const gradeTableData = ref([])

// 不同年级下的  班级评价数据列表 ——
const classReviewBarData = reactive<Record<string,any>>({})


// 年级评价进度数据
const gradeSearchId = ref('')  //默认的年级筛选项
const gradeOptionList = ref([])  //年级下拉项

const classTableData = ref([])
const HandleSelectChange = (val) =>{
    classTableData.value = classReviewBarData?.[val]
}

// 获取评价进度统计表数据
const GetReviewProcessTableData = async () =>{
    let res = await getEvaluationProgressStatisticsApi(route.query.id)
    if(res?.code == 200){
        gradeTableData.value = res.data

        gradeOptionList.value = res.data.map(item=>{
            return {
                label:item.name,
                value:item.id
            }
        })
        gradeSearchId.value = gradeOptionList.value[0]?.value

        res.data.map(item=>{
            classReviewBarData[item.id] = item.classData
        })
        classTableData.value = classReviewBarData?.[gradeSearchId.value]
        
    }
}

const HandleExportExcel = (type)=>{
    let finalTableColumn = reviewProcessTableColumns.value.slice(1)
    switch(type){
        case 'grade':
            useTableExcelExport(finalTableColumn,gradeTableData.value,'年级评价进度统计表','年级评价进度统计表')
            break
        case 'class':
            useTableExcelExport(finalTableColumn,classTableData.value,'班级评价进度统计表','班级评价进度统计表')
            break;
    }
}

onMounted(async ()=>{
    await GetReviewProcessTableData()
})


</script>


<style lang="scss" scoped>

.search_content{
    margin-bottom: 10px;
}

</style>