<template v-cloak>
    <view class="">
        <view class="learn-vedio" v-if="version && loaded">
            <u-navbar back-icon-color="#000000" :background="background" title-color="#000000" :border-bottom="false">
            </u-navbar>
            <view class="uni-padding-wrap uni-common-mt">
                <view><video object-fit="fill" class="course-video" id="courseVideo" :src="courseSrc"
                        :options="playerOptions" :playsinline="true" @play="playCourse" @error="videoErrorCallback"
                        @ready="playerReadied" @timeupdate="onPlayerTimeupdate($event)" @ended="setLearned()" autoplay="true"
                        controls></video></view>
                <view class="title-content">
                    <view class="item-content">
                        <view class="item-st">
                            <image class="kc-image" :src="kcImage"></image>
                            <text class="item-st-text">{{ courseTotal }}课时</text>
                        </view>
                        <view class="item-title">{{ courseTitle }}</view>
                    </view>
                    <view>{{ courseDesc }}</view>
                </view>
                <view class="learn-view" v-if="courseId >= 0">
                    <view class="learn-view-title color-teacher">课程讲师</view>
                    <view class="teacher-desc">
                        <u-avatar :style="{'width':'100rpx', 'height':'100rpx'}" :src="teacherImage" mode="circle">
                        </u-avatar>
                        <view class="teacher-right">
                            <view class="teacher-right-top">
                                <view class="" style="font-size: 32rpx;font-weight: bold;">{{ teacher.name }}</view>
                                <view class="teacher-disc">课程讲师
                                </view>
                            </view>
                            <view class="teacher-intro">{{ teacherIntro }}</view>
                        </view>
                    </view>
                    <u-line color="#F4F5F7" margin="30rpx 0 0 0" />
                    <view class="learn-view-title u-margin-bottom-0">目录</view>
                    <view class="scroll_box u-padding-bottom-50">
                        <view class="item_list" :class="{'item_list_active': item.isActive,
                         'u-margin-left-30':(index%2==1), 'is-learned': item.isLearned && !item.isActive}"
                         v-for="(item, index) in sectionList" :key="index" @click="goNext(item)">
                                <view class="item-title-1">{{ item.title }}</view>
                                <view class="item-title-2">{{ item.intro }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view v-else-if="loaded">
            <u-navbar back-icon-color="#000000" :background="background" title-color="#000000" :border-bottom="false">
            </u-navbar>
            <view style="text-align: center;">暂无数据</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                nextSectionId: null,
                teacherImage: process.uniEnv.qn_base_url + "avatar.gif",
                courseId: "",
                courseStatus: 0,
                courseSrc: "",
                courseTitle: "",
                courseDesc: "",
                courseTotal: null,
                section_id: 0,
                sectionInfo: {}, //节信息
                sectionList: [],
                teacher: {
                    name: "",
                    avatar: ""
                },
                teacherIntro: "",
                playerOptions: {
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                    autoplay: true, //如果true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto',
                    language: 'zh-CN',
                    aspectRatio: '16:9',
                    fluid: true,
                    notSupportedMessage: '此视频暂无法播放，请稍后再试',
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        fullscreenToggle: true //全屏按钮
                    }
                },
                params: {
                    course_id: null,
                },
                gklog: '',
                videoTotalTime: 0,
                howTimeToUpdateLearnedStatus: 5, //设置几秒提交一次状态
                status: 0, //是否已学习默认1已学习
                isLearned: false, //默认设置观看1/2就是已学
                old: {
                    scrollTop: null
                },
                scrollValue: 0,
                nowTime: 0,
                version: true,
                loaded: false
            };
        },
        computed: {
            kcImage() {
                return process.uniEnv.qn_base_url + "kc.png";
            },
        },
        onLoad(e) {
            this.getVersion();
            getApp().trackPage('学习视频详情页')
            if(e){
                this.section_id = e.section_id
                this.params.course_id = e.course_id
                this.getCapterDetails()
                this.getSectionInfo({
                    section_id: e.section_id
                })
            }
        },
        onReady: function(res) {
            this.videoContext = uni.createVideoContext("courseVideo");
        },
        methods: {
            getVersion() {
                let version = process.uniEnv.version_number;
                let that = this;
                this.$u.api
                    .getVersionInfo(version)
                    .then((res) => {
                        that.loaded = true
                        let data = res.data;
                        if(data.hasOwnProperty('is_audit') && data.is_audit == 0){
                            that.version = false
                        }
                    })
                    .catch((err) => {
                        that.loaded = true
                    });
            },
            scroll: function(e) {
                this.old.scrollTop = e.detail.scrollTop
            },
            goNext(info) {
                if(this.status == 1){
                    console.log('已学');
                }
                //切换成下一个
                this.getSectionInfo({
                    section_id: info.id
                })
                this.section_id = info.id;
                //底部激活样式切换
                this.changeActiveAction()
            },
            changeActiveAction() {
                let activeKey = 0
                for (let i in this.sectionList) {
                    this.sectionList[i].isActive = this.section_id == this.sectionList[i].id ? true : false;
                    if(this.sectionList[i].isActive){
                        activeKey = i
                    }
                }
                if(activeKey > 1){
                    this.scrollValue = (activeKey - 1) * 150
                }else{
                    this.scrollValue = 0
                }
            },
            setLearned() {
                let param = {
                    section_id: this.section_id,
                    video_time: this.videoTotalTime,
                    status: 1
                };
                this.$u.api.updateLearnCourses(param).then((res) => {}).catch((err) => {
                    console.log(err)
                });
            },
            onPlayerTimeupdate(player) {
                let intCurrentTime = parseInt(player.detail.currentTime);
                this.updateLearnedStatus(intCurrentTime)
                this.gklog = intCurrentTime
            },
            videoErrorCallback: function(e) {
                uni.showModal({
                    content: e.target.errMsg,
                    showCancel: false
                })
            },
            playCourse: function(e) {
                if (this.courseStatus && (this.courseStatus == "1" || this.courseStatus == 1)) {
                    return
                }
            },
            playerReadied(player) {
                player.currentTime(this.gklog)
            },
            //获取章节详情
            getCapterDetails() {
                let that = this
                this.$u.api
                    .ChapterDetails(this.params)
                    .then((res) => {
                        if (res.code != 200) {
                            uni.showToast({
                                title: res.message,
                                icon: "none"
                            })
                        }
                        if (res.data) {
                            that.sectionList = res.data[0].section
                            that.courseTotal = that.sectionList.length
                            let length = that.sectionList.length
                            for (let i = 0; i < length; i++) {
                                that.sectionList[i].title = "第" + (i + 1) + "节"
                                that.sectionList[i].intro = that.sectionList[i].name
                                that.sectionList[i].isActive = that.section_id == that.sectionList[i].id
                                 ? true : false
                            }
                            this.changeActiveAction()
                        }
                    })
                    .catch((err) => {
                        uni.showToast({
                            title: err,
                            icon: "none"
                        })
                        that.isLoadMore = false
                        if (that.params.start > 0) {
                            that.page -= 5
                        }
                    })
            },
            getSectionInfo(param) {
                this.$u.api
                    .CourseSection(param)
                    .then((res) => {
                        if (res.code != 200) {
                            uni.showToast({
                                title: res.message,
                                icon: "none"
                            });
                        }
                        if (res.data) {
                            this.sectionInfo = res.data
                            this.nextSectionId = this.sectionInfo.nextSectionId
                            let wareVal = this.sectionInfo.ware
                            this.courseTitle = res.data.name
                            this.courseDesc = res.data.content.replace(/<p.*?>|<\/p>/ig, "")
                            this.section_id = res.data.id
                            this.section_content = res.data.content
                            this.status = res.data.isLearned ? 1 : 0
                            this.teacher.name = res.data.teachers[0].name
                            this.teacherImage = res.data.teachers[0].avatar
                            this.teacherIntro = res.data.teachers[0].intro.replace(/<.*?>|<\/.*?>/ig, "")
                            this.params.course_id = res.data.course_id
                            if (wareVal == "0") {
                                let coureWareList = res.data.courseware
                                this.courseSrc = coureWareList[0].src
                                this.videoTotalTime = parseInt(JSON.parse(coureWareList[0].info).time) - 1;
                            }
                        }
                    })
                    .catch((err) => {
                        uni.showToast({
                            title: err,
                            icon: "none"
                        })
                    })
            },
            updateLearnedStatus(nowTime) {
                let param = {
                    section_id: this.section_id,
                    video_time: nowTime,
                    status: this.status
                };
                if(nowTime == this.nowTime){
                    return
                }
                this.nowTime = nowTime;
                if(nowTime % this.howTimeToUpdateLearnedStatus != 0){
                    //固定时间更新一次
                    return
                }
                if(this.status == 1){
                    //已学再学时间设置为结束时间
                    param.video_time = this.videoTotalTime
                }
                this.$u.api.updateLearnCourses(param).then((res) => {}).catch((err) => {
                    console.log(err)
                });
            },
        },
    }
</script>

<style lang="scss" scoped>
    .learn-vedio {
        background-color: #f4f5f7;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    .course-video {
        width: 100%;
    }

    .course-title {
        font-size: 36rpx;
        font-weight: 700;
        padding: 40rpx 40rpx 10rpx 40rpx;
    }

    .title {
        font-weight: 700;
        font-family: Medium, Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 77rpx;
        color: #333;
        padding: 80rpx 60rpx 40rpx 60rpx;
    }

    .content {
        padding: 40rpx 30rpx;
        margin-bottom: 20rpx;
    }

    .course-desc {
        margin-left: 60rpx;
    }

    .title-content {
        padding: 40rpx 30rpx;
        margin-bottom: 20rpx;
        background-color: #ffffff;
        color: #999999;
        font-size: 24rpx;

        .item-content {
            display: flex;
            align-items: center;
        }

        .item-st {
            width: 80rpx;
            height: 36rpx;
            padding-right: 2rpx;
            text-align: center;
            margin-right: 20rpx;
            line-height: 24rpx;
            position: relative;

            .item-st-text {
                color: #ffffff;
                position: absolute;
                font-size: 16rpx;
                left: 20rpx;
                top: 8rpx;
                line-height: 28rpx;
            }
        }

        .item-title {
            color: #333333;
            font-size: 44rpx;
            font-weight: bold;
        }
    }

    .item-content {
        display: flex;
        padding-bottom: 30rpx;
    }

    .item-title {
        color: #333333;
        font-size: 28rpx;
    }

    .learn-view {
        background-color: #ffffff;
        border-radius: 12rpx;
        // padding: 38rpx 30rpx 30rpx 30rpx;
        // margin-bottom: 20rpx;
        font-size: 32rpx;
        color: #333333;
        // height: 820rpx;
        padding: 0 30rpx;

        .learn-view-title {
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
            padding-top: 30rpx;
        }

        .learn-list {
            .learn-list-item {
                font-size: 28rpx;
                margin-top: 30rpx;
                margin-bottom: 30rpx;
                color: #333333;
            }

            .line-view {
                background-color: #f4f5f7;
                height: 2rpx;
                width: 100%;
            }
        }
    }

    .u-content {
        // margin-top: 10rpx;
        padding: 40rpx 30rpx;
        margin-bottom: 20rpx;
    }

    .list-default {
        background-color: #F4F5F7;
        border-radius: 12rpx;
        color: #333333;
    }

    .list-default-active {
        background-color: #ffffff;
        border-radius: 12rpx;
        color: #2272FF;
        border: 2rpx solid #2272FF;
        box-sizing: border-box;
    }

    .color-teacher {
        color: #000000;
    }

    .catalogue {
        display: flex;
        overflow: auto;
        padding-top: 30rpx;
        padding-bottom: 30rpx;
        padding-right: 30rpx;
    }

    .scroll-view_H {
        width: 500rpx;
        height: 100rpx;

        .scroll-view-item_H {
            width: 100rpx;
            height: 100rpx;
        }

        .uni-bg-red {
            background-color: red;
        }

        .uni-bg-green {
            background-color: green;
        }

        .uni-bg-blue {
            background-color: blue;
        }
    }
    
    .item_list {
        width: 330rpx;
        height: 150rpx;
        display: inline-block;
        border-radius: 12rpx;
        padding: 20rpx;
        margin-top: 30rpx;
        border: 1px solid #999999;
        color: #666666;
        
        .item-title-1 {
            font-size: 24rpx;
            color: #333333;
        }
        
        .item-title-2 {
            font-size: 26rpx;
            margin-top: 16rpx;
            color: #666666;
        }
    }
    
    .item_list_active {
        background-color: #ffffff;
        color: #2272FF;
        border: 2rpx solid #2272FF;
        box-sizing: border-box;
        
        .item-title-1 {
            font-size: 24rpx;
            color: #2272FF;
        }
        
        .item-title-2 {
            font-size: 26rpx;
            margin-top: 16rpx;
            color: #2272FF;
        }
    }
    
    .is-learned {
        border: 1px solid #EEEEEE;
        .item-title-1 {
            font-size: 24rpx;
            color: #999999;
        }
        
        .item-title-2 {
            font-size: 26rpx;
            margin-top: 16rpx;
            color: #999999;
        }
    }
    
    .teacher-intro {
        font-size: 24rpx;
        margin-top: 15rpx;
    }
    
    .teacher-disc {
        font-size: 24rpx;
        margin-top: 6rpx;
        color: #999999;
        padding-left: 30rpx;
    }
    
    .kc-image {
        width: 80rpx;
        height: 36rpx
    }
    
    .teacher-desc {
        padding-top: 30rpx;
        display: flex;
        padding-left: 30rpx;
    }
    
    .teacher-right {
        font-size: 30rpx;
        padding-left: 30rpx;
        padding-right: 30rpx;
    }
    
    .teacher-right-top {
        display: flex;
        font-size: 32rpx;
    }
</style>
