<template>
    <div class="achievement-container">
        <Row>
            <span class="class-info">
                <Icon type="ios-ribbon" />{{$t('totalAnalysis.ach_text10')}}: <span style="color:#0bdfc4;font-size:16px;margin-right:20px"> {{className}} </span> {{$t('totalAnalysis.ach_text11')}}  <span style="color:#0bdfc4;font-size:20px"> {{ tableData.length }} </span>
                <span class="class-info-back">
                    <Button type="primary" @click="goBack">
                        {{$t('totalAnalysis.ach_text12')}}
                    </Button>
                </span>
            </span>
        </Row>
        <Row>
            <span class="component-title">{{$t('totalAnalysis.ach_title7')}}</span>
        </Row>
        <Row>

        </Row>
        <!-- PR排名表格 -->
        <Row class-name="base-table-row">
            <BaseTable :columns="earlyPercentColumns"
                       :tableDatas="tableData"
                       :tableName="$t('totalAnalysis.ach_title7')"
                       tableRef="earlyWarningTable"
                       ref="percentTable"
                       v-show="warningIndex === 0"
                       showSelect
                       @onSelectChange="onSelectChange"></BaseTable>
        </Row>
        <!-- 班级均分分析 -->
        <Row class-name="averageBarRow">
            <span class="component-title">{{$t('totalAnalysis.ach_title8')}}</span>
            <div class="sort-box">
                <span style="font-size:14px;margin-right:10px;color: #a9a9a9;">{{$t('totalAnalysis.ach_chart_text1')}}:</span>
                <Select v-model="sortValue" style="width:160px" @on-change="handleSort">
                    <Option v-for="(item,index) in sortArr" :value="index" :label="item" :key="index"></Option>
                </Select>
            </div>
        </Row>
        <Row>
            <div id="stuAverageBar"></div>
        </Row>
    </div>
</template>

<script>
    import BaseTable from '@/components/student-analysis/total/BaseMyTable.vue'
    export default {
        components: {
            BaseTable
        },
        data() {
            return {
                echartData: [],
                tableData: [],
                currentPR: [],
                subjectList: [],
                classAverage: 0,
                gradeAverage: 0,
                areaAverage: 0,
                warningIndex: 0,
                sortValue: 0,
                className: '',
                sortArr: [this.$t('totalAnalysis.ach_chart_text2'), this.$t('totalAnalysis.ach_chart_text3'), this.$t('totalAnalysis.ach_chart_text4')],
                earlyPercentColumns: [
                    {
                        title: this.$t('totalAnalysis.base_name'),
                        key: 'name',
                        fixed: 'left',
                        minWidth: 100
                    },
                    {
                        title: this.$t('totalAnalysis.base_id'),
                        key: 'setNo',
                        minWidth: 120
                    },
                    {
                        title: this.$t('totalAnalysis.ach_table_text2'),
                        sortable: 'custom',
                        key: 'score',
                        minWidth: 100
                    },
                    {
                        title: this.$t('totalAnalysis.ach_table_text11'),
                        key: 'classPR',
                        sortable: 'custom',
                        minWidth: 120
                    },
                    {
                        title: this.$t('totalAnalysis.ach_table_text8'),
                        key: 'classRank',
                        minWidth: 120,
                        sortable: 'custom'
                    },
                    {
                        title: this.$t('totalAnalysis.ach_table_text12'),
                        key: 'gradePR',
                        minWidth: 120,
                        sortable: 'custom'
                    },
                    {
                        title: this.$t('totalAnalysis.ach_table_text9'),
                        key: 'gradeRank',
                        minWidth: 120,
                        sortable: 'custom'
                    },
                    {
                        title: this.$t('totalAnalysis.ach_table_text13'),
                        key: 'areaPR',
                        minWidth: 120,
                        sortable: 'custom'
                    },
                    {
                        title: this.$t('totalAnalysis.ach_table_text10'),
                        key: 'areaPR',
                        sortable: 'custom',
                        minWidth: 120
                    }
                ]
            }
        },

        created() {
            this.className = this.$route.query.name
        },

        methods: {
            warningTabClick(index) {
                this.warningIndex = index
            },

            handleSort(index) {
                let memberList = this.tableData
                if (index === 0) {
                    this.echartData = memberList.sort(function(a, b) { return Number(a.setNo) - Number(b.setNo) })
                } else if (index === 1) {
                    this.echartData = memberList.sort(function(a, b) { return Number(b.score) - Number(a.score) })
                } else {
                    this.echartData = memberList.sort(function(a, b) { return Number(b.score) - Number(a.score) }).reverse()
                }
                this.drawLine(this.echartData)
            },

            onSelectChange(val) {
                this.tableData = this.onGetClassTable(val)
                this.drawLine(this.tableData)
            },

            goBack() {
                this.$store.commit('updateExportTable', [{
                    tableRef: 'entryTable',
                    tableName:'进线情况统计'
                },{
                    tableRef: 'entryRateTable',
                    tableName:'进线率统计'
                },{
                    tableRef: 'achievementTable',
                    tableName:'预警统计表格'
                }])
                this.$router.back(-1)
                this.$parent.isShowQuestions = false
            },

            /**
             * 获取指定科目的表格数据
             * @param subjectIndex
             */
            onGetClassTable(subjectIndex) {
				console.log(this.getAnalysisJson)
				let result = []
                let analysisJson = JSON.parse(JSON.stringify(this.getAnalysisJson))
				let curClassItem = analysisJson.classes.filter(i => i.className === this.className)[0]
				let studentIds = curClassItem.studentIds
				this.classAverage = curClassItem.subjects[subjectIndex].average
				studentIds.forEach((stuId,stuIndex) => {
					let stuItem = analysisJson.students.filter(i => i.id === stuId)[0]
					let stuSubjectItem = analysisJson.students.filter(i => i.id === stuId)[0].subjects[subjectIndex]
					result.push({
						name:stuItem.name,
						setNo:stuItem.no,
						score:stuSubjectItem.score,
						classPR:stuSubjectItem.cpr,
						classRank:stuSubjectItem.csort, 
						gradePR:stuSubjectItem.gpr,
						gradeRank:stuSubjectItem.gsort,
						areaPR:0,
						areaRank:0
					})
				})
				return result
            },

            /**
              * 渲染柱状图
              * @param echartData
              */
            drawLine(echartData) {
				console.log('预警柱状图',echartData)
                let that = this
                let myBar = this.$echarts.init(document.getElementById('stuAverageBar'))
                var option = {
                    legend: {
                        data: [{
                            name: this.$t('totalAnalysis.ach_table_text2'),
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        {
                            name: this.$t('totalAnalysis.ach_text4'),
                            color: 'red',
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        {
                            name: this.$t('totalAnalysis.ach_text5'),
                            color: 'red',
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        {
                            name: this.$t('totalAnalysis.ach_text6'),
                            color: 'red',
                            textStyle: {
                                color: '#fff'
                            }
                        }
                        ]

                    },
                    tooltip: {
                        show: true, // 是否显示提示框，默认为true
                        trigger: 'axis', // 数据项图形触发
                        axisPointer: {
                            // 指示样式
                            type: 'shadow',
                            axis: 'auto',
                            shadowStyle: {
                                color: 'rgba(128,128,128,0.1)'
                            }
                        },
                        padding: 5,
                        textStyle: {
                            color: '#fff'
                        },
                        formatter: function(params) {
                            let name = echartData[params[0].dataIndex].name
                            let result = name
                            for (let i = 0; i < params.length; i++) {
                                result += '<br>' + params[i].marker + params[i].seriesName + '：' + params[i].data.toFixed(2)
                            }
                            return result
                        }
                    },
                    grid: {
                        show: false,
                        containLabel: true,
                        height: 480,
                        width: '90%',
                        x2: '5%',
                        tooltip: {
                            show: true,
                            trigger: 'axis', // 触发类型
                            textStyle: {
                                color: '#666'
                            }
                        }
                    },
                    dataZoom: [{
                        'show': true,
                        'height': 10,
                        'xAxisIndex': [
                            0
                        ],
                        bottom: 40,
                        'start': 0,
                        'end': 100,
                        handleIcon: 'M512 497.821538m-418.264615 0a418.264615 418.264615 0 1 0 836.52923 0 418.264615 418.264615 0 1 0-836.52923 0Z',
                        handleSize: '160%',
                        handleStyle: {
                            color: '#d3dee5'

                        },
                        textStyle: {
                            color: '#fff'
                        },
                        borderColor: '#90979c'
                    }, {
                        'type': 'inside',
                        'show': true,
                        'height': 15,
                        'start': 0,
                        'end': 100
                    }],
                    // toolbox: {
                    //  show: true,
                    //  feature: {
                    //    magicType: { show: true, type: ['line', 'bar'] },
                    //    saveAsImage: { show: true }
                    //  }
                    // },
                    xAxis: {
                        show: true,
                        offset: 0,
                        type: 'category',
                        nameTextStyle: {
                            color: '#a2a2a2'
                        },
                        name: this.$t('totalAnalysis.base_id'),
                        axisLabel: {
                            show: true,
                            inside: false,
                            margin: 15,
                            color: '#989898'
                        },
                        data: echartData.map(item => item.setNo)
                    },
                    yAxis: {
                        show: true,
                        type: 'value',
                        axisLabel: {
                            show: true,
                            inside: false,
                            rotate: 0,
                            margin: 8,
                            color: '#989898',
                            fontSize: 12,
                            fontFamily: 'Microsoft YaHei'
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#4c504a',
                                width: 0.5,
                                type: 'solid'
                            }
                        }
                    },
                    series: [
                        {
                            name: this.$t('totalAnalysis.ach_table_text2'),
                            type: 'bar',
                            itemStyle: {
                                normal: { // 渐变色
                                    color: 'rgb(102,204,204)'
                                },
                            },
							barMaxWidth: 40,
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' },
                                    { type: 'min', name: '最小值' }
                                ]
                            },
                            data: echartData.map(item => item.score)
                        },
                        {
                            name: this.$t('totalAnalysis.ach_text4'),
                            type: 'line',
                            itemStyle: {
                                color: 'yellow',
                                width: 0
                            },
                            symbol: 'none',
                            lineStyle: {
                                type: 'dashed',
                                width: 0
                            },
                            markLine: {
                                data: [
                                    { type: 'average' }
                                ],
                                lineStyle: {
                                    color: 'yellow',
                                    type: 'dashed'
                                }
                            },
                            data: echartData.map(item => Number(this.classAverage))
                        },
                        // {
                        //     name: this.$t('totalAnalysis.ach_text5'),
                        //     type: 'line',
                        //     itemStyle: {
                        //         color: '#ff33cc',
                        //         width: 0
                        //     },
                        //     symbol: 'none',
                        //     lineStyle: {
                        //         type: 'dashed',
                        //         width: 0
                        //     },
                        //     markLine: {
                        //         data: [
                        //             { type: 'average' }
                        //         ],
                        //         lineStyle: {
                        //             color: '#ff33cc',
                        //             type: 'dashed'
                        //         }
                        //     },
                        //     data: echartData.map(item => Number(this.gradeAverage))
                        // },
                        // {
                        //     name: this.$t('totalAnalysis.ach_text6'),
                        //     type: 'line',
                        //     itemStyle: {
                        //         color: '#66ff99',
                        //         width: 0
                        //     },
                        //     symbol: 'none',
                        //     lineStyle: {
                        //         type: 'dashed',
                        //         width: 0
                        //     },
                        //     markLine: {
                        //         data: [
                        //             { type: 'average' }
                        //         ],
                        //         lineStyle: {
                        //             color: '#66ff99',
                        //             type: 'dashed'
                        //         }
                        //     },
                        //     data: echartData.map(item => Number(this.areaAverage))
                        // }
                    ]
                }

                // 绘制图表
                myBar.setOption(option)
                window.addEventListener('resize', function() {
                    myBar.resize()
                })
            }

        },

        mounted() {
            this.$parent.isShowQuestions = true
            this.$refs.percentTable.$el.childNodes[1].style.borderRight = '0'

            if (this.getAnalysisJson) {
                this.tableData = this.onGetClassTable(0)
                this.subjectList = this.getAnalysisJson.subjects.map(item => item.name)
                this.drawLine(this.tableData)
            }
        },

        computed: {
            getAnalysisJson() {
                return this.$store.state.totalAnalysis.analysisJson
            }
        },
        watch: {
            getAnalysisJson(val) {
                if (!val) return
				this.tableData = this.onGetClassTable(0)
				this.subjectList = val.subjects.map(item => item.name)
				this.drawLine(this.tableData)
                // let totalItem = val.rankPR.splice(val.rankPR.length - 1, 1)
                // let PRData = val.rankPR.unshift(totalItem)
                // console.log(PRData)

                // let keys = PRData[0].keys
                // let datas = PRData[0].datas.filter(item => item.hasOwnProperty(this.className))[0]
                // this.tableData = this.$tools.jsonTransform({ datas: datas, keys: keys })
                // this.echartData = this.$tools.jsonTransform({ datas: datas, keys: keys })
                // this.subjectList = val.average.datas.map(item => item.name)
                // this.drawLine(this.echartData)
            }

        }
    }
</script>

<style src="./AchievementAnalysis.css" scoped></style>
<style scoped>
    .early-warning-tab {
        margin-left: 60px;
        font-size: 16px;
    }

        .early-warning-tab span {
            border-bottom: 2px solid #808080;
            margin-left: 20px;
            padding: 5px 0;
            cursor: pointer;
        }

        .early-warning-tab .early-warning-active {
            font-weight: bold;
            color: #07cdd8;
            border-color: #07cdd8;
        }

    #stuAverageBar {
        height: 600px;
    }

    .averageBarRow {
        position: relative;
    }

    .sort-box {
        position: absolute;
        right: 150px;
        top: 20px;
    }
</style>

<style>

    .sort-box .ivu-input::-webkit-input-placeholder {
        color: #a9a9a9;
    }

    .sort-box .ivu-select {
        margin: 5px 0;
        height: 34px;
    }

    .sort-box .ivu-select-single .ivu-select-selection {
        height: 30px;
        background: transparent;
        border: 1px solid #a9a9a9;
        box-shadow: none;
    }

    .sort-box .ivu-select-single .ivu-select-dropdown {
        /*background: #595959;*/
    }

    .sort-box .ivu-select-single .ivu-select-placeholder {
        height: 30px;
        line-height: 26px;
        font-size: 16px;
    }

    .sort-box .ivu-select-single .ivu-select-selected-value {
        color: #a9a9a9;
    }

    .sort-box .ivu-select-single .ivu-select-arrow {
        color: #a9a9a9;
    }
</style>
