<template>
    <div class="group-data-container">
        <Loading v-show="isLoading"></Loading>
        <vuescroll>
            <div class="group-data-box">
                <div class="group-item" v-for="(item,index) in groupData" :key="index">
                    <div class="group-info-wrap">
                        <div class="group-img">
                            <img :src="item.img" width="80">
                        </div>
                        <div>
                            <h6 class="group-name">{{item.groupName}}</h6>
                            <p class="group-info">人数：{{item.teachers.length}}</p>
                            <p class="group-info">成员：
                                <span class="view-member" @click="viewMember(index)">查看成员</span>
                            </p>
                        </div>
                    </div>
                    <div class="group-data-wrap">
                        <div class="data-item">
                            <p class="data-num">{{item.onlineCount}}</p>
                            <p class="data-label">线上研修</p>
                        </div>
                        <div class="data-item">
                            <p class="data-num">{{item.areaCount}}</p>
                            <p class="data-label">区级研修</p>
                        </div>
                        <div class="data-item">
                            <p class="data-num">{{item.schoolCount}}</p>
                            <p class="data-label">校级研修</p>
                        </div>
                        <div class="data-item">
                            <p class="data-num">{{item.examCount}}</p>
                            <p class="data-label">评测反馈</p>
                        </div>
                        <div class="data-item">
                            <p class="data-num">{{item.surveyCount}}</p>
                            <p class="data-label">问卷活动</p>
                        </div>
                        <div class="data-item">
                            <p class="data-num">{{item.voteCount}}</p>
                            <p class="data-label">投票活动</p>
                        </div>
                    </div>
                </div>
            </div>
        </vuescroll>
        <Modal v-model="viewStatus" title="教研组成员">
            <div v-if="groupData[viewIndex]">
                <h6 class="group-name">{{groupData[viewIndex].groupName}}</h6>
                <div v-for="(item,index) in groupData[viewIndex].teachers" :key="index" class="teacher-item">
                    <PersonalPhoto :name="item.name" :picture="item.picture" style="display: inline-block;" />
                    <span class="teacher-name">{{item.name}}</span>
                </div>
            </div>
        </Modal>
    </div>
</template>
<script>
import PersonalPhoto from '@/components/public/personalPhoto/Index.vue'
import { mapGetters } from 'vuex'
export default {
    props:[
        'schoolId'
    ],
    components: {
        PersonalPhoto
    },
    data() {
        return {
            isLoading:false,
            viewStatus: false,
            viewIndex: 0,
            groupData: [],
            imgs: [
                {
                    url: 'https://teammodelstorage.blob.core.chinacloudapi.cn/0-public/image/subject1.png',
                    keyword: '语文'
                },
                {
                    url: 'https://teammodelstorage.blob.core.chinacloudapi.cn/0-public/image/subject2.png',
                    keyword: '数学'
                },
                {
                    url: 'https://teammodelstorage.blob.core.chinacloudapi.cn/0-public/image/subject3.png',
                    keyword: '英语'
                },
                {
                    url: 'https://teammodelstorage.blob.core.chinacloudapi.cn/0-public/image/subject4.png',
                    keyword: '物理'
                },
                {
                    url: 'https://teammodelstorage.blob.core.chinacloudapi.cn/0-public/image/subject5.png',
                    keyword: '化学'
                },
                {
                    url: 'https://teammodelstorage.blob.core.chinacloudapi.cn/0-public/image/subject6.png',
                    keyword: '生物'
                },
                {
                    url: 'https://teammodelstorage.blob.core.chinacloudapi.cn/0-public/image/subject7.png',
                    keyword: '历史'
                },
                {
                    url: 'https://teammodelstorage.blob.core.chinacloudapi.cn/0-public/image/subject8.png',
                    keyword: '政治'
                },
                {
                    url: 'https://teammodelstorage.blob.core.chinacloudapi.cn/0-public/image/subject9.png',
                    keyword: '地理'
                },
                {
                    url: 'https://teammodelstorage.blob.core.chinacloudapi.cn/0-public/image/subject10.png',
                    keyword: '体育'
                },
                {
                    url: 'https://teammodelstorage.blob.core.chinacloudapi.cn/0-public/image/subject11.png',
                    keyword: '音乐'
                },
                {
                    url: 'https://teammodelstorage.blob.core.chinacloudapi.cn/0-public/image/subject12.png',
                    keyword: '综合,其他'
                },
            ]
        }
    },
    computed: {
        ...mapGetters({
            teachers: 'user/getSchoolUserJoined', // 取得已加入此學校的使用者
        })
    },
    methods: {
        viewMember(index) {
            this.viewIndex = index
            this.viewStatus = true
        },
        //转分组模式数据结构
        handelGroup() {
            this.teachers.forEach(item => {
                item.groupName = item.groupName || '默认组别'
            })
            let groupRes = this.$jsFn.groupBy(this.teachers, 'groupName')
            this.groupData.length = 0
            for (let index in groupRes) {
                let img = this.getGroupImg(groupRes[index][0].groupName || '默认组别')
                this.groupData.push({
                    groupName: groupRes[index][0].groupName || '默认组别',
                    groupId: groupRes[index][0].groupId,
                    img: img,
                    teachers: groupRes[index],
                    onlineCount: 0,
                    areaCount: 0,
                    schoolCount: 0,
                    surveyCount: 0,
                    voteCount: 0,
                    examCount: 0
                })
            }
            // this.groupData.sort((a, b) => {
            //     return parseInt(a.groupId) - parseInt(b.groupId)
            // })
        },
        getGroupImg(name) {
            let has = false
            let url
            for (let item of this.imgs) {
                if (name.includes(item.keyword)) {
                    has = true
                    url = item.url
                    console.log(name, url)
                    break
                }
            }
            if (has) {
                return url
            } else {
                console.log(name, this.imgs[11].url)
                return this.imgs[11].url
            }
        },
        findTotalData() {
            this.isLoading = true
            let params = {
                school: this.schoolId || this.$store.state.userInfo.schoolCode
            }
            this.$api.ability.FindTotalData(params).then(
                res => {
                    if (!res.error) {
                        this.groupData.forEach(gItem => {
                            let d = res.groupDatas.find(dItem => {
                                return dItem.groupName == gItem.groupName
                            })
                            if (d) {
                                gItem.onlineCount = d.thcSubCount
                                gItem.areaCount = d.offlineAreaGroupCount
                                gItem.schoolCount = d.offlineSchoolGroupCount
                                gItem.surveyCount = d.surveyGroupeCount
                                gItem.voteCount = d.voteGroupeCount
                                gItem.examCount = d.examGroupeCount
                            }
                        })
                    }
                },
                err => {

                }
            ).finally(() => {
                this.isLoading = false
            })
        }
    },
    created() {
        //由DB取得該校所有使用者並放入state.schoolUserList
        this.$store.dispatch('user/getSchoolTeacher').then(
            res => {
                this.handelGroup()
                this.findTotalData()
            },
            err => {
                this.$Message.error('user/setSchoolTeacher API error!')
            }
        )
    }
}
</script>
<style lang="less" scoped>
.view-member {
    color: #1cc0f3;
    text-decoration: underline;
    cursor: pointer;
}
.teacher-name {
    font-size: 16px;
    margin-left: 10px;
}
.group-data-container {
    box-shadow: 0px 2px 5px #e9e9e9 inset;
    width: 100%;
    height: ~"calc(100% - 50px)";
    padding: 10px 20px;
    background: white;
    user-select: none;
}
.group-data-box {
    display: flex;
    flex-wrap: wrap;
}
.teacher-item {
    margin-top: 8px;
    display: flex;
    align-items: center;
}
.group-info-wrap {
    margin-bottom: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    position: relative;
    &::after {
        content: "";
        width: 86%;
        height: 1px;
        background: rgba(0, 0, 0, 0.08);
        position: absolute;
        bottom: 0px;
        left: 7%;
    }
    .group-img {
        width: 80px;
        height: 100px;
        margin-right: 25px;
        margin-left: 10px;
    }

    .group-info {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 220px;
        line-height: 22px;
        font-size: 14px;
        margin-top: 5px;
        color: #818289;
    }
}
.group-name {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 220px;
    line-height: 32px;
    font-size: 22px;
    font-weight: bold;
    color: #1e1f24;
}
.group-item {
    width: 355px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    margin-right: 50px;
    margin-bottom: 30px;
    transition: all 0.2s ease 0s;
    &:hover {
        box-shadow: 0 26px 40px -24px rgb(0, 0, 0);
        transform: translateY(-6px);
    }
}
.group-data-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .data-item {
        width: 33%;
        text-align: center;
        margin: 10px 0px;
    }
    .data-num {
        line-height: 25px;
        font-size: 18px;
        font-weight: bold;
        color: #1e1f24;
    }
    .data-label {
        line-height: 22px;
        color: #818289;
        font-weight: bold;
        font-size: 12px;
    }
}
</style>