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

            <MultipleBarCharts :datax="gradeReviewAccountData.datax" :height="375"
                :datay="gradeReviewAccountData.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 { onMounted, reactive, ref } from 'vue';

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

// 年级评价进度数据
const currentClickGrade = ref('')


// 年级评价进度柱状图
const gradeReviewAccountData = reactive({
    datax: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年级', '高一'],
    datay: [58,11,17,53,41,100,62,96,48,34]
})

// 班级评价进度柱状图
const classReviewAccountData = reactive({
    // X轴数据：根据图片提取的班级名称
    datax: [
        '1班', '2班', '3班', '4班', '5班', '6班', 
        '7班', '8班', '9班', '10班', '11班', '12班'
    ],
    datay: [45, 28,  46, 47, 48,  41, 43, 44, 45, 42,43,43 
    ]
})
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
}


</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>