<template>
    <div class="classdetail">
        <MHeader :isBack="false" />
        
        <div class="header van-hairline--bottom">
            <h3>{{ dataInfo.groupName }}</h3>
            <p>{{ dataInfo.courseStartDate | getMonthDay }}—{{ dataInfo.courseEndDate | getMonthDay }}</p>
        </div>

        <div class="teahcerInfo van-hairline--bottom">
            <div class="logo">
                <img v-if="dataInfo.avatar" :src="dataInfo.avatar" alt="">
                <img v-else src="../../assets/images/app/icon_teacher.png" alt="">
            </div>
            <div class="info">
                <!-- -{{ dataInfo.subjectNames }} -->
                <p class="name van-ellipsis">{{ dataInfo.teacherName }}</p>
                <p class="memo van-multi-ellipsis--l2">简介：{{ dataInfo.introduction }}</p>
                <p class="times">授课次数：{{ dataInfo.lectureNum ? dataInfo.lectureNum : 0 }}次</p>
            </div>
        </div>

        <div class="classdetails">
            <h3>课时安排</h3>
            <!-- 线下课{{ dataInfo.offlineClassesTimes }}次+线上课{{ dataInfo.onlineClassesTimes }}次 -->
            <p class="detail"><i class="books"></i><span>总计:{{ dataInfo.totalClassesTimes }}节</span></p>

            <div class="detaillist">
                <div class="detailitem" v-for="(item, index) in courseList" :key="index">
                    <span class="time">第{{ ++index }}节</span>
                    <i class="icon_prossess"></i>
                    <span class="content">{{ item.classDate | getMonthDay}} {{ item.startClassTime | getHourMinute }}-{{ item.endClassTime | getHourMinute }} {{ item.status == 'FINISH' ? '（已结束）' : '' }}</span>
                </div>
            </div>
        </div>

        <div class="pay_btn" @click="onJoin">确认加入</div>
    </div>
</template>
<script>
import MHeader from '@/components/MHeader'
import { browser, getSTD } from '@/common/common'
import { getGroupDetail, buyCourseGroup } from '@/api/app'
export default {
    name: 'classdetail',
    components: { MHeader },
    data () {
        return {
            dataInfo: {},
            courseList: []
        }
    },
    mounted() {
        let params = this.$route.query
        if(params.Authorization) {
            localStorage.setItem('Authorization', decodeURI(params.Authorization))
            localStorage.setItem('userInfo', decodeURI(params.Authorization))
        }
        // 判断是否在app里面
        if(!browser().android && !browser().iPhone) {
            this.headerStatus = true
        } else {
            document.title = '课堂详情'
        }

        this.__init()
    },
    methods: {
        __init() {
            let params = this.$route.query
            this.$toast.loading({
                duration: 0,
                message: '加载中...',
                forbidClick: true,
                loadingType: 'spinner'
            })
            getGroupDetail({ groupId: params.groupId }).then(res => {
                let result = res.data
                this.$toast.clear()
                if(result.code == 200) {
                    if(result.data) {
                        this.dataInfo = result.data
                        this.courseList = result.data.courseSchedules
                    }
                } else if(result.code == 403) {
                    this.$router.push({
                        path: '/appLogin',
                        query: {
                            groupId: params.groupId
                        }
                    })
                } else {
                    this.$toast(result.msg)
                }
            })
        },
        onJoin() {
            let params = this.$route.query
            this.$dialog.confirm({
                message: '确定加入课程?'
            }).then(() => {
                this.$toast.loading({
                    duration: 0,
                    message: '加载中...',
                    forbidClick: true,
                    loadingType: 'spinner'
                })
                buyCourseGroup({ courseGroupId: params.groupId }).then(res => {
                    let result = res.data
                    this.$toast.clear()
                    if(result.code == 200) {
                        this.$dialog.alert({
                            message: '恭喜您已完成课程报名，<br />请关注课程时间，准时上课。'
                        }).then(() => {
                            // this.$router.push('/studentDownLoad')
                            // window.location.href = 'https://mstuonline.dayaedu.com/#/studentDownload'
                            if(this.checkUrl()) {
                                window.location.href = 'https://mstuonline.dayaedu.com/#/transfer'
                            } else {
                                window.location.href = 'http://mstudev.dayaedu.com/#/transfer'
                            }
                        });
                    } else if(result.code == 302) {
                        this.onSubmitStatus = true
                        this.$dialog.alert({
                            title: '课程冲突',
                            message: result.msg,
                            messageAlign: 'left'
                        }).then(() => {
                        // on close
                        });
                    } else {
                        this.$toast(result.msg)
                    }
                })
            }).catch(() => {
            // on cancel
            });
        },
        checkUrl() {
            let url = window.location.href
            if(/mteaonline/ig.test(url)) {
                return true
            } else {
                return false
            }
        }
    },
    filters: {
        getMonthDay(time) {
            let tempDate = time || new Date()
            if(typeof(tempDate) == 'string') {
                tempDate = new Date(time.replace(/-/ig, '/'))
            }
            let month = getSTD(tempDate.getMonth() + 1)
            let day = getSTD(tempDate.getDate())
            return month + '月' + day + '日'
        },
        getHourMinute(time) {
            let tempDate = time || new Date()
            if(typeof(tempDate) == 'string') {
                tempDate = new Date(time.replace(/-/ig, '/'))
            }
            let hour = getSTD(tempDate.getHours())
            let minute = getSTD(tempDate.getMinutes())
            return hour + ':' + minute
        }
    }
}
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");
.classdetail {
    position: relative;
    background-color: #fff;
    min-height: 100vh;
}

.header {
    padding: .2rem .16rem .15rem;
    font-size: .14rem;
    color: #444444;
    h3 {
        font-size: .18rem;
        color: #444444;
        padding-bottom: .05rem;
    }
}
.teahcerInfo {
    padding: .16rem;
    display: flex;
    align-items: center;
    p {
        line-height: 1.2;
    }
    .logo {
        width: .72rem;
        height: .72rem;
        margin-right: .16rem;
        img {
            border-radius: .04rem;
            width: .72rem;
            height: .72rem;
        }
    }
    .info {
        font-size: .12rem;
        color: #777777;
    }
    .name {
        display: flex;
        justify-content: space-between;
        font-size: .14rem;
        color: #444444;
    }
    .memo {
        padding: .05rem 0;
    }
    .times {
        // color: #F97215;
    }
}
.classdetails {
    padding: .13rem .16rem;
    font-size: .14rem;
    color: #444444;
    h3 {
        font-size: .18rem;
        color: #444444;
        padding-bottom: .05rem;
    }
    .books {
        display: inline-block;
        margin-right: .05rem;
        width: .11rem;
        height: .11rem;
        background: url('../../assets/images/app/icon_b.png') no-repeat center center;
        background-size: contain;
    }

    .detaillist {
        margin-top: .12rem;
        margin-left: .75rem;
        border-left: 1px solid #B6D3BD;
    }
    .detailitem {
        line-height: 1;
        padding-bottom: 0.1rem;
        display: flex;
        align-items: center;
        margin-left: -.61rem;
        .time {
            width: .45rem;
        }
        &:last-child {
            padding-bottom: 0;
        }
    }
    .icon_prossess {
        display: inline-block;
        width: .16rem;
        height: .16rem;
        background: url('../../assets/images/app/icon_step.png') no-repeat center center;
        background-size: contain;
        margin: 0 .15rem 0 .08rem;
    }
}
.pay_btn {
    margin: .25rem .3rem .2rem;
    background: @mColor;
    line-height: .45rem;
    color: #fff;
    font-size: .18rem;
    border-radius:.5rem;
    text-align: center;
}
.van-hairline--bottom::after {
    color: #414141;
}
</style>