<template>
    <div class="pb_content" style="height: auto; width: calc(100% - 40px); margin: 0 auto;background: unset;">
        <div style="width:100%;padding:0;box-sizing: border-box;">
            <div class="pb_head top">
                <div style="display: flex;align-items: center;">
                    <span class="subClick" @click="
                        goTo(
                            '/test?userid=' +
                            userid +
                            '&oid=' +
                            oid +
                            '&org=' +
                            org +
                            '&role=' +
                            role
                        )
                        ">表单管理</span>
                    <!-- v-show="oid == '4c686762-1d0a-11ed-8c78-005056b86db5'" -->
                    <span class="subClick" @click="
                        goTo(
                            '/trainCourse?userid=' +
                            userid +
                            '&oid=' +
                            oid +
                            '&org=' +
                            org +
                            '&role=' +
                            role
                        )
                        ">培训管理</span>
                    <span class="sub_head">数据看板</span>
                    <span class="subClick"  @click="
                        goTo(
                            '/testSmarter?userid=' +
                            userid +
                            '&oid=' +
                            oid +
                            '&org=' +
                            org +
                            '&role=' +
                            role +
                            '&cid=' +
                            cid
                        )
                        ">智能助手</span>
                </div>
            </div>
        </div>
        <div class="bbox_serch">
            <Cascader :options="typeInfo" v-if="typeInfo.length" @setTeacher="setTeacher"></Cascader>
        </div>
        <div class="bbox" v-loading="tabLoading">
            <div class="bbox_nav">
                <div class="teaLis">
                    <div class="teal" @click="cutPage(2)" :class="[pType == 2 ? 'Tbor' : '']" v-if="bArray.length">
                        专任教师
                    </div>
                    <div class="teal" @click="cutPage(1)" :class="[pType == 1 ? 'Tbor' : '']" v-if="aArray.length">
                        班主任
                    </div>
                </div>
                <el-select v-model="checkSet" @change="setArray" style="margin-left: auto">
                    <el-option label="综合排序" value=""> </el-option>
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>

            </div>
            <div class="randarZong">
                <radarZong :evCourseArray="zongJson" :evCourseArray2="zongJson2" v-if="checkSet"></radarZong>
                <radarZong :evCourseArray="zongJson2" :evCourseArray2="{}" v-else></radarZong>
            </div>
            <div class="randarBox">
                <div class="title">教师详情</div>
                <div class="randarTeacher" v-for="(item, index) in tableData" :key="index">
                    <div class="randarTitle">
                        <span>{{ item.username }}</span>
                        <span>{{ item.score }}</span>
                    </div>
                    <div class="randar">
                        <radarTeacher :evCourseArray="zongJson2" :evCourseArray2="item.json"></radarTeacher>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
var OpenCC = require("opencc-js");
let converter = OpenCC.Converter({
    from: 'hk',
    to: 'cn'
})

import radarZong from "./dataCom/radarZong.vue";
import radarTeacher from "./dataCom/radarTeacher.vue";

import Cascader from "./dataCom/cascader.vue";


export default {
    name: 'testDataBoard',
    components: { radarZong, radarTeacher, Cascader },
    data() {
        return {
            userid: this.$route.query.userid, //用户id
            oid: this.$route.query.oid, //学校id
            org: this.$route.query.org, //组织id
            pType: 2,
            teacherName: '',
            tabLoading: false,
            tableData: [],
            zongJson: {},
            zongJson2: {},
            checkSet: "",
            options: [],
            data: [],
            typeInfo: [],
            teacherArray: [],
            aArray:[],
            bArray:[],
        };
    },
    computed: {
        getScore() {
            return (item) => {
                let score = 0;
                for (var i = 0; i < item.length; i++) {
                    score += item[i].cogScore
                }
                score = (score / item.length).toFixed(0);
                return score;
            }
        }
    },
    methods: {
        getPageBase2(type) {
            let params = {
                typ: type,
                org: this.org,
                oid: this.oid
            };
            this.ajax
                .get(this.$store.state.api + "selectTestExamineBase", params)
                .then(res => {
                console.log('1111111111111111111111', res.data);
                
                if(type == 1){
                    this.aArray = res.data[0];
                }else {
                    this.bArray = res.data[0];
                    if(!this.bArray.length){
                        this.cutPage(2)
                    }
                }
                })
                .catch(error => {
                console.log(error);
            });
        },
        goTo(path) {
            this.$router.push(path);
        },
        cutPage(type) {
            this.checkSet = ""
            this.pType = type
            this.getData()
        },
        scoreChildren(children) {
            let score = 0;
            children.forEach(item => {
                if (item.sco2 && parseFloat(item.sco2) > 0) {
                    score += parseFloat(item.sco2);
                }
            });
            return score;
        },
        getData() {
            this.tabLoading = true;
            let params = [{
                oid: this.oid,
                org: this.org,
                type: this.pType,
                tname: this.teacherName
            }];
            // console.log(params);
            this.ajax
                .post(this.$store.state.api + "selectTestExaminePersonData2", params)
                .then(res => {
                    let data = res.data[0];

                    data.forEach(e => {
                        e.json = JSON.parse(e.json);
                    });

                    data.forEach(e => {
                        e.evaSca = 0;
                        e.cogSco = 0;
                        e.step = 0;
                        e.allStep = 0;

                        e.json.forEach(i => {
                            i.evaScore = 0 // 自评
                            i.cogScore = 0 //考核
                            i.score = 0 //考核
                            i.children.forEach(k => {
                                e.evaSca = e.evaSca + k.sco1 * 1;
                                e.cogSco = e.cogSco + k.sco2 * 1;
                                i.evaScore = i.evaScore + k.sco1 * 1;
                                i.cogScore = i.cogScore + k.sco2 * 1;
                                i.score = i.score + k.score * 1;
                                e.allStep++;
                                if (!!k.sco2 * 1) {
                                    e.step++;
                                }
                            });
                        });
                    });

                    data.forEach(e => {
                        if (e.step == e.allStep) {
                            e.state = "已完成";
                        } else {
                            e.state = "未完成";
                        }
                        if (!e.tea) {
                            e.tea = "";
                        }
                        e.evaSca = e.evaSca.toFixed(0);
                        e.cogSco = e.cogSco.toFixed(0);
                    });
                    let _data = []
                    let zongJson = {}
                    // zongJson.count = data.length
                    data.forEach((e, index) => {
                        _data[index] = {}
                        _data[index].username = e.username
                        _data[index].evaSca = e.evaSca
                        _data[index].cogSco = e.cogSco
                        _data[index].json = []

                        e.json.forEach((i, iindex) => {
                            if (converter(i.name) == converter("科组评价") || converter(i.name) == converter("行政巡查")) {
                                return;
                            }
                            _data[index].json[iindex] = {}
                            _data[index].json[iindex].name = i.name
                            let _evaScore = parseInt((i.evaScore * (100 / i.score)).toFixed(0))
                            let _cogScore = parseInt((i.cogScore * (100 / i.score)).toFixed(0))
                            _data[index].json[iindex].evaScore = _evaScore  // 自评
                            _data[index].json[iindex].cogScore = _cogScore // 考核
                            zongJson[i.name] ? "" : zongJson[i.name] = {}
                            zongJson[i.name].evaScore ? zongJson[i.name].evaScore += _evaScore : zongJson[i.name].evaScore = _evaScore
                            zongJson[i.name].cogScore ? zongJson[i.name].cogScore += _cogScore : zongJson[i.name].cogScore = _cogScore
                        });
                    });
                    let zongArray = Object.keys(zongJson)
                    for (var i = 0; i < zongArray.length; i++) {
                        zongJson[zongArray[i]].evaScore = (zongJson[zongArray[i]].evaScore / data.length).toFixed(0)
                        zongJson[zongArray[i]].cogScore = (zongJson[zongArray[i]].cogScore / data.length).toFixed(0)
                    }

                    this.tableData = _data
                        .filter((e) => {
                            e.score = this.getScore(e.json);
                            return e;
                        })
                        .sort((a, b) => b.score - a.score);
                    console.log(this.tableData);
                    this.zongJson = zongJson
                    this.zongJson2 = zongJson
                    console.log(zongJson);
                    this.options = Object.keys(zongJson).map(item => {
                        return { label: item, value: item }
                    })
                    this.data = data
                    console.log(data);

                    this.tabLoading = false;
                })
                .catch(error => {
                    this.tabLoading = false;
                    console.log(error);
                });
        },
        setTeacher(array){
            this.teacherArray = array
            this.setArray()
        },
        setArray() {
            let checkSet = this.checkSet
            let _data = []
            let zongJson = {}
            let data = JSON.parse(JSON.stringify(this.data))
            if(this.teacherArray.length){
                data = data.filter((e) => {
                    return this.teacherArray.includes(e.userid)
                })
            }
            data.forEach((e, index) => {
                _data[index] = {}
                _data[index].username = e.username
                if (checkSet == "") {
                    _data[index].evaSca = e.evaSca
                    _data[index].cogSco = e.cogSco
                    _data[index].json = []
                }


                e.json.forEach((i, iindex) => {
                    if (converter(i.name) == converter("科组评价") || converter(i.name) == converter("行政巡查")) {
                        return;
                    }
                    if (checkSet == i.name) {
                        _data[index].evaSca = i.evaScore
                        _data[index].cogSco = i.cogScore
                        _data[index].json = []
                        i.children.forEach((ic, icindex) => {
                            _data[index].json[icindex] = {}
                            _data[index].json[icindex].name = ic.name
                            let _evaScore = parseInt((ic.sco1 * 1 * (100 / ic.score)).toFixed(0))
                            let _cogScore = parseInt((ic.sco2 * 1 * (100 / ic.score)).toFixed(0))
                            _data[index].json[icindex].evaScore = _evaScore  // 自评
                            _data[index].json[icindex].cogScore = _cogScore // 考核
                            zongJson[ic.name] ? "" : zongJson[ic.name] = {}
                            zongJson[ic.name].evaScore ? zongJson[ic.name].evaScore += _evaScore : zongJson[ic.name].evaScore = _evaScore
                            zongJson[ic.name].cogScore ? zongJson[ic.name].cogScore += _cogScore : zongJson[ic.name].cogScore = _cogScore
                        })
                    } else if (checkSet == "") {
                        _data[index].json[iindex] = {}
                        _data[index].json[iindex].name = i.name
                        let _evaScore = parseInt((i.evaScore * (100 / i.score)).toFixed(0))
                        let _cogScore = parseInt((i.cogScore * (100 / i.score)).toFixed(0))
                        _data[index].json[iindex].evaScore = _evaScore  // 自评
                        _data[index].json[iindex].cogScore = _cogScore // 考核
                        zongJson[i.name] ? "" : zongJson[i.name] = {}
                        zongJson[i.name].evaScore ? zongJson[i.name].evaScore += _evaScore : zongJson[i.name].evaScore = _evaScore
                        zongJson[i.name].cogScore ? zongJson[i.name].cogScore += _cogScore : zongJson[i.name].cogScore = _cogScore
                    }

                });
            });
            let zongArray = Object.keys(zongJson)
            for (var i = 0; i < zongArray.length; i++) {
                zongJson[zongArray[i]].evaScore = (zongJson[zongArray[i]].evaScore / data.length).toFixed(0)
                zongJson[zongArray[i]].cogScore = (zongJson[zongArray[i]].cogScore / data.length).toFixed(0)
            }
            this.tableData = _data.filter((e) => {
                e.score = this.getScore(e.json);
                return e;
            })
            .sort((a, b) => b.score - a.score);
            console.log(this.tableData);
            this.zongJson2 = zongJson
            console.log(zongJson);
        },
        //获取分类类名
        getTypeInfo() {
            this.tabLoading = true;
            let params = {
                oid: this.oid
            };
            this.ajax
                .get(this.$store.state.api + "selectPerInfoAllTea", params)
                .then((res) => {
                    this.typeInfo = res.data[0];
                    let typeInfo = res.data[1];
                    this.typeInfo.forEach((e) => {
                        e.child = [];
                        e.value = '';
                        typeInfo.forEach((i) => {
                            if (e.id == i.parentid) {
                                e.child.push({ id: i.id, name: i.name })
                            }
                        })
                    })
                    this.getData()
                })
                .catch((err) => {
                    this.tabLoading = false;
                    console.error(err);
                });
        },
    },
    mounted() {
        this.getPageBase2(1)
        this.getPageBase2(2)
        this.getTypeInfo()
    },
};
</script>

<style scoped>
.bbox_serch{
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.top {
    display: flex;
    justify-content: space-between;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0px auto;
    padding: 10px 0;
    height: 54px;
}


.subClick {
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
    /* color: #ab582f; */
    color: #409eff;
}

.sub_head {
    position: relative;
    font-size: 20px;
    font-weight: bold;
    padding: 0 15px;
}

.sub_head::after {
    content: "";
    width: 100%;
    background: #3681FC;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: -8px;
}

.subClick {
    /* font-size: 16px; */
    font-size: 20px;
    cursor: pointer;
    /* margin-left: 17.5px; */
    /* color: #ab582f; */
    /* color: #409eff; */
    color: #999;
    padding: 0 15px;
}

.subClick:hover {
    color: #000;
}

.sub_head+.subClick,
.subClick+.subClick,
.subClick+.sub_head {
    margin-left: 17.5px;
}

.bbox {
    background: #fff;
    border-radius: 0 5px 5px 5px;
    padding: 15px 0;
    box-sizing: border-box;
    min-height: 900px;
}

.bbox_nav {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    align-items: center;
}

.teaLis {
    display: flex;
}

.teal {
    padding: 10px 20px;
    cursor: pointer;
}

.Tbor {
    border-bottom: 2px rgba(54, 129, 252, 1) solid;
    font-weight: 600;
}


.randarZong {
    max-width: 100%;
    width: 500px;
    height: 500px;
    margin: 0 auto;
}

.randarBox {
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
}

.randarBox .title {
    width: 100%;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

.randarTeacher {
    width: calc(100% / 4 - 20px);
    margin-right: 20px;
    margin-bottom: 20px;
}


.randarTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.randarTitle>span:nth-child(1) {}

.randarTitle>span:nth-child(2) {}

.randar {
    width: calc(100%);
    height: 350px;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
}

@media screen and (max-width: 1280px) {
    .randarTeacher {
        width: calc(100% / 2 - 20px);
    }
}

@media screen and (max-width: 800px) {
    .randarTeacher {
        width: calc(100%);
        margin-right: 0;
    }
}
</style>