<template>
    <div id="stuScore">
        <div class="stu-analyse">
            <div class="stu-info">
                <ul>
                    <li>
                        <p><Icon type="ios-home" size="24" />{{$t("studentWeb.exam.studentScore.examName")}}：<span>{{$store.getters.getItemTitle.name}}</span></p>
                    </li>
                    <li>
                        <p><Icon type="ios-paper" size="24" />{{$t("studentWeb.exam.studentScore.examType")}}：<span>--</span></p>
                    </li>
                    <li>
                        <p><Icon type="ios-list-box" size="24" />{{$t("studentWeb.exam.studentScore.stableIndex")}}：<span>--</span></p>
                    </li>
                    <li>
                        <p><Icon type="ios-person" size="24" />{{$t("studentWeb.exam.studentScore.name")}}：<span>{{$store.state.userInfo.name}}</span></p>
                    </li>
                    <li>
                        <p style="margin-top:5px">{{$t("studentWeb.exam.studentScore.stuNo")}}：<span>{{$store.state.userInfo.sub}}</span></p>
                    </li>
                    <li>
                        <p style="margin-top:5px">{{$t("studentWeb.exam.studentScore.class")}}：<span>{{$store.state.user.studentProfile.classinfo.name}}</span></p>
                    </li>
                </ul>
            </div>
            <div class="stu-score">
                <p class="all-sub">{{$t("studentWeb.exam.studentScore.allSubScore")}}</p>
                <ul>
                    <li style="margin-right:5%;margin-top:15px;margin-left:3%">
                        <h2 style="color:cornflowerblue;font-size:18px">{{$t("studentWeb.exam.studentScore.total")}}</h2>
                        <p style="color: cornflowerblue;font-size: 30px;font-weight: 800">{{scoreInfo.total}}</p>
                    </li>
                    <li class="sub-ave">
                        <h2>{{$t("studentWeb.exam.studentScore.cAverages")}}</h2>
                        <p>{{scoreInfo.classAverage}}</p>
                    </li>
                    <li class="sub-ave">
                        <h2>{{$t("studentWeb.exam.studentScore.gAverages")}}</h2>
                        <p>{{scoreInfo.gradeAverage}}</p>
                    </li>
                    <li class="sub-ave">
                        <h2>{{$t("studentWeb.exam.studentScore.aAverages")}}</h2>
                        <p>--</p>
                    </li>
                    <li class="sub-ave">
                        <h2>{{$t("studentWeb.exam.studentScore.cIndex")}}</h2>
                        <p>{{scoreInfo.rankc}}<span>/{{scoreInfo.classCount}}</span></p>
                    </li>
                    <li class="sub-ave">
                        <h2>{{$t("studentWeb.exam.studentScore.gIndex")}}</h2>
                        <p>{{scoreInfo.rankg}}<span>/{{scoreInfo.gradeCount}}</span></p>
                    </li>
                    <li class="sub-ave">
                        <h2>{{$t("studentWeb.exam.studentScore.aIndex")}}</h2>
                        <!--<p>-<span>/1456</span></p>-->
                        <p>--</p>
                    </li>
                    <li>
                        <span style="font-size:16px;margin-top:20px;display:block">{{$t("studentWeb.exam.studentScore.onLine")}}</span>
                        <p style="font-size:24px;font-weight:600;width:60px;text-align:center">--</p>
                    </li>
                </ul>
            </div>
            <div class="sub-title">
                <ul>
                    <li class="sub-item">
                        <span>{{$t("studentWeb.exam.studentScore.subject")}}</span>
                    </li>
                    <li class="sub-item">
                        <span>{{$t("studentWeb.exam.studentScore.score")}}</span>
                    </li>
                    <li class="sub-item">
                        <span>{{$t("studentWeb.exam.studentScore.cAverage")}}</span>
                    </li>
                    <li class="sub-item">
                        <span>{{$t("studentWeb.exam.studentScore.gAverage")}}</span>
                    </li>
                    <li class="sub-item">
                        <span>{{$t("studentWeb.exam.studentScore.aAverage")}}</span>
                    </li>
                    <li class="sub-item">
                        <span>{{$t("studentWeb.exam.studentScore.cIndex")}}</span>
                    </li>
                    <li class="sub-item">
                        <span>{{$t("studentWeb.exam.studentScore.gIndex")}}</span>
                    </li>
                    <li class="sub-item">
                        <span>{{$t("studentWeb.exam.studentScore.aIndex")}}</span>
                    </li>
                    <li class="sub-item">
                        <span>{{$t("studentWeb.exam.studentScore.rAns")}}</span>
                    </li>
                    <li class="sub-item">
                        <span>{{$t("studentWeb.exam.studentScore.comIndex")}}</span>
                    </li>
                </ul>
                <ul v-for="(item,index) in scoreInfo.averageMap">
                    <li class="sub-item">
                        <div class="sub-show"><span>{{item.name}}</span></div>
                    </li>
                    <li class="sub-item">
                        <p>{{item.score}}<span>/{{item.scoreSum}}</span></p>
                    </li>
                    <li class="sub-item">
                        <p>{{item.classAverage}}</p>
                    </li>
                    <li class="sub-item">
                        <p>{{item.gradeAverage}}</p>
                    </li>
                    <li class="sub-item">
                        <p>--</p>
                    </li>
                    <li class="sub-item">
                        <p>{{item.classRank}}<span>/{{item.classCount}}</span></p>
                    </li>
                    <li class="sub-item">
                        <p>{{item.gradeRank}}<span>/{{item.gradeCount}}</span></p>
                    </li>
                    <li class="sub-item">
                        <p>--<span>/--</span></p>
                    </li>
                    <li class="sub-item">
                        <div class="ans">
                            <div class="obj-ans">
                                <h5>{{$t("studentWeb.exam.studentScore.objItem")}}</h5>
                                <p>{{item.sub.objIndex}}<span>/{{item.sub.objItem.length}}</span></p>
                            </div>
                            <div class="sub-ans">
                                <h5>{{$t("studentWeb.exam.studentScore.subItem")}}</h5>
                                <p>{{item.sub.subIndex}}<span>/{{item.sub.subItem.length}}</span></p>
                            </div>
                        </div>

                    </li>
                    <li class="sub-item">
                        <span>--</span>
                    </li>
                </ul>
            </div>
            <div class="score-table">
                <div>
                    <table class="gridtable" v-show="stuScore.length" style="margin-bottom:20px;">
                        <tr>
                            <th>{{$t("studentWeb.exam.studentScore.subjects")}}</th>
                            <th>{{$t("studentWeb.exam.studentScore.item")}}</th>
                        </tr>
                        <tbody v-for="(que,index) in stuScore" :key="index">
                            <tr>
                                <td width="4%" rowspan="4">{{que.name}}</td>
                            </tr>
                            <tr>
                                <td width="8%">{{$t("studentWeb.exam.studentScore.itemIndex")}}</td>
                            </tr>
                            <tr>
                                <td width="8%">{{$t("studentWeb.exam.studentScore.standardIndex")}}</td>
                            </tr>
                            <tr>
                                <td width="8%">{{$t("studentWeb.exam.studentScore.stuAnsIndex")}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="table-list">
                    <table class="gridtable" v-show="stuScore.length" style="margin-bottom: 20px;">
                        <tr>
                            <th>{{$t("studentWeb.exam.studentScore.objItems")}}</th>
                            <th>{{$t("studentWeb.exam.studentScore.subItems")}}</th>
                        </tr>
                        <tbody v-for="(que,index) in stuScore" :key="index">
                            <tr>
                                <td>
                                    <div class="score-box">
                                        <span v-for="(objQue,obj) in que.item.objItem" :key="obj">{{objQue.paperIndex}}</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="score-box">
                                        <span v-for="(subQue,sub) in que.item.subItem" :key="sub">{{subQue.paperIndex}}</span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="score-box">
                                        <span v-for="(objAns,obja) in que.item.objItem" :key="obja">{{objAns.answer.length > 1 ? '[?]': objAns.answer[0]}}</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="score-box">
                                        <span v-for="(subAns,suba) in que.item.subItem" :key="suba">{{subAns.score}}</span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="score-box">
                                        <span v-for="(objScore,objs) in que.item.objItem" :key="objs">{{objScore.stuScore == 0 ? objScore.stuAns[0] : '-'}}</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="score-box">
                                        <span v-for="(subScore,subs) in que.item.subItem" :key="subs">{{subScore.stuScore}}</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="score-table">
                <p style="color:#24b880">{{$t("studentWeb.exam.studentScore.notice")}}</p>
            </div>
        </div>
    </div>
</template>
<script>

    export default {
        props: {
            stuData: {
                type: Object,
                default: () => {
                    return {}
                }
            },    
            examData: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                testData: [],
                stuScore: [],
                scoreInfo: {}
            }
        },
        methods: {
            async getPaperData() {
                this.stuScore = []
                let data = []
                if (this.stuData.papers) {
                    for (let i = 0; i < this.stuData.papers.length; i++) {
                        let subData = {}
                        subData.name = this.stuData.subjects[i].name
                        subData.id = this.stuData.subjects[i].id
                        subData.item = await this.getStudentData(this.stuData.papers[i], this.stuData.stuScore[i], this.stuData.stuAns[i])
                        this.stuScore.push(subData)
                    }
                    this.getScoreInfo()
                }
            },
            getScoreInfo() {
                if (this.examData.length) {
                    this.scoreInfo = {}
                    let req = {
                        // "code": this.$store.state.user.schoolCode,
                        "code": this.$store.getters.getItemTitle.owner == 'school' ? this.$store.getters.getItemTitle.school : this.$store.getters.getItemTitle.creatorId,
                        "id": this.examData[0].id,
                        "sId": this.$store.state.userInfo.sub,
                        "cId": this.stuData.claId[0],
                        "gId": this.$store.state.user.studentProfile.classinfo.gradeId
                    }
                    this.$api.studentWeb.getStudentAnalysis(req).then(res => {
                        if (res.gradeAverage && this.stuScore.length) {
                            let gradeCount,classCount = 0
                            let total = 0
                            for (let item of res.averageMap) {
                                total += item.score
                                gradeCount = item.gradeCount
                                classCount = item.classCount
                                this.stuScore.filter((items) => {
                                    if (item.subjectId == items.id) {
                                        item.sub = items.item
                                        item.name = items.name
                                    }
                                });
                            }
                            res.total = total
                            res.gradeCount = gradeCount
                            res.classCount = classCount
                            this.scoreInfo = res
                        } else {
                            this.$Message.warning(this.$t('studentWeb.exam.studentScore.gradeErr'))
                        }
                    })
                }
            },
            formUrl(data) {  //处理学生作答数据blob地址
                let a = ""
                if (data.blob.indexOf('https://teammodelstorage') > -1) {
                    a = data.blob
                } else {
                    let blobUrl = JSON.parse(decodeURIComponent(localStorage.student_profile, "utf-8")).blob_uri
                    let studentBlob = blobUrl.split('/')
                    let url = data.scope == 'school' ? blobUrl : "https://" + studentBlob[studentBlob.length - 2] + '/' + this.$store.getters.getItemTitle.creatorId
                    a = `${url}/exam/${data.blob}`
                }
                return a 
            },
            async getStudentData(data,score,ans) {
                let paper = []
                let item = {
                    objItem: [],
                    subItem: [],
                }
                console.log('5636123322',data)
                if (data !== undefined) {
                    let codes = this.$store.getters.getItemTitle.scope == 'school' ? data.school : data.creatorId
                        let code = {
                            scope: data.scope,
                            code: codes,
                            blob: data.blob,
                            examId:codes
                        }
                    let papers = await this.$evTools.getStuPaper(code)
                    let answer = await this.getItem(ans)
                    paper = await this.formPaper(papers)
                    this.testData = paper
                    let objIndex = 0
                    let subIndex = 0
                    for (let i = 0; i < paper.length; i++) {
                        paper[i].stuScore = score[i]
                        paper[i].stuAns = answer[i]
                        if (paper[i].type == 'single' || paper[i].type == 'judge' || paper[i].type == 'multiple') {
                            if (paper[i].stuScore == paper[i].score) {
                                objIndex++
                            }
                            item.objItem.push(paper[i])
                        } else {
                            if (paper[i].stuScore >= (paper[i].score * 0.8).toFixed(2)) {
                                subIndex++
                            }
                            item.subItem.push(paper[i])
                        }
                    }
                    item.subIndex = subIndex
                    item.objIndex = objIndex
                }
                return item
            },
            //获取学生作答数据
            async getItem(data) {
                let datas = []
                if (data !== undefined) {
                    let key = this.$store.getters.getItemTitle
                    let code = {
                        scope: this.stuData.papers[0].scope,
                        code: key.scope == 'school' ? key.school : key.creatorId,
                        blob: data[0]
                    }
                    let blob = this.formUrl(code)
                    code.blob = blob
                    datas = await this.$evTools.getComposeItem(code)
                    return datas
                } else {
                    return []
                }
            },
            //格式化作题目数据
            async formPaper(data) {
                let paper = []
                let datas = data.item
                let exam = [...datas]
                if (exam.length) {
                    for (let i = 0; i < exam.length; i++) {
                        if (exam[i].type == 'compose') {
                            let k = 1
                            if (exam[i].children.length > 0) {
                                for (let items of exam[i].children) {
                                    items.parentInfo = exam[i]
                                    items.parent = i
                                    items.paperIndex = (i + 1) + '-' + k
                                    paper.push(items)
                                    k++
                                }
                            }
                        } else {
                            exam[i].paperIndex = i + 1
                            paper.push(exam[i])
                        }
                    }
                    return paper
                }
                return []
            },
        },
        mounted() {
            this.getPaperData()

        },
        watch: {
            stuData() {
                if (this.stuData.papers) {
                    this.stuScore = []
                    this.getPaperData()
                }
                deep:true
            }
        }
    }
</script>
<style lang="less" scoped>
    table {
        width: 100%;
    }
    .stu-analyse table {
        border-collapse: collapse;
    }

    .stu-analyse th, td {
        padding: 5px;
        text-align: center;
        border: 1px solid #999;
        min-width: 100px;
    }

    .stu-analyse th {
        background-color: #333;
        color: #fff;
        position: sticky;
        top: 0px;
    }

    .stu-analyse {
        width: 100%;
        border-radius: 5px;
        background-color: #F0F0F0;
    }

        .stu-analyse .stu-info {
            padding-top: 5px;
        }

            .stu-analyse .stu-info ul {
                display: flex;
                list-style: none;
                border-radius: 5px;
                margin-left: 10px;
            }

            .stu-analyse .stu-info li {
                margin-right: 5%;
                font-weight: 600;
                font-size: 14px;
            }

        .stu-analyse .stu-score .all-sub {
            display: block;
            margin-top: 10px;
            margin-bottom: 5px;
            font-size: 18px;
            font-weight: 800;
            margin-left: 5px;
            width: 120px;
            color: #24b880;
            border-radius: 5px;
            text-align: center;
            background-color: #ffffff
        }

        .stu-analyse .stu-score ul {
            background-color: #ffffff;
            display: flex;
            list-style: none;
            margin-left: 5px;
            width: calc(100% - 10px);
        }

        .stu-analyse .stu-score .sub-ave {
            margin-right: 7%;
        }

            .stu-analyse .stu-score .sub-ave h2 {
                display: block;
                margin-top: 20px;
                font-size: 16px;
                font-weight: 600;
            }

            .stu-analyse .stu-score .sub-ave p {
                display: block;
                margin-top: 5px;
                font-size: 24px;
                font-weight: 600;
            }

            .stu-analyse .stu-score .sub-ave span {
                font-size: 14px;
                font-weight: 600;
            }

        .stu-analyse .sub-title {
            margin-left: 3%;
        }

            .stu-analyse .sub-title ul {
                font-size: 18px;
                display: flex;
                list-style: none;
                width: calc(100% - 10px);
                margin-left: 5px;
            }

            .stu-analyse .sub-title .sub-item {
                margin-right: 5%;
            }

            .stu-analyse .sub-title .sub-items {
                margin-right: 8%;
            }

            .stu-analyse .sub-title .sub-item span {
                display: block;
                font-size: 14px;
                font-weight: 800;
                /*width: 70px;*/
            }

            .stu-analyse .sub-title .sub {
                width: 80px;
                background-color: #ffffff;
                padding: 5px 5px;
            }

            .stu-analyse .sub-title .sub-show {
                margin-top: 15px;
                border-left: 5px solid #24b880;
            }

                .stu-analyse .sub-title .sub-show span {
                    display: block;
                    font-weight: 800;
                    font-size: 18px;
                    text-align: center;
                    margin-left: 5px;
                }

            .stu-analyse .sub-title .sub-item {
                width: 5%;
            }

                .stu-analyse .sub-title .sub-item p {
                    margin-top: 15px;
                    display: flex;
                    font-size: 20px;
                }

                .stu-analyse .sub-title .sub-item span {
                    margin-top: 6px;
                }

                .stu-analyse .sub-title .sub-item .ans {
                    display: flex;
                    width: 95px;
                    height: 50px;
                }

                    .stu-analyse .sub-title .sub-item .ans p {
                        display: flex;
                        margin-top: -5px;
                        text-align: center;
                    }

                    .stu-analyse .sub-title .sub-item .ans .obj-ans {
                        border-right: 2px solid #24B880;
                        margin-right: 5px;
                        padding-right: 5px;
                        height: 45px;
                    }

        .stu-analyse .sub-score ul {
            font-size: 18px;
            display: flex;
            list-style: none;
            /*width: 98%;*/
            margin-left: 10px;
            margin-top: 20px;
        }

        .stu-analyse .sub-score li {
            margin-left: 20px;
            margin-right: 50px;
        }

        .stu-analyse .sub-score span {
            font-size: 14px;
            font-weight: 600;
        }

        .stu-analyse .score-table {
            margin-left: 10px;
            width: calc(100% - 10px);
            padding-bottom: 10px;
            padding-right: 10px;
            /*overflow: hidden;*/
        }
    .stu-analyse .score-table .table-list{
        overflow-x:scroll;
    }

        .stu-analyse table.gridtable {
            width: calc(100% - 10px);
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }

            .stu-analyse table.gridtable th {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #666666;
            }

            .stu-analyse table.gridtable td {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #666666;
            }

        .stu-analyse .score-table {
            overflow-x: scroll;
            display: flex
        }

            .stu-analyse .score-table .gridtable span {
                display: block;
                text-align: center;
                width: 40px;
            }

            .stu-analyse .score-table .gridtable .score-box {
                text-align: left;
                display: flex;
            }
</style>
