<template>
    <div class="statistical-analysis fsize-m2" v-if="option.length>0">
        <div class="box-left">
            <div class="box-left-top">
                <h3>{{pageData.ksData.name}}</h3>
                <p><span>实际参加人数：</span><span>{{pageData.ksData.ksUserJoin}}人</span></p>
                <p><span>及格人数：</span><span>{{pageData.ksData.ksUserPass}}人</span></p>
                <p><span>不及格人数：</span><span>{{pageData.ksData.ksNowPass}}人</span></p>
                <p><span>平均考试时间：</span><span>{{pageData.ksData.timeAvg}}分钟</span></p>
                <p><span>最高分：</span><span>{{pageData.ksData.scoreTop}}分</span></p>
                <p><span>平均分：</span><span>{{pageData.ksData.scoreAvg}}分</span></p>
            </div>
            <el-pagination
                    layout="prev, pager, next"
                    :page-size="1"
                    @current-change="handleEchart"
                    :total="option.length">
            </el-pagination>
        </div>
        <div class="box-right">
            <div class="fra-charts" id="welcomeCharts"></div>
        </div>
    </div>
    <div class="statistical-analysis fsize-m2" v-else>
        <el-card class="box-card only" shadow="hover">
            <img src="../../../../assets/images/default/c-exam-jiankong.png" class="examImage">
        </el-card>
    </div>
</template>

<script>
    import { getScoreShow } from '@/api/statistics.js';

    export default {
        name:    'StatisticalAnalysis',
        data() {
            return {
                pageData:      {
                    dlEchartData: {
                        xAxis:   {
                            type: 'category',
                            data: [],
                        },
                        yAxis:   {
                            type:      'value',
                            axisLabel: {
                                formatter: '{value} 人',
                            },
                        },
                        series:  [
                            {
                                name:      '得分人数',
                                data:      [],
                                barWidth:  '50%',
                                type:      'bar',
                                itemStyle: {
                                    color: '#2196F5',
                                },
                            },
                        ],
                        tooltip: {
                            trigger:     'axis',
                            axisPointer: {
                                type: 'shadow',
                            },
                        },
                    },
                    curPage:      0,
                    ksData:       {},
                },
                welcomeCharts: null,
            };
        },
        props:   {
            option: {
                type:    Array,
                default: () => [],
            },
        },
        watch:   {
            option: {
                handler() {
                    this.initPageData();
                },
                deep: true,
            },
        },
        methods: {
            initPageData() {
                if (this.option && this.option.length) {
                    const data = this.option[this.pageData.curPage];
                    //    文本init
                    this.pageData.ksData = {
                        ksUserJoin: data.ksUserJoin,
                        ksUserPass: data.ksUserPass,
                        ksNowPass:  data.ksUserJoin - data.ksUserPass,
                        name:       data.name,
                        scoreAvg:   data.scoreAvg,
                        scoreTop:   data.scoreTop,
                        startTime:  data.startTime,
                        timeAvg:    data.timeAvg,
                    };
                    //    图表数据获取
                    this.getEchartsData({
                                            ksId: data.ksId,
                                        });
                }
            },
            // 分页触发数据改变
            handleEchart(data) {

                this.pageData.curPage = data - 1;

                const newData = this.option[this.pageData.curPage];
                this.pageData.ksData = {
                    ksUserJoin: newData.ksUserJoin,
                    ksUserPass: newData.ksUserPass,
                    ksNowPass:  newData.ksUserJoin - newData.ksUserPass,
                    name:       newData.name,
                    scoreAvg:   newData.scoreAvg,
                    scoreTop:   newData.scoreTop,
                    startTime:  newData.startTime,
                    timeAvg:    newData.timeAvg,
                };

                this.getEchartsData({
                                        ksId: this.option[this.pageData.curPage].ksId,
                                    });

            },
            getEchartsData(data) {
                getScoreShow(data).then(res => {
                    if (res.code === 0) {
                        const xArr = [];
                        const yArr = [];
                        if (res.code === 0 && res.data.length) {
                            res.data.forEach(item => {
                                yArr.push(item.userCount);
                                xArr.push(item.score);
                            });
                        }
                        this.pageData.dlEchartData.xAxis.data = xArr;
                        this.pageData.dlEchartData.series[0].data = yArr;

                        this.initEcharts();

                        this.welcomeCharts.setOption(this.pageData.dlEchartData);
                    }
                });
            },
            // 初始化图表
            initEcharts() {
                if (this.option && this.option.length) {
                    this.welcomeCharts = this.$echarts.init(document.getElementById('welcomeCharts'));
                    this.welcomeCharts.setOption(this.pageData.dlEchartData);
                    window.onresize = () => {
                        return (() => {
                            this.$nextTick(() => {
                                this.resizeEchart();
                            });
                        })();
                    };

                }
            },
            resizeEchart() {
                this.welcomeCharts.resize();
            },
        },
        beforeDestroy() {
            this.onresize = null;
        },
    };
</script>

