<!-- 评价进度统计图 -->
<template>
    <div>
        <div class="bar_container">
            <div class="bar_title">年级评价进度</div>
            <MultipleBarCharts ref="barChartDom1"  :height="375" unit="人"
                :datax="gradeReviewBarData?.datax" 
                :datay="gradeReviewBarData?.datay" 
                :isClick="true"
                :tooltipFormater="tooltipFormater"
                :xAxisLabelFormatter="xAxisLabelFormatter(barChartDom1)"
                @HandleChartClick="HandleChartClick" />
        </div>

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

        <div class="bar_container">
            <div class="bar_title">
                <span class="parent_title">年级评价进度 / </span>
                <span>{{currentClickGrade.split('-')[0]}}</span>
            </div>
            <MultipleBarCharts ref="barChartDom2" :height="375" unit="人"
                :datax="classReviewAccountData?.datax" 
                :datay="classReviewAccountData?.datay" 
                :tooltipFormater="tooltipFormater"
                :xAxisLabelFormatter="xAxisLabelFormatter(barChartDom2)"/>
        </div>
    </div>
</template>

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

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

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

const route = useRoute()

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

const gradeReviewBarData = reactive({
    datax:[],
    datay:[]
})
const classReviewBarData = reactive<Record<string,any>>({})

const barChartDom1 = ref()
const barChartDom2 = ref()

// 班级评价数据
// 班级评价进度柱状图
const classReviewAccountData = computed(()=>{
    let gradeId = currentClickGrade.value.split('-')[1]
    console.log('班级评价数据列表----',classReviewBarData?.[gradeId])
    return classReviewBarData?.[gradeId]
})

const tooltipFormater = (params)=>{
    const {name,seriesName,value,marker} = params
    return `<span style=\"font-weight:600;color:#333;\">${name.split('-')[0]}</span>`  + '<br/>'  + '完成人数:' + `<span style=\"margin-left:10px;\">${value}</span>` ;
}

const xAxisLabelFormatter =(dom)=> (labelValue)=>{
    // 图表宽度
    let totalWidth = dom.clientWidth;
    //计算每个柱的宽度 （图表宽度-左右边距）/ x轴数据长度
    let singleSeriesWidth = Math.ceil((totalWidth - 140) / gradeReviewBarData.datax.length);
    let value =  labelValue.split('-')[0]

    // 文字大小设置为14px  按14算
    const valueWidth = value.length * 14;
    // console.log("文字宽度",valueWidth);
    // console.log("单系列宽度",singleSeriesWidth);
    if(valueWidth > singleSeriesWidth) {
        if (singleSeriesWidth < 100) {
            if(valueWidth > 80) {
                // let maxLength = Math.floor(80 / 14) - 1;
                return value.slice(0, 2) + '...' + value.slice(-3)
            } else {
                return value;
            }
        } else {
            let maxLength = Math.floor(singleSeriesWidth / 14) - 1;
            return value.slice(0, maxLength) + '...';
        }
    } else {
        return value;
    }
}

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

// 获取评价进度统计图数据
const GetReviewProcessBarData = 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.overCodeCount
        }) || []

        res.data.map(item=>{
            let classDataX = item.classData.map(item=>{
                return item.name
            }) || []
            let classDataY =  item.classData.map(item=>{
                return item.overCodeCount
            }) || []
            classReviewBarData[item.id] = {
                datax:classDataX,
                datay:classDataY,
                totalClassData:item.classData
            }
        })
    }
}

onMounted( async()=>{
    await GetReviewProcessBarData()
    if(!currentClickGrade.value){
        currentClickGrade.value = gradeReviewBarData.datax?.[0]

    }
})

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