<template>
    <div v-if="!isComplete" class="uncomplete-wrap">
        <p class="verify-info-text">
            <span>{{$t('home.verifyText')}}</span>
            <span>{{$t('home.verifyText1')}}</span>
            <span> {{$t('home.verifyText2')}}</span>
        </p>
        <div class="verify-status">
            <!-- 如果是大陆站需要验证是否完成手机号认证 -->
            <div class="verify-status-box" v-if="$store.state.userInfo.hasVerify">
                <Icon custom="iconfont icon-phone-unverify" class="tips-icon" />
                <b class="verify-title">{{$t('home.verifyPh')}}</b>
                <router-link to="/regist" class="to-verify">{{$t('home.toPhone')}}</router-link>
            </div>
            <div class="verify-status-box" v-else>
                <Icon type="md-checkmark-circle-outline" class="tips-icon" color="#19be6b" />
                <p class="phone-tips">
                    <span style="font-size:16px;color:white">{{$t('home.phoneSuccess')}}</span>
                    <br />
                    <span style="font-size:12px">（暂未对接API）</span>
                </p>
                <span class="has-verify">{{$t('home.hasBanding')}}</span>
            </div>

            <!-- 大陆和国际站都需要验证是否加入学校 -->
            <div class="verify-status-box" v-if="!$store.state.userInfo.hasSchool">
                <Icon custom="iconfont icon-school" class="tips-icon" />
                <b class="verify-title">{{$t('home.verifySchool')}}</b>
                <router-link to="/home/settings" class="to-verify">{{$t('home.toSchool')}}</router-link>
            </div>
            <div class="verify-status-box" v-else>
                <Icon type="md-checkmark-circle-outline" class="tips-icon" color="#19be6b" />
                <p class="phone-tips">
                    <span style="font-size:16px">{{$t('home.schoolSuccess')}}</span>
                </p>
                <span class="has-verify">{{$t('home.hasJoin')}}</span>
            </div>
        </div>

    </div>

    <div v-else class="home-page-container dark-iview-split dark-iview-card">
        <div class="prepare-area box-item">
            <p class="list-title">
                {{$t('home.previewStudy')}}
            </p>
            <div class="card-content-box">
                <vuescroll>
                    <div class="in-pro-detail">
                        <div class="in-pro-ac-item" @click="toSelfLearn" v-for="(item,index) in (itemCount - 4)" :key="index">
                            <Icon custom="iconfont icon-prepare-study" class="ac-type-icon"></Icon>
                            <div class="ac-info-box">
                                <p>
                                    <span class="classname-label">一年级一班</span>
                                    <span class="ac-name-label">两位数加法1231123123123123123</span>
                                </p>
                                <p class="ac-time-wrap">
                                    2020.01.11 - 2020.01.22
                                </p>
                            </div>
                            <div class="ac-pro-box">
                                <span>86</span>
                                <span class="percent-chart">%</span>
                            </div>
                        </div>
                    </div>
                </vuescroll>
            </div>
        </div>
        <div class="class-data-area" style="display:flex;flex-direction:column;">
            <div class="calss-chart-box box-item">
                <p class="chart-title">
                    {{$t('home.classData')}}
                </p>
                <TechScore></TechScore>
                <TeachScore></TeachScore>
            </div>
            <div class="upload-record-box box-item" style="flex:1;">
                <p class="list-title">
                    {{$t('home.recentRecord')}}
                </p>
                <div class="card-content-box">
                    <vuescroll>
                        <div class="upload-record-item" v-for="(item,index) in itemCount" :key="index" @click="toRecordPage">
                            <Icon class="record-type-icon" style="display:inline-block;" custom="iconfont icon-hi"></Icon>
                            <div class="record-info-wrap" style="display:inline-block;">
                                <p class="recorde-name">HiTeach-default-202009091212</p>
                                <p class="record-time">
                                    <Time :time="((new Date()).getTime() - 60 * 3 * 1000)" />
                                </p>
                            </div>
                        </div>
                    </vuescroll>
                </div>
            </div>

        </div>
        <div class="activity-area" style="display:flex;flex-direction:column;">
            <div class="ac-count-box box-item">
                <p class="chart-title">
                    {{$t('home.acCount')}}
                </p>
                <AcCountPie style="margin-top:-20px;"></AcCountPie>
            </div>
            <div class="ac-list-box box-item" style="flex:1;">
                <p class="list-title">
                    {{$t('home.goingList')}}
                </p>
                <div class="in-pro-detail">
                    <vuescroll>
                        <div class="in-pro-ac-item" @click="toAc('vote')">
                            <Icon custom="iconfont icon-vote" class="ac-type-icon"></Icon>
                            <div class="ac-info-box">
                                <p>
                                    <span class="classname-label">一年级一班</span>
                                    <span class="ac-name-label">两位数加法123100</span>
                                </p>
                                <p class="ac-time-wrap">
                                    2020.01.11 - 2020.01.22
                                </p>
                            </div>
                            <div class="ac-pro-box">
                                <span>86</span>
                                <span class="percent-chart">%</span>
                            </div>
                        </div>
                        <div class="in-pro-ac-item" @click="toAc('hw')">
                            <Icon custom="iconfont icon-hw" class="ac-type-icon"></Icon>
                            <div class="ac-info-box">
                                <p>
                                    <span class="classname-label">一年级一班</span>
                                    <span class="ac-name-label">两位数加法</span>
                                </p>
                                <p class="ac-time-wrap">
                                    2020.01.11 - 2020.01.22
                                </p>
                            </div>
                            <div class="ac-pro-box">
                                <span>86</span>
                                <span class="percent-chart">%</span>
                            </div>
                        </div>
                        <div class="in-pro-ac-item" @click="toAc('que')">
                            <Icon custom="iconfont icon-questionnaire" class="ac-type-icon"></Icon>
                            <div class="ac-info-box">
                                <p>
                                    <span class="classname-label">一年级一班</span>
                                    <span class="ac-name-label">两位数加12325法</span>
                                </p>
                                <p class="ac-time-wrap">
                                    2020.01.11 - 2020.01.22
                                </p>
                            </div>
                            <div class="ac-pro-box">
                                <span>86</span>
                                <span class="percent-chart">%</span>
                            </div>
                        </div>
                        <div class="in-pro-ac-item" @click="toAc('learn')">
                            <Icon custom="iconfont icon-learning-self" class="ac-type-icon"></Icon>
                            <div class="ac-info-box">
                                <p>
                                    <span class="classname-label">一年级一班</span>
                                    <span class="ac-name-label">两位数加法</span>
                                </p>
                                <p class="ac-time-wrap">
                                    2020.01.11 - 2020.01.22
                                </p>
                            </div>
                            <div class="ac-pro-box">
                                <span>86</span>
                                <span class="percent-chart">%</span>
                            </div>
                        </div>
                        <div class="in-pro-ac-item" @click="toAc('test')">
                            <Icon custom="iconfont icon-test" class="ac-type-icon"></Icon>
                            <div class="ac-info-box">
                                <p>
                                    <span class="classname-label">一年级一班</span>
                                    <span class="ac-name-label">两位数加法</span>
                                </p>
                                <p class="ac-time-wrap">
                                    2020.01.11 - 2020.01.22
                                </p>
                            </div>
                            <div class="ac-pro-box">
                                <span>86</span>
                                <span class="percent-chart">%</span>
                            </div>
                        </div>
                    </vuescroll>
                </div>

            </div>
        </div>
        <div class="notice-area">
            <div class="school-notice-box box-item">
                <p class="list-title">
                    <span>{{$t('home.scNotice')}}</span>
                    <span class="notice-count-tag">2</span>
                </p>
                <div class="card-content-box">
                    <vuescroll>
                        <ul class="notice-list-box">
                            <li v-for="(item,index) in itemCount" :key="index">
                                <div style="display:flex;justify-content:space-between;">
                                    <p>
                                        <span class="notice-title">醍摩豆青城山学校</span>
                                        <span class="notice-dot" v-if="index < 2"></span>
                                    </p>
                                    <span class="notice-time">2020-09-09 18:02</span>
                                </div>
                                <p class="notice-text">活动2020下学期末考试完成率已达100%</p>
                            </li>
                        </ul>
                    </vuescroll>
                </div>
            </div>
            <div class="common-notice-box box-item">
                <p class="list-title">
                    <span>{{$t('home.msg')}}</span>
                    <span class="notice-count-tag">1</span>
                </p>
                <div class="card-content-box">
                    <vuescroll>
                        <ul class="notice-list-box">
                            <li>
                                <div style="display:flex;justify-content:space-between;">
                                    <p>
                                        <span class="notice-title">刘雨涵</span>
                                        <span class="notice-dot"></span>
                                    </p>
                                    <span class="notice-time">2020-09-09 18:02</span>
                                </div>
                                <p class="notice-text">上课的时候有个问题没听懂，想和老师做进一步讨论。</p>
                            </li>
                            <li>
                                <div style="display:flex;justify-content:space-between;">
                                    <p>
                                        <span class="notice-title">李志轩</span>
                                    </p>
                                    <span class="notice-time">2020-09-09 18:02</span>
                                </div>
                                <p class="notice-text">上课的时候有个问题没听懂，想和老师做进一步讨论。</p>
                            </li>
                            <li>
                                <div style="display:flex;justify-content:space-between;">
                                    <p>
                                        <span class="notice-title">叶曜灵</span>
                                    </p>
                                    <span class="notice-time">2020-09-09 18:02</span>
                                </div>
                                <p class="notice-text">上课的时候有个问题没听懂，想和老师做进一步讨论。</p>
                            </li>
                            <li>
                                <div style="display:flex;justify-content:space-between;">
                                    <p>
                                        <span class="notice-title">王子睿</span>
                                    </p>
                                    <span class="notice-time">2020-09-09 18:02</span>
                                </div>
                                <p class="notice-text">上课的时候有个问题没听懂，想和老师做进一步讨论。</p>
                            </li>
                        </ul>
                    </vuescroll>
                </div>
            </div>
            <div class="system-notice-box box-item">
                <p class="list-title">
                    <span>{{$t('home.sysMsg')}}</span>
                    <span class="notice-count-tag">{{$store.state.userInfo.hasSchool ? 1 : 2}}</span>
                </p>
                <div class="card-content-box">
                    <vuescroll>
                        <ul class="notice-list-box">
                            <li>
                                <div style="display:flex;justify-content:space-between;">
                                    <p>
                                        <span class="notice-title">IES5内测</span>
                                        <span class="notice-dot"></span>
                                    </p>
                                    <span class="notice-time">2020-09-09 18:02</span>
                                </div>
                                <p class="notice-text long-text">
                                    2020.12.01-2020.12.31为IES5内测阶段！
                                </p>
                            </li>

                        </ul>
                    </vuescroll>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import AcCountPie from "./AcCountPie.vue"
import TechScore from "./TechScore.vue"
import TeachScore from "./TeachScore.vue"
export default {
    components: {
        AcCountPie, TechScore, TeachScore
    },
    data() {
        return {
            split1: 0.5,
            split2: 0.5,
            split3: 0.5,
            itemCount: 10
        }
    },
    methods: {
        toAc(type) {
            switch (type) {
                case 'vote':
                    this.$router.push({
                        path: '/home/manageVote'
                    })
                    break
                case 'que':
                    this.$router.push({
                        path: '/home/manageQuestionnaire'
                    })
                    break
                case 'test':
                    this.$router.push({
                        path: '/home/manageEvaluation'
                    })
                    break
                default:
                    break
            }
        },
        toRecordPage() {
            this.$router.push({
                path: '/home/classRecord'
            })
        },
        toSelfLearn() {
            //this.$router.push({
            //    path: '/home/SelfLearn'
            //})
        },
        toJoinSchool() {
            this.$router.push({
                path: '/home/settings'
            })
        }
    },
    created() {
    },
    computed: {
        //暂时只验证加入学校， 手机号需要对接API
        isComplete() {
            // return this.$store.state.userInfo.hasSchool && this.$store.state.userInfo.hasVerify
            return this.$store.state.userInfo.hasSchool
        }
    }
}
</script>
<style scoped lang="less">
@import "./HomePage.less";
</style>
<style>
.home-page-container .ivu-card-body {
    height: calc(100% - 52px);
    padding: 0px;
}

.home-page-container .__panel {
    /* padding-right: 17px; */
}
</style>