<template>
    <div class="page_item end_item">
        <div class="page_search">
            <div class="search_content">
                <div class="content_left">
                    <TabSearch tabType="box" :defaultTabKey="defautTabKey" 
                        :tabList="tabList" @tabChange="HandleTabChange">
                    </TabSearch>
                </div>
                <div class="content_right">
                    <div class="open_switch"> 
                        <span style="font-size: 14px;"> 评价状态：</span>
                        <el-switch :model-value="isOpenReviewTask"  
                            style="--el-switch-on-color: #2E64FA"
                            @change="HandleReviewTaskOpenOrClose"/>
                    </div>
                    <el-button  class="button_background" @click="FinishReviewProgress">评价完成</el-button>
                </div>
            </div>
        </div>
        <div class="page_jg_20"></div>
        <div class="diagram_container">
            <ReviewProcessBarData v-if="defautTabKey == 'reviewProcessBarData'"
                :gradeBarData="gradeReviewBarData" :classReviewBarData="classReviewBarData">
            </ReviewProcessBarData>
            <ReviewProcessTableData v-if="defautTabKey == 'reviewProcessTableData'" 
                :gradeTableData="gradeReviewBarData?.totalGradeData" :allClassTableData="classReviewBarData">
            </ReviewProcessTableData>
            <ReviewAccountTableData v-if="defautTabKey == 'reviewAccountTableData'"></ReviewAccountTableData>
        </div>
    </div>
</template>



<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import { useStore } from 'vuex';


import TabSearch from '@/baseComponents/TabSearch.vue';

import ReviewProcessBarData from './ReviewProcessBarData.vue';
import ReviewProcessTableData from './ReviewProcessTableData.vue';
import ReviewAccountTableData from './ReviewAccountTableData.vue';
import  {tabList} from './tabSearch'

import { getEvaluationProgressStatisticsApi,
        openOrCloseQuestionnaireReviewTaskApi,finishReviewProgressApi, 
    } from '@/api/evaluationProgressComponent.js';
import { ElMessage } from 'element-plus';

const route = useRoute()
const router = useRouter()
const store= useStore()

const isOpenReviewTask = computed(()=>{
    return store.state.evaluationManageStepData.isAllowFillQuestionnaire
})  //评价状态 开启或关闭


const defautTabKey = ref('reviewAccountTableData')
const HandleTabChange = (val)=>{
    defautTabKey.value = val
}

// 年级评价数据
const gradeReviewBarData = reactive({
    datax: [],
    datay: [],
    totalGradeData:[]
})

// 班级评价数据
const classReviewBarData = reactive({})


// 处理评价任务的开启或关闭
const HandleReviewTaskOpenOrClose = async (val)=>{
    let res = await openOrCloseQuestionnaireReviewTaskApi(route.query.id)
    if(res?.code == 200){
        ElMessage.success(res?.msg)
        // 更新 state全局 的 evaluationManageStepData.isAllowFillQuestionnaire
        store.commit('updateEvaluationManageStepData',{
            isAllowFillQuestionnaire:(Number(res.data) === 0 ? false : true)
        })
    }
}

const FinishReviewProgress = async()=>{
    let res = await finishReviewProgressApi(route.query.id)
    if(res?.code == 200){
        // 重新查询 主任务数据
        // 同时跳转到下一步
        // 完成后,重新查询 任务管理基础信息,并跳到下一步
        await store.dispatch('updateEvaluationManageStepData',route.query.id)
        store.commit('updateEvaluationManageStepData',
                    {currentActiveStepName:'generateAnalysis'})
        router.push(`generateAnalysis?id=${route.query.id}`)
    }
}
onMounted(async ()=>{
    let res = await getEvaluationProgressStatisticsApi(route.query.id)
    if(res?.code == 200){
        gradeReviewBarData.datax = res.data.map(item=>{
            return item.name+'-'+item.id
        })
        gradeReviewBarData.datay = res.data.map(item=>{
            return item.progress?.slice(0,-1)
        })
        gradeReviewBarData.totalGradeData = res.data


        res.data.map(item=>{
            let classDataX = item.classData.map(item=>{
                return item.name
            })
            let classDataY =  item.classData.map(item=>{
                return item.progress?.slice(0,-1)
            })
            classReviewBarData[item.id] = {
                datax:classDataX,
                datay:classDataY,
                totalClassData:item.classData
            }
        })
    }
})
</script>



<style lang="scss" scoped>

.end_item{
    overflow-y: auto;
    .diagram_container{
        overflow: auto;
    }
}

.content_right{
    align-items: center;
    gap:20px  !important;
    .open_switch{
        display: flex;
        align-items: center;
        gap:4px;
    }
}

</style>