<template>
    <div class="school-detail-container">
        <Loading v-show="isLoading"></Loading>
        <vuescroll>
            <!-- 学校基础信息 -->
            <div class="school-base-info" v-if="schoolInfo">
                <img :src="schoolInfo.picture" class="school-img">
                <div class="school-info-wrap">
                    <h3 class="school-name">{{schoolInfo.name}}</h3>
                    <p class="school-info-item">
                        <span class="info-label">教师人数：</span>
                        <span class="info-value">{{schoolInfo.count}}人</span>
                    </p>
                    <!-- <p class="school-info-item">
                        <span class="info-label">信息化负责人：</span>
                        <span class="info-value">罗老师</span>
                    </p> -->
                </div>
                <span class="return-list" @click="returnList">
                    <Icon type="md-arrow-back" size="16" />
                    返回列表
                </span>
            </div>
            <!-- 学时数据统计 -->
            <div class="online-train-wrap">
                <h4 class="block-title">学时统计</h4>
                <div class="hour-data-wrap">
                    <div class="hour-data-item" v-for="(item,index) in hourData" :key="index">
                        <p class="hour-data-title">
                            {{item.name}}
                            <span class="hour-value">({{item.total}}学时)</span>
                        </p>
                        <div class="hour-chart">
                            <HourProg :count="[item.complete,item.going,item.uncomplete]"></HourProg>
                            <p class="legend-item">
                                <span>
                                    未开始：{{item.uncomplete}}人
                                </span>
                            </p>
                            <p class="legend-item">
                                <span>
                                    进行中：{{item.going}}人
                                </span>
                            </p>
                            <p class="legend-item">
                                <span>
                                    已完成：{{item.complete}}人
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 网络研修数据统计 -->
            <div class="online-train-wrap">
                <h4 class="block-title">网络研修统计</h4>
                <div class="online-data-wrap">
                    <div class="percent-wrap">
                        <Percent :count="dimension"></Percent>
                    </div>
                    <div class="point-wrap">
                        <AbilityPoint :count="abilityPoint"></AbilityPoint>
                    </div>
                </div>
            </div>
            <!-- 校本研修数据统计 -->
            <div class="online-train-wrap">
                <h4 class="block-title">校本研修统计</h4>
                <div class="offline-data-wrap">
                    <div class="offline-data-item" v-for="(item,index) in trainType" :key="index">
                        <img class="offline-img" :src="trainImgs[index]">
                        <div style="margin-left:20px;height:fit-content;">
                            <p class="offline-label" :title="item.label">{{item.label}}</p>
                            <p class="offline-value"><b>{{item.count || 0}}</b></p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 教研组数据统计 -->
            <!-- <div class="online-train-wrap">
                <h4 class="block-title">教研组</h4>
            </div> -->
        </vuescroll>
    </div>
</template>
<script>
import Percent from '@/view/statistics/Percent.vue'
import AbilityPoint from '@/view/statistics/AbilityPoint.vue'
import HourProg from './HourProg.vue'
export default {
    components: {
        Percent, AbilityPoint, HourProg
    },
    data() {
        return {
            schoolInfo: undefined,
            isLoading: false,
            dimension: [],
            abilityPoint: [],
            offlineData: [
                {
                    label: '教研组',
                    value: 0
                }
            ],
            trainType: [],
            trainImgs:[
                'https://teammodelstorage.blob.core.chinacloudapi.cn/0-public/image/%E4%BF%A1%E6%81%AF%E5%8C%96%E6%95%99%E5%AD%A6%E6%A1%88%E4%BE%8B.png',
                'https://teammodelstorage.blob.core.chinacloudapi.cn/0-public/image/%E4%B8%93%E5%AE%B6%E4%B8%93%E9%A2%98%E5%9F%B9%E8%AE%AD.png',
                'https://teammodelstorage.blob.core.chinacloudapi.cn/0-public/image/%E5%90%8C%E8%AF%BE%E5%BC%82%E6%9E%84.png',
                'https://teammodelstorage.blob.core.chinacloudapi.cn/0-public/image/%E5%90%8C%E8%AF%BE%E5%90%8C%E6%9E%84.png',
                'https://teammodelstorage.blob.core.chinacloudapi.cn/0-public/image/%E6%A0%A1%E6%9C%AC2.0%E5%9F%B9%E8%AE%AD.png'
            ],
            hourData: [
                {
                    name: '线上研修',
                    total: 20,
                    complete: 0,
                    going: 0,
                    uncomplete: 0
                },
                {
                    name: '校本研修',
                    total: 10,
                    complete: 0,
                    going: 0,
                    uncomplete: 0
                },
                {
                    name: '应用考核',
                    total: 15,
                    complete: 0,
                    going: 0,
                    uncomplete: 0
                },
                {
                    name: '课堂实录',
                    total: 5,
                    complete: 0,
                    going: 0,
                    uncomplete: 0
                }
            ]
        }
    },
    methods: {
        returnList() {
            this.$router.push({
                name: 'areaMgmt'
            })
        },
        findTotalData() {
            this.isLoading = true
            let params = {
                school: this.schoolInfo.id
            }
            this.$api.ability.FindTotalData(params).then(
                res => {
                    if (!res.error) {
                        let deData = this.$GLOBAL.DIMENSIONS()
                        // 能力点统计
                        res.abilityCount.forEach(item => {
                            item.percent = (item.count * 100 / res.subCount).toFixed(1) + '%'
                            let d = deData.find(i => {
                                return i.code == item.dimension
                            })
                            if (d) {
                                item.dimensionName = d.val
                            }
                        })
                        this.abilityPoint = res.abilityCount

                        // 能力维度统计
                        res.dimensionCount.forEach(item => {
                            let d = deData.find(i => {
                                return i.code == item.dimension
                            })
                            if (d) {
                                item.name = d.val
                            }
                        })
                        this.dimension = res.dimensionCount

                        //学时数据统计
                        res.groupMembers.forEach(item => {
                            // 线上研修
                            if (item.onlineTime == 0) {
                                this.hourData[0].uncomplete++
                            } else if (item.onlineTime >= 20) {
                                this.hourData[0].complete++
                            } else {
                                this.hourData[0].going++
                            }
                            // 校本研修
                            if (item.offlinelTime == 0) {
                                this.hourData[1].uncomplete++
                            } else if (item.onlineTime >= 10) {
                                this.hourData[1].complete++
                            } else {
                                this.hourData[1].going++
                            }
                            // 应用考核
                            if (item.schoolScoreTime == 0) {
                                this.hourData[2].uncomplete++
                            } else if (item.onlineTime >= 15) {
                                this.hourData[2].complete++
                            } else {
                                this.hourData[2].going++
                            }
                            // 课堂实录
                            if (item.classVideoTime == 0) {
                                this.hourData[3].uncomplete++
                            } else if (item.onlineTime >= 5) {
                                this.hourData[3].complete++
                            } else {
                                this.hourData[3].going++
                            }
                        })
                    }
                },
                err => {

                }
            ).finally(() => {
                this.isLoading = false
            })
        },
        findTrainList() {
            let params = {
                code: this.schoolInfo.id
            }
            this.$api.train.findTrainList(params).then(
                res => {
                    console.log(res)
                    this.trainType = this.$GLOBAL.TRAIN_TYPE()
                    res.studies.forEach(item => {
                        this.trainType[item.type - 1].count = this.trainType[item.type - 1].count || 0
                        this.trainType[item.type - 1].count++
                    })
                    this.trainType.splice(this.trainType.length - 1, 1)
                },
                err => {
                }
            )
        }

    },
    created() {

    },
    watch: {
        '$route': {
            handler(n, o) {
                this.schoolInfo = n.params
                if (this.schoolInfo && this.schoolInfo.id) {
                    this.findTotalData()
                    this.findTrainList()
                }
            },
            deep: true,
            immediate: true
        }
    }
}
</script>
<style lang="less" scoped>
.hour-chart {
    // height: 200px;
    text-align: center;
    .legend-item {
        font-size: 12px;
        margin-top: 5px;
        &::before {
            content: " ";
            display: inline-block;
            width: 15px;
            height: 8px;
            // background: red;
            border-radius: 2px;
            margin-right: 10px;
            margin-left: 15px;
        }
        &:nth-child(2)::before {
            background: #ed4014;
        }
        &:nth-child(3)::before {
            background: #ff9900;
        }
        &:nth-child(4)::before {
            background: #19be6b;
        }
    }
}
.hour-data-item {
    width: 23%;
}
.hour-data-wrap {
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
    font-size: 16px;
    .hour-value {
        font-weight: bold;
        color: #1e1f24;
        font-size: 16px;
    }
    .hour-data-title {
        text-align: center;
        background: #f9f9f9;
        padding: 10px 0px;
    }
}
.offline-data-wrap {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.offline-data-item {
    margin: 10px;
    display: flex;
    align-items: center;
    .offline-label {
        width: 120px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        color: #1e1f24;
        cursor: pointer;
    }
    .offline-value {
        margin-top: 5px;
        font-size: 30px;
        font-weight: bold;
        color: #1e1f24;
    }
}
.offline-img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
}
.school-detail-container {
    width: 100%;
    height: 100%;
    padding: 15px;
}
.school-base-info {
    border-radius: 5px;
    width: 100%;
    background: white;
    padding: 25px 15px;
    // box-shadow: 0px 4px 4px 1px #f0f0f0;
    display: flex;
    position: relative;
    align-items: center;
}
.return-list {
    position: absolute;
    right: 80px;
    top: 35px;
    color: #1cc0f3;
    font-weight: bold;
    cursor: pointer;
}
.school-img {
    margin-left: 30px;
    margin-right: 30px;
    width: 150px;
    &::after {
        content: " ";
        width: 1px;
        height: 100px;
        background: #a5a5a5;
    }
}
.school-info-wrap {
    margin-left: 30px;
    .school-name {
        font-size: 26px;
        margin-bottom: 22px;
        line-height: 33px;
    }
}
.school-info-item {
    margin-top: 10px;
    .info-label {
        color: #a0a0a0;
    }
    .info-value {
        color: #5cadff;
        font-weight: 600;
    }
}
.online-train-wrap {
    border-radius: 5px;
    width: 100%;
    background: white;
    padding: 30px 20px;
    box-shadow: 0px 4px 4px 1px #f0f0f0;
    margin-top: 10px;
}
.block-title {
    border-left: 6px solid #1cc0f3;
    padding-left: 15px;
    font-size: 18px;
    line-height: 16px;
    color: #414749;
    margin-bottom: 30px;
}
.online-data-wrap {
    display: flex;
}
.percent-wrap {
    width: fit-content;
    padding: 30px 0px;
    background: white;
    margin-left: 30px;
}
.point-wrap {
    width: fit-content;
    padding: 30px 0px;
    background: white;
    margin-left: 20px;
    flex: 1;
}
</style>