<template>
    <view class="learn-vedio">
        <view v-if="version && loaded">
            <u-navbar title="培训视频"></u-navbar>
            <view class="uni-padding-wrap uni-common-mt">
                <view><video object-fit="fill" class="course-video" id="courseVideo" :src="courseSrc" @play="playCourse"
                        @error="videoErrorCallback" controls></video></view>
                <view class="title-content">
                    <view class="item-content">
                        <view class="item-st">
                            <image style="width: 80rpx; height: 36rpx" :src="kcImage"></image>
                            <text class="item-st-text">{{ courseTitle.split(" ") ? courseTitle.split(" ")[0] : "" }}</text>
                        </view>
                        <view class="item-title">{{ courseTitle.split(" ") ? courseTitle.split(" ")[1] : "" }}</view>
                    </view>
                    <view>接单操作须知有助你快速了解充电桩安装业务，提高接单效率，请认真查看及学习。</view>
                </view>
                <view class="learn-view" v-if="courseId >= 0">
                    <view class="learn-view-title">视频内容介绍</view>
                    <view class="learn-list" v-for="(item, key) in courseOutlines[courseId]" :key="key">
                        <view class="learn-list-item">{{ item }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view v-else-if="loaded">
            <u-navbar title=" "></u-navbar>
            <view style="text-align: center;">暂无数据</view>
        </view>
    </view>
</template>

<script>
    let app = getApp();
    export default {
        data() {
            return {
                courseId: "",
                courseStatus: 0,
                courseSrc: "",
                courseTitle: "",
                courseDesc: "",
                currentIndex: -1, // 第几个视频
                version: true,
                loaded: false
            };
        },
        computed: {
            courseOutlines() {
                // 视频内容介绍
                return {
                    1: [
                        "1、考核规则：接单及时率",
                        "2、考核规则：上门及时率",
                        "3、考核规则：安装完工率",
                        "4、考核规则：资料提交及时率",
                        "5、考核规则：安装完工率",
                        "6、考核规则：客户满意度",
                    ],
                    2: ["1、必备材料4大类", "2、施工工具准备"],
                    3: [
                        "1、接线安装工艺标准",
                        "2、PVC、镀锌管电缆管明敷",
                        "3、电缆敷设的防火要求",
                        "4、电源点标识",
                        "5、配电箱接线及安装",
                        "6、管线敷设接头处理",
                        "7、充电桩内部接线",
                        "8、配电箱安装",
                    ],
                    4: ["1、勘测环节录单要求", "2、安装环节录单要求"],
                };
            },
            kcImage() {
                return process.uniEnv.qn_base_url + "kc.png";
            },
        },
        onLoad(e) {
            app.trackPage('入驻培训视频页')
            if (e) {
                if (e.courseId) {
                    this.courseId = e.courseId;
                }
                if (e.id) {
                    this.courseId = e.courseId;
                    this.courseSrc = app.globalData.service_standard[e.id].url;
                    this.courseTitle = app.globalData.service_standard[e.id].title;
                    this.courseDesc = app.globalData.service_standard[e.id].desc;
                }

                if (e.status) {
                    this.courseStatus = e.status;
                }
            }
            this.getVersion();
        },
        onReady: function(res) {
            // #ifndef MP-ALIPAY
            this.videoContext = uni.createVideoContext("courseVideo");
            // #endif
        },
        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) => {

                    });
            },
            videoErrorCallback: function(e) {
                uni.showModal({
                    content: e.target.errMsg,
                    showCancel: false,
                });
            },
            playCourse: function(e) {
                if (this.courseStatus && (this.courseStatus == "1" || this.courseStatus == 1)) {
                    return
                }
                this.changeCourseStatus();
            },
            changeCourseStatus() {
                let that = this;
                if (that.courseId) {
                    that.$u.api
                        .saveCourseRate({
                            courseId: that.courseId,
                        })
                        .then((res) => {
                            if (res.code !== 200) {
                                uni.showToast({
                                    icon: "none",
                                    title: "更新课程状态失败",
                                });
                            }
                        });
                } else {
                    uni.showToast({
                        title: "课程ID为空，请重新选择课程",
                    });
                }
            },
        },
    };
</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: 750rpx;
    }

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

    .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;

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

        .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%;
            }
        }
    }
</style>
