<!-- 评价进度统计图 -->
<template>
    <div>
        <div class="bar_container">
            <div class="bar_title">年级评价进度</div>

            <MultipleBarCharts :datax="gradeBarData?.datax" :height="375"
                :datay="gradeBarData?.datay" :tooltipFormater="tooltipFormater"
                @HandleChartClick="HandleChartClick" :isClick="true"
            >
            </MultipleBarCharts>
        </div>

        <div class="page_jg_20"></div>

        <div class="bar_container">
            <div class="bar_title">
                <span class="parent_title">年级评价进度 / </span>
                <span>{{currentClickGrade}}</span>
            </div>
            <MultipleBarCharts :datax="classReviewAccountData?.datax" :height="375"
                :datay="classReviewAccountData?.datay" :tooltipFormater="tooltipFormater">
            </MultipleBarCharts>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue';

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

interface BarData {
    datax:Array<any>
    datay:Array<any>
}


const props = defineProps({
    // 年级评价进度柱状图
    gradeBarData:{
        type:Object as ()=>BarData,
    },
    classReviewBarData:{
        type:Object,
    }
})
// 年级评价进度数据
const currentClickGrade = ref('')




// 班级评价数据
// 班级评价进度柱状图
const classReviewAccountData = computed(()=>{
    let gradeId = currentClickGrade.value.split('-')[1]

    console.log('班级评价数据列表----',props.classReviewBarData?.[gradeId])
    return props.classReviewBarData?.[gradeId]
})

const tooltipFormater = (params)=>{
    const {name,seriesName,value,marker} = params
    return name + '<br/>' + marker + '评价进度' + `<span style=\"margin-left:10px;\">${value}</span>` ;
}

const HandleChartClick = (index,xName)=>{
    console.log('当前点击的内容',index,xName)
    currentClickGrade.value = xName
}

watch([()=>props.gradeBarData,()=>props.classReviewBarData],([newGradeVal,newClassVal])=>{

    console.log('当前传递的年级数据列表',newGradeVal,'当前传递的班级数据列表',newClassVal)

},{immediate:true,deep:true})
</script>


<style lang="scss" scoped>
.bar_container{
    padding:20px;
    border:solid #EBEEF5 1px;
    border-radius: 10px;

    .bar_title{
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        margin-bottom: 20px;
        .parent_title{
            color:#999999;
            font-weight: 400;
        }
    }
}

</style>