<template>
    <div style="width: 100%;" v-if="sortData.length">
        <div class="SortTool" v-for="(e,ind) in sortData" :key="ind + 'k'">
                <el-button type="primary" @click="lookStu(ind)" class="btn" >{{ lang.ssViewStudent }}</el-button>
                <div class="tabCon">
                    <div class="con" style="width: 30%;">
                        <div>{{ lang.ssSentence }}</div>
                        <div v-for="(i,index) in e" :key="index" style="display: flex;align-items: center;">
                            <el-tooltip class="item" effect="dark" :content="i.value.join(' ')" placement="top-start">
                             <div class="TitTimu" :style="{color:JSON.stringify(i.value) == JSON.stringify(i.trA)? '#409EFF' :'' }">{{ i.value.join(' ') }}</div>
                            </el-tooltip>
                            
                            <img style="height: 15px;width: 15px;margin-left: 10px;" v-if="JSON.stringify(i.value) == JSON.stringify(i.trA)" src="../../assets/right.png" alt="">
                        </div>
                        <div>
                            {{ lang.ssCorrectRate }}
                        </div>
                    </div>
                    <div class="con" style="width: 10%;">
                        <div>{{ lang.ssSubtotal }}</div>
                        <div v-for="(i,index) in e" :key="index">
                            {{ i.count }}
                        </div>
                        <template v-if="e.find(k => k.isD)">
                            <span v-for="(i,index) in e" :key="index+'p'">
                                <span v-if="JSON.stringify(i.value) == JSON.stringify(i.trA)">{{ i.pro }}%</span>
                            </span>
                        </template>
                        <span v-else>
                            0%
                        </span>
                        
                    </div>
                    <div class="con" style="width: 60%;">
                        <div>{{ lang.ssProportion }}</div>
                        <div v-for="(i,index) in e" :key="index">
                            <el-progress :percentage="i.pro"></el-progress>
                        </div>
                    </div>
                </div>
            </div>

            <el-dialog
                :title="lang.ssView"
                :visible.sync="dialogVisible"
                :append-to-body="true"
                width="900px"
                :before-close="handleClose"
                class="dialog_diy"
                >
                <div>
                    <div v-for="(item, index) in PData" :key="index" class="borderB">
                        <div style="font-size: 18px;color: #000;margin-bottom: 10px;">
                            {{ item.sName }}:
                        </div>
                        <div style="display: flex;align-items: center;">
                          {{ lang.ssAnswerLabel }}<span :style="{color:JSON.parse(item.works)[itemIndex].chooseSenList.join('') == JSON.parse(item.works)[itemIndex].rightAnswer.join('')? '#409EFF' :'' }">
                                    {{ JSON.parse(item.works)[itemIndex].chooseSenList.join(' ') }}
                                </span>
                            <img style="height: 15px;width: 15px;margin-left: 10px;" 
                            v-if="JSON.parse(item.works)[itemIndex].chooseSenList.join('') == JSON.parse(item.works)[itemIndex].rightAnswer.join('')" 
                            src="../../assets/right.png" alt="">

                        </div>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">
                        {{ lang.ssCloseBtn }}
                    </el-button>
                </span>
            </el-dialog>


    </div>
   
</template>

<script>
import { myMixin } from "@/mixins/mixin.js"

    export default {
        mixins: [myMixin],
        props: ["people"],
        data(){
            return {
                PData:[], //所有作业
                sortData:[], //作业分类
                dialogVisible:false,
                itemIndex:0
            }
        },
        watch:{
            people: {
                handler(newVal) {
                    if (JSON.stringify(newVal) != JSON.stringify(this.PData)) {
                        this.PData = JSON.parse(JSON.stringify(newVal))
                        this.workData()
                    }
                },
                deep: true  // 深度监听对象内部变化
            }
        },
        methods:{
            handleClose(done) {
                done();
            },
            workData(){
                let allWork = [] ///整理数据
                let groups = [] ///结果数据
                if (this.PData.length == 0) return
                // console.log('his.PData',this.PData);
                
                JSON.parse(this.PData[0].works).forEach(e=>{
                    allWork.push([])
                    groups.push([])
                })

                this.PData.forEach(e => {
                    JSON.parse(e.works).forEach((k,kin)=>{
                        allWork[kin].push(k.chooseSenList)
                    })
                });

                // console.log('llllllll',JSON.parse(JSON.stringify(allWork)));
                
                for (let index = 0; index < allWork.length; index++) {
                    groups[index] = this.countDuplicates(allWork[index])
                }


                // console.log('groups',JSON.parse(JSON.stringify(groups)));
                

                // let groups = this.countDuplicates(allWork)
                for (let index = 0; index < groups.length; index++) {
                    for (let kin = 0; kin < groups[index].length; kin++) {
                        console.log('groups[index][kin]',groups[index][kin]);
                        groups[index][kin].pro = 0

                        groups[index][kin].isD = JSON.stringify(groups[index][kin].value) == JSON.stringify(JSON.parse(this.PData[0].works)[index].rightAnswer)
                        groups[index][kin].trA = JSON.parse(this.PData[0].works)[index].rightAnswer
                        groups[index][kin].pro = ((groups[index][kin].count / this.PData.length) * 100).toFixed()
                    }
                }

                
                this.sortData = groups
                // console.log('sortData',sortData);

                // console.log('groups',groups);
                
            },
            countDuplicates(arr) {
                const map = new Map();
    
                arr.forEach(subArr => {
                    const key = JSON.stringify(subArr);
                    map.set(key, (map.get(key) || 0) + 1);
                });
                
                return Array.from(map).map(([key, count]) => ({
                    value: JSON.parse(key),
                    count
                }));
            },
            lookStu(val){
                this.itemIndex = val
                this.dialogVisible = true
            }
        },
        mounted(){
            this.PData = JSON.parse(JSON.stringify(this.people))
            this.workData()
        }
    }
</script>

<style scoped>
.SortTool{
    width: 90%;
    margin: 0 0 10px 25px;
    padding: 18px 20px;
    box-sizing: border-box;
    position: relative;
}
.tabCon{
    width: 80%;
    display: flex;
}
.con div{
    height: 25px;
    line-height: 25px;
    margin-bottom: 8px;
}
.btn{
    position: absolute;top: 0;right: 0;
}
.dialog_diy >>> .el-dialog__header,
.dialog_diy1 >>> .el-dialog__header {
  background: #454545 !important;
  padding: 15px 20px;
}

.dialog_diy >>> .el-dialog__title,
.dialog_diy1 >>> .el-dialog__title {
  color: #fff;
}

.dialog_diy >>> .el-dialog__headerbtn,
.dialog_diy1 >>> .el-dialog__headerbtn {
  top: 19px;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close,
.dialog_diy1 >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover,
.dialog_diy1 >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.dialog_diy1 >>> .el-dialog__body {
  padding: 0;
}

.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer,
.dialog_diy1 >>> .el-dialog__footer {
  background: #fafafa;
}
.borderB{
    margin-bottom: 20px;
}
.right::after {
  content: "";
  /* position: absolute; */
  background-image: url(../../assets/right.png);
  min-width: 15px;
  min-height: 15px;
  background-size: 100% 100%;
  margin: 0 10px;
}
.TitTimu{
    max-width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 0 !important;
}
</style>