<template>
    <!-- 验证提示调整为提示框 -->
    <!-- <div v-if="!isComplete" class="uncomplete-wrap">
        <p class="verify-info-text" v-if="!$store.state.userInfo.hasSchool">
            <span style="text-align:left;display: inline-block;">
                {{$t('home.verifyText3')}}
            </span>
            <br />
            <a href="https://www.habook.com/zh-tw/cloud.php?act=view&id=13" target="_blank">{{$t('home.websiteLink')}}</a>
        </p>
        <div class="verify-status">
             如果是大陆站需要验证是否完成手机号认证 
            <div v-show="srvAdr == 'China'" class="verify-status-box" v-if="!hasVerify">
                <Icon custom="iconfont icon-phone-unverify" class="tips-icon" />
                <b class="verify-title">{{$t('home.verifyPh')}}</b>
                <router-link to="/home/userCenter" class="to-verify">{{$t('home.toPhone')}}</router-link>
            </div>
            <div v-show="srvAdr == 'China'" 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 />
                </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 class="home-page-container">
        <!-- 课前预习 对应模块暂未排上里程 暂时隐藏 -->
        <!-- <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="cus-table-area box-item">
            <p class="list-title">
                {{$t('home.myCourse')}}
            </p>
            <div class="card-content-box" style="padding:10px">
                <vuescroll>
                    <MinTable @tmwCus="getTmwCus"></MinTable>
                    <p class="today-text-label">
                        {{$t('home.tmwCus')}}
                    </p>
                    <div class="today-cus-item" v-for="(item,index) in tmwCus" :key="index">
                        <Icon type="md-time" class="label-icon" />
                        <div>
                            <p class="cus-time">
                                <span>{{item.time}}</span>
                                <span class="cus-time-label">
                                    {{item.timeLabel}}
                                </span>
                            </p>
                            <p>
                                <span class="cus-name">
                                    {{$t('home.course')}}
                                    <span style="color: var(--primary-text-color)">
                                        {{item.course}}
                                    </span>
                                </span>
                                <span class="cus-class">
                                    {{$t('home.className')}}
                                    <span style="color: var(--primary-text-color)">
                                        {{item.class}}
                                    </span>
                                </span>
                            </p>
                        </div>
                    </div>
                    <EmptyData v-show="!tmwCus.length" :textContent="$t('home.tmwNoCus')"></EmptyData>
                </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')}}
                    <span style="color: var(--normal-icon-color);margin-left: 6px;font-size: 12px;">
                        ({{$t('system.preview')}})
                    </span>
                </p>
                <TechScore></TechScore>
                <TeachScore></TeachScore>
            </div>
            <div class="upload-record-box box-item" style="flex:1;">
                <p class="list-title">
                    {{$t('home.recentRecord')}}
                    <span style="color: var(--normal-icon-color);margin-left: 6px;font-size: 12px;">
                        ({{$t('system.preview')}})
                    </span>
                </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> -->
                        <EmptyData :textContent="$t('home.noRecord')"></EmptyData>
                    </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;" :count="acCount"></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 v-for="(item,index) in goingList" :key="index" class="in-pro-ac-item" @click="toAc(item.pk, item.scope)">
                            <Icon :custom="getAcIcon(item.pk)" class="ac-type-icon"></Icon>
                            <div class="ac-info-box">
                                <p>
                                    <!-- <span class="classname-label">一年级一班</span> -->
                                    <span class="ac-name-label">{{item.name}}</span>
                                </p>
                                <p class="ac-time-wrap">
                                    <Icon type="md-alarm" />
                                    {{$jsFn.dateFormat(item.startTime)}} - {{$jsFn.dateFormat(item.endTime)}}
                                </p>
                            </div>
                            <div class="ac-pro-box">
                                <span :class="['type-label', item.owner == 'school' ? '' : 'special-color']">
                                    {{item.owner == 'school' ? $t('home.schoolLabel') : $t('home.privateLabel')}}
                                </span>
                            </div>
                        </div>
                        <EmptyData v-show="!goingList.length" :textContent="$t('home.noGoing')"></EmptyData>
                    </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 style="color: aqua;margin-left: 6px;font-size: 12px;">
                        ({{$t('system.preview')}})
                    </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 noticeList" :key="index" @click="viewNotice(index)">
                                <div style="display:flex;justify-content:space-between;">
                                    <p>
                                        <span class="notice-title">{{item.title}}</span>
                                        <span class="notice-dot" v-if="index < 2"></span>
                                    </p>
                                    <span class="notice-time">{{$jsFn.dateFormat(item.startTime)}}</span>
                                </div>
                                <p class="notice-text" v-html="item.content"></p>
                            </li>
                            <EmptyData v-show="noticeList.length == 0" :textContent="$t('home.noNotice')"></EmptyData>
                        </ul>
                    </vuescroll>
                </div>
            </div>
            <div class="system-notice-box box-item">
                <p class="list-title">
                    <span>{{$t('home.sysMsg')}}</span>
                    <!-- <span style="color: aqua;margin-left: 6px;font-size: 12px;">
                        ({{$t('system.preview')}})
                    </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> -->
                            <EmptyData :textContent="$t('home.noInfo')"></EmptyData>
                        </ul>
                    </vuescroll>
                </div>
            </div>
        </div>
        <Modal v-model="viewNoticeStatus" :title="noticeList[noticeIndex] ? noticeList[noticeIndex].title : ''" width="600">
            <template v-if="noticeList[noticeIndex]">
                <!-- <h2 class="notice-title">{{noticeList[noticeIndex].title}}</h2> -->
                <p class="notice-content" v-html="noticeList[noticeIndex].content"></p>
            </template>
        </Modal>
    </div>
</template>
<script>
import AcCountPie from "./AcCountPie.vue"
import TechScore from "./TechScore.vue"
import TeachScore from "./TeachScore.vue"
import MinTable from "./MinTable.vue"
export default {
    components: {
        AcCountPie, TechScore, TeachScore, MinTable
    },
    inject: ['reload'],
    data() {
        return {
            split1: 0.5,
            split2: 0.5,
            split3: 0.5,
            itemCount: 10,
            tmwCus: [],
            srvAdr: 'China',
            hasVerify: false, //是否完成手机号验证
            acCount: [],
            goingList: [],
            noticeList: [],
            viewNoticeStatus: false,
            noticeIndex: 0
        }
    },
    methods: {
        viewNotice(index) {
            this.noticeIndex = index
            this.viewNoticeStatus = true
        },
        //查询学校公告
        findNotice() {
            let params = {
                code: this.$store.state.userInfo.schoolCode,
                type: "school",
                publish: 1
            }
            this.$api.notice.FindNotice(params).then(
                res => {
                    this.noticeList = res.notices
                },
                err => {
                    this.$Message.error('API error!')
                }
            )
        },
        getAcIcon(type) {
            let icon = ''
            switch (type) {
                case 'Exam':
                    icon = 'iconfont icon-test'
                    break
                case 'Self':
                    icon = 'iconfont icon-activityT'
                    break
                case 'Homework':
                    icon = 'iconfont icon-hw'
                    break
                case 'Vote':
                    icon = 'iconfont icon-vote'
                    break
                case 'Survey':
                    icon = 'iconfont icon-questionnaire'
                    break
                default:
                    break
            }
            return icon
        },
        getTmwCus(data) {
            this.tmwCus = []
            this.tmwCus = this._.cloneDeep(data)
        },
        toAc(type, scope) {
            // if(scope == 'school'){
            //     this.$Message.warning('暂未处理校本活动详情页')
            //     return
            // }
            // switch (type) {
            //     case 'Vote':
            //         this.$router.push({
            //             path: '/home/personalVote'
            //         })
            //         break
            //     case 'Survey':
            //         this.$router.push({
            //             path: '/home/personalSurvey'
            //         })
            //         break
            //     case 'Exam':
            //         this.$router.push({
            //             path: '/home/privateEvaluation'
            //         })
            //         break
            //     default:
            //         break
            // }
        },
        toRecordPage() {
            this.$router.push({
                path: '/home/classRecord'
            })
        },
        toSelfLearn() {
            //this.$router.push({
            //    path: '/home/SelfLearn'
            //})
        },
        toJoinSchool() {
            this.$router.push({
                path: '/home/settings'
            })
        },

        //获取活动统计数据已经进行中的活动
        getAcCount() {
            this.$api.learnActivity.ActivityCount({}).then(
                res => {
                    if (res.totalCount && res.totalCount.length) {
                        res.totalCount.forEach(item => {
                            switch (item.key) {
                                case 'Exam':
                                    item.name = this.$t('home.ac1')
                                    break
                                case 'Self':
                                    item.name = this.$t('home.ac2')
                                    break
                                case 'Homework':
                                    item.name = this.$t('home.ac3')
                                    break
                                case 'Vote':
                                    item.name = this.$t('home.ac4')
                                    break
                                case 'Survey':
                                    item.name = this.$t('home.ac5')
                                    break
                                default:
                                    break
                            }
                        })
                        this.acCount = res.totalCount
                    }
                    if (res.goingDatas) {
                        this.goingList = res.goingDatas
                    }

                },
                err => {
                    this.$Message.error('API error!')
                }
            )
        }
    },
    created() {
        this.getAcCount()
        if (this.$store.state.userInfo.hasSchool) {
            this.findNotice()
        }
    },
    mounted() {
        this.$EventBus.$off('onChangeSchool')
        this.$EventBus.$on('onChangeSchool', (data) => {
            this.getAcCount()
        })
    },
    computed: {
        //暂时只验证加入学校， 手机号需要对接API
        isComplete() {
            return this.$store.state.userInfo.hasSchool && this.hasVerify
        }
    },
    watch: {
        '$store.state.userInfo.schoolCode': {
            handler(n, o) {
                this.getAcCount()
            }
        }
    }
}
</script>
<style scoped lang="less">
@import "./HomePage.less";
</style>
<style lang="less">
.home-page-container .ivu-card-body {
    height: calc(100% - 52px);
    padding: 0px;
}
.notice-text {
    p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }
}
</style>