<template>
    <div style="height: 100%">
        <vuescroll>
            <div class="homePage">
                <div class="home-score">
                    <div class="score-total box-border">
                        <p>
                            <span class="total-font">{{ $t("jyzx.homePage.totalTime") }}：</span>
                            <b :class="['point-num', totalTime == 50 ? 'ok-time' : 'study-time']">{{ totalTime }}</b>
                            /50({{ $t("jyzx.homePage.time") }})
                            <Tooltip max-width="200">
                                <Icon type="ios-alert" size="15" />
                                <div slot="content">
                                    <div>
                                        {{ $t("jyzx.homePage.remarks1") }}
                                    </div>
                                    <div>
                                        {{ $t("jyzx.homePage.remarks2") }}
                                    </div>
                                </div>
                            </Tooltip>
                        </p>
                        <i-circle :percent="percent" :stroke-color="percent == 100 ? '#19BE6B' : ['#2D8CF0','#19BE6B']" :stroke-width="10" :size="130">
                            <span style="font-size: 17px">{{ percent }}%</span>
                        </i-circle>
                    </div>
                    <!-- <div class="box-border score-total">
                        <ul>
                            <li>
                                <p class="act-font">
                                    总学时：
                                    <b :class="['point-num', onlineTime == 20 ? 'ok-time' : 'study-time']">{{ onlineTime }}</b>
                                    /20
                                    <span class="timeNum">(学时)</span>
                                </p>
                                <i-circle
                                    :percent="onlinePer"
                                    :stroke-color="onlinePer == 100 ? '#19BE6B' : ['#2D8CF0','#19BE6B']"
                                    :stroke-width="10"
                                    :size="90"
                                >
                                    <span style="font-size: 17px">{{ onlinePer }}%</span>
                                </i-circle>
                            </li>
                            <li>
                                <p class="act-font">
                                    已学能力点：
                                    <b class='point-num'>{{ allAbilityCount }}</b>
                                    /30
                                </p>
                                <i-circle
                                    :percent="allAbilityCountPer"
                                    :stroke-color="allAbilityCountPer == 100 ? '#19BE6B' : ['#2D8CF0','#19BE6B']"
                                    :stroke-width="10"
                                    :size="90"
                                >
                                    <span style="font-size: 17px">{{ allAbilityCountPer }}%</span>
                                </i-circle>
                            </li>
                        </ul>
                    </div> -->
                    <div class="box-border">
                        <ul>
                            <li>
                                <p class="act-font">
                                    {{ $t("jyzx.homePage.online") }}：
                                    <b :class="['point-num', onlineTime == 20 ? 'ok-time' : 'study-time']">{{ onlineTime }}</b>
                                    /20
                                    <span class="timeNum">({{ $t("jyzx.homePage.time") }})</span>
                                </p>
                                <i-circle :percent="onlinePer" :stroke-color="onlinePer == 100 ? '#19BE6B' : ['#2D8CF0','#19BE6B']" :stroke-width="10" :size="90">
                                    <span style="font-size: 17px">{{ onlinePer }}%</span>
                                </i-circle>
                            </li>
                            <li>
                                <p class="act-font">
                                    {{ $t("jyzx.homePage.offline") }}：
                                    <b :class="['point-num', classTime == 10 ? 'ok-time' : 'study-time']">{{ classTime }}</b>
                                    /10
                                    <span class="timeNum">({{ $t("jyzx.homePage.time") }})</span>
                                </p>
                                <i-circle :percent="classPer" :stroke-color="classPer == 100 ? '#19BE6B' : ['#2D8CF0','#19BE6B']" :stroke-width="10" :size="90">
                                    <span style="font-size: 17px">{{ classPer }}%</span>
                                </i-circle>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p class="act-font">
                                    {{ $t("jyzx.homePage.application") }}：
                                    <b :class="['point-num', applicaTime == 15 ? 'ok-time' : 'study-time']">{{ applicaTime }}</b>
                                    /15
                                    <span class="timeNum">({{ $t("jyzx.homePage.time") }})</span>
                                </p>
                                <i-circle :percent="applicaPer" :stroke-color="applicaPer == 100 ? '#19BE6B' : ['#2D8CF0','#19BE6B']" :stroke-width="10" :size="90">
                                    <span style="font-size: 17px">{{ applicaPer }}%</span>
                                </i-circle>
                            </li>
                            <li>
                                <p class="act-font">
                                    {{ $t("jyzx.homePage.classRecord") }}：
                                    <b :class="['point-num', discussTime == 5 ? 'ok-time' : 'study-time']">{{ discussTime }}</b>
                                    /5
                                    <span class="timeNum">({{ $t("jyzx.homePage.time") }})</span>
                                </p>
                                <i-circle :percent="discussPer" :stroke-color="discussPer == 100 ? '#19BE6B' : ['#2D8CF0','#19BE6B']" :stroke-width="10" :size="90">
                                    <span style="font-size: 17px">{{ discussPer }}%</span>
                                </i-circle>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="home-activity">
                    <ul>
                        <li class="act-border ability-style">
                            <img src="@/assets/image/study_point.png" alt="">
                            <div>
                                <p class="act-font">{{ $t("jyzx.homePage.studyPoint") }}</p>
                                <p><b class="point-num">{{ allAbilityCount }}</b> / 30</p>
                            </div>
                        </li>
                        <li class="act-border ability-style">
                            <img src="@/assets/image/ok_point.png" alt="">
                            <div>
                                <p class="act-font">{{ $t("jyzx.homePage.okPoint") }}</p>
                                <p><b class="point-num">{{ allAbilityOkNum }}</b> / {{ allAbilityOkTotal }}</p>
                            </div>
                        </li>
                        <li class="act-border ability-style">
                            <img src="@/assets/image/jyzx_app.png" alt="">
                            <div>
                                <p class="act-font">{{ $t("jyzx.homePage.achievements") }}</p>
                                <p><b class="point-num">{{ appNum }}</b> / {{ appTotal }}</p>
                            </div>
                        </li>
                    </ul>
                    <ul>
                        <li class="act-border ability-style">
                            <img src="@/assets/image/area_study.png" alt="">
                            <div>
                                <p class="act-font">{{ $t("jyzx.homePage.area") }}</p>
                                <p><b class="point-num">{{ areaNum }}</b> / {{ areaTotal }}</p>
                            </div>
                        </li>
                        <li class="act-border ability-style">
                            <img src="@/assets/image/area_survey.png" alt="">
                            <div>
                                <p class="act-font">{{ $t("jyzx.homePage.areaQue") }}</p>
                                <p><b class="point-num">{{ areaSurveyNum }}</b> / {{ areaSurveyTotal }}</p>
                            </div>
                        </li>
                        <li class="act-border ability-style">
                            <img src="@/assets/image/area_vote.png" alt="">
                            <div>
                                <p class="act-font">{{ $t("jyzx.homePage.areaVote") }}</p>
                                <p><b class="point-num">{{ areaVoteNum }}</b> / {{ areaVoteTotal }}</p>
                            </div>
                        </li>
                        <!-- <li class="act-border">
                            <img src="@/assets/image/area_exam.png" alt="">
                            <div>
                                <p class="act-font">区级评测</p>
                                <p><b class="point-num">{{ voteNum }}</b> / {{ voteTotal }}</p>
                            </div>
                        </li> -->
                    </ul>
                    <ul>
                        <li class="act-border ability-style">
                            <img src="@/assets/image/school_study.png" alt="">
                            <div>
                                <p class="act-font">{{ $t("jyzx.homePage.school") }}</p>
                                <p><b class="point-num">{{ schoolNum }}</b> / {{ schoolTotal }}</p>
                            </div>
                        </li>
                        <li class="act-border ability-style">
                            <img src="@/assets/image/school_survey.png" alt="">
                            <div>
                                <p class="act-font">{{ $t("jyzx.homePage.schoolQue") }}</p>
                                <p><b class="point-num">{{ surveyNum }}</b> / {{ surveyTotal }}</p>
                            </div>
                        </li>
                        <li class="act-border ability-style">
                            <img src="@/assets/image/school_vote.png" alt="">
                            <div>
                                <p class="act-font">{{ $t("jyzx.homePage.schoolVote") }}</p>
                                <p><b class="point-num">{{ voteNum }}</b> / {{ voteTotal }}</p>
                            </div>
                        </li>
                        <!-- <li class="act-border">
                            <img src="@/assets/image/school_exam.png" alt="">
                            <div>
                                <p class="act-font">校本评测</p>
                                <p><b class="point-num">{{ voteNum }}</b> / {{ voteTotal }}</p>
                            </div>
                        </li> -->
                    </ul>
                </div>
            </div>
        </vuescroll>
    </div>
</template>

<script>
export default {
    name: "HomaYanxiu",
    data() {
        return {
            totalTime: 0, //总学时
            percent: 0, //总学时的百分比
            onlineTime: 0, //线上
            onlinePer: 0, //线上百分比
            classTime: 0, //校本
            classPer: 0, //校本百分比
            applicaTime: 0, //应用
            applicaPer: 0, //应用百分比
            discussTime: 0, //课堂
            discussPer: 0, //课堂百分比
            allAbilityCount: 0, //学习的能力点
            allAbilityCountPer: 0, //学习的能力点百分比
            allAbilityOkNum: 0, //检测能力点
            allAbilityOkTotal: 0, //选择总能力点
            areaNum: 0, //区级研修
            areaTotal: 0, //全部区级研修
            schoolNum: 0, //校本活动
            schoolTotal: 0, //全部校本活动
            appNum: 0, //应用成果
            appTotal: 0, //全部应用成果
            surveyNum: 0, //问卷
            surveyTotal: 0, //全部问卷
            areaSurveyNum: 0, //区级问卷
            areaSurveyTotal: 0, //问卷
            voteNum: 0, //投票
            voteTotal: 0, //全部投票
            areaVoteNum: 0, //投票
            areaVoteTotal: 0, //投票
            examNum: 0, //评测
            examTotal: 0, //全部评测
        }
    },
    mounted() {
        this.getStudyTime()
    },
    methods: {
        getStudyTime() {
            let req = {
                tmdid: this.$store.state.userInfo.TEAMModelId,
                school: this.$store.state.userInfo.schoolCode,
            }
            this.$api.jyzx.getStudyTime(req).then((res) => {
                if (res) {
                    let total = 0
                    this.allAbilityCount = res.allAbilityCount
                    this.onlineTime = res.onlineTime
                    this.classTime = res.offlinelTime
                    this.applicaTime = res.schoolScoreTime
                    this.discussTime = res.classVideoTime
                    // 线上研修
                    if (this.onlineTime >= 20) {
                        total += 20
                        this.onlinePer = 100
                    } else {
                        total += this.onlineTime
                        this.onlinePer = Math.floor((res.onlineTime / 20) * 100)
                    }
                    // 校本研修
                    if (this.classTime >= 10) {
                        total += 10
                        this.classPer = 100
                    } else {
                        total += this.classTime
                        this.classPer = Math.floor(
                            (res.offlinelTime / 10) * 100
                        )
                    }
                    // 应用考核
                    if (this.applicaTime >= 15) {
                        total += 15
                        this.applicaPer = 100
                    } else {
                        total += this.applicaTime
                        this.applicaPer = Math.floor(
                            (res.schoolScoreTime / 15) * 100
                        )
                    }
                    // 课堂实录
                    if (this.discussTime >= 5) {
                        total += 5
                        this.discussPer = 100
                    } else {
                        total += this.discussTime
                        this.discussPer = Math.floor(
                            (res.classVideoTime / 5) * 100
                        )
                    }
                    this.totalTime = total
                    this.percent = Math.floor((total / 50) * 100)
                    this.allAbilityCountPer = Math.floor(
                        (res.allAbilityCount / 30) * 100
                    )
                    // 检测
                    this.allAbilityOkNum = res.hasAbilityExercise
                    this.allAbilityOkTotal = res.subCount
                    // 区级
                    this.areaNum = res.offlineAreaDoneCount
                    this.areaTotal = res.offlineAreaJoinCount
                    // 校本
                    this.schoolNum = res.offlineSchoolDoneCount
                    this.schoolTotal = res.offlineSchoolJoinCount
                    // 成果
                    this.appNum = res.uploadDoneCount
                    this.appTotal = res.uploadTotalCount
                    // 问卷
                    this.surveyNum = res.surveyDoneCount
                    this.surveyTotal = res.surveyJoinCount
                    this.areaSurveyNum = res.surveyAreaDoneCount
                    this.areaSurveyTotal = res.surveyAreaJoinCount
                    // 投票
                    this.voteNum = res.voteDoneCount
                    this.voteTotal = res.voteJoinCount
                    this.areaVoteNum = res.voteAreaDoneCount
                    this.areaVoteTotal = res.voteAreaJoinCount
                    // 评测
                    this.examNum = res.examDoneCount
                    this.examTotal = res.examJoinCount
                }
            })
        },
    },
    watch:{
        '$store.state.userInfo.schoolCode':{
            handler(n,o){
                this.getStudyTime()
            }
        }
    }
}
</script>

<style lang="less" scoped>
.home {
    display: flex;

    .totalNum {
        width: 40%;
    }

    .total,
    .yxType {
        margin: 25px;
        box-shadow: 0 0 15px #888888;
        padding: 20px;
        border-radius: 10px;
        background: white;
    }

    .total {
        // width: 40%;
        margin-right: 0;
        display: flex;
        align-items: center;

        /* & > div:first-child {
            margin: 0 30px;
        } */

        & > p {
            margin-bottom: 25px;
        }
    }

    .yxType {
        width: 60%;
        display: flex;
        flex-direction: column;

        & > div {
            margin-bottom: 20px;

            & > p:first-of-type {
                float: right;
            }
        }

        .sucTime {
            color: #19be6b;
            font-size: 14px;
            border: 1px solid;
            margin: 0 10px;
            padding: 2px 3px;
            border-radius: 5px;
        }
    }
    .yxType p:nth-child(2),
    .total > div > p {
        font-size: 20px;
        font-weight: 600;
    }
}
.fontStyle {
    font-size: 30px;
}
.timeNum {
    font-size: 16px;
}

.homePage {
    .box-border {
        margin: 25px;
        box-shadow: 0 0 15px #c5c5c5;
        border-radius: 5px;
        background: white;
    }

    .act-border {
        box-shadow: 0 0 15px #c5c5c5;
        border-radius: 5px;
        background: white;
    }

    .home-score {
        display: flex;

        .score-total {
            width: 32%;
            margin-right: 0;
            display: flex;
            justify-content: center;
            align-items: center;

            ul {
                width: 100%;
                li {
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    // min-width: 200px;
                    position: relative;
                    justify-content: center;
                    height: 150px;

                    &:first-child {
                        border-bottom: 1px solid #d8e7f6;
                    }

                    div {
                        margin-left: 20px;
                        display: inline-block;

                        p {
                            line-height: 33px;
                        }
                    }
                }
            }

            p {
                font-size: 20px;
                margin-right: 20px;

                .total-font {
                    font-size: 25px;
                }
            }
        }

        & > div:last-child {
            width: 65%;
            ul {
                display: flex;

                &:first-child {
                    border-bottom: 1px solid #d8e7f6;
                }

                li {
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    width: 50%;
                    min-width: 200px;
                    position: relative;
                    justify-content: center;
                    height: 150px;

                    &:first-child {
                        border-right: 1px solid #d8e7f6;
                    }

                    div {
                        margin-left: 20px;
                        display: inline-block;

                        p {
                            line-height: 33px;
                        }
                    }
                }
            }
        }
    }

    .home-activity {
        padding-left: 25px;

        .ability-style {
            padding: 0 70px;
        }

        ul {
            display: flex;
            margin-bottom: 25px;

            li {
                width: 32%;
                padding: 0 30px;
                height: 150px;
                margin-right: 25px;
                display: flex;
                align-items: center;

                img {
                    display: inline-block;
                    margin-right: 20px;
                    width: 80px;
                    height: 80px;
                }
            }
        }
    }

    .act-font {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .study-time {
        color: red;
    }

    .ok-time {
        color: #19be6b;
    }

    .point-num {
        font-size: 25px;
    }
}
@media all and (max-width: 1367px) {
    .score-total {
        flex-direction: column;
        p {
            margin-bottom: 20px;
        }
    }
}
</style>