<!-- 评价进度统计表 -->
<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="el-button-refresh">导出Excel</el-button>
                    </div>
                </div>
            </div>
            <Table  :currentPage="1" 
                :pageSize="20" :tableColumns="reviewProcessTableColumns" 
                :tableData="gradeTableData"
                :totalNum="0">
            </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="el-button-refresh">导出Excel</el-button>
                    </div>
                </div>
            </div>
            <Table  :currentPage="1" 
                :pageSize="20" :tableColumns="reviewProcessTableColumns" 
                :tableData="classTableData"
                :totalNum="0">
            </Table>
        </div>
    </div>
</template>

<script setup lang="ts">
import Table from '@/baseComponents/Table.vue';
import {  ref, watch } from 'vue';

import {reviewProcessTableColumns} from  './table'


const props = defineProps({
    gradeTableData:{
        type:Array,
        default:[]
    },
    allClassTableData:{
        type:Object,
    }

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

const classTableData = ref([])
const handleSelectChange = (val) =>{


}

watch(()=>props?.gradeTableData,(newVal)=>{

    console.log('全部的班级数据---props.allClassTableData',props.allClassTableData)
    gradeOptionList.value = newVal.map(item=>{
        return {
            label:item.name,
            value:item.id
        }
    })
    gradeSearchId.value = gradeOptionList.value[0]?.value
    classTableData.value = props.allClassTableData?.[gradeSearchId.value]?.totalClassData
},{immediate:true,deep:true})
</script>


<style lang="scss" scoped>

.search_content{
    margin-bottom: 10px;
}

</style>