<template>
    <view class="onLineCourseWrap" v-show="courseItem.courseName">
        <view class="onLineTitle">
            <img src="http://image.bjkeyware.com/static/index/olCourse.png" alt="">
            <view style="max-width: calc(100% - 100rpx);word-break: break-all">{{ courseItem.courseName }}</view>
        </view>
        <view class="onLineTime">时间: {{ yyyDate(courseItem.courseTime) }}</view>
        <view class="onLineTeacher">讲师：{{ courseItem.instructor }}</view>
        <view class="onLine" v-show="courseItem.title">职称：{{ courseItem.title }}</view>
        <view class="onLineContent">授课内容: {{ courseItem.courseContent }}</view>
        <view class="onLineMask" v-show="maskShow">
            <!-- <img src="http://image.bjkeyware.com/static/index/arr.png" alt=""> -->
            <img src="" alt="">
            <view class="learnBtnWrap">
                <view v-if="courseItem.status == '1'" class="learnBtn" @click="startLearn('pay')">付费学习￥{{
                    courseItem.amount }}</view>
                <view v-if="courseItem.status == '1'" class="passBtn" @click="startLearn('code')">输入口令学习</view>
            </view>
        </view>
        <view v-show="!maskShow" class="startLeranBtn" @click="urlShow = true">开始学习</view>
        <u-modal v-model="show" title="请输入口令" :show-confirm-button="false">
            <view class="slot-content">
                <view class="input-list">
                    <!-- input输入框 -->
                    <input class="input-item" v-if="focus" adjust-position="false" auto-blur="true"
                        @blur="inputCodeBlur" @input="inputCode" :focus="focus" v-model="code" @focus="inputFocus"
                        type="number" oneTimeCode maxlength="6" />
                    <!-- 验证码输入框 -->
                    <view class="code-list" @click="focusClick">
                        <view class="code-item" v-for="(_, index) in 4" :key="index"
                            :style="(index == code.length && focus ? 'border-color:#3c9cff;' : '')">{{ code[index] || ''
                            }}
                        </view>
                    </view>
                </view>
                <view class="codeBtnCoup">
                    <view class="codeBtn canle" @click="show = false">取消</view>
                    <view class="codeBtn sure" @click="submitCode">确定</view>
                </view>
            </view>
        </u-modal>
        <u-modal v-model="urlShow" title="学习链接" :show-confirm-button="false">
            <view class="slot-content">
                <view class="courseContent" style="text-align: center;">
                    <view style="color: #2084F9;">请使用腾讯会议打开</view>
                    <view style="font-weight: 500;">{{ courseItem.url }}</view>
                </view>
                <view class="codeBtnCoup" style="justify-content: center;margin-top: 0;">
                    <view class="codeBtn sure" style="width: 80%;border-radius: 5rpx;" @click="copy">复制</view>
                </view>
            </view>
        </u-modal>
        <!-- <u-popup style="background:#66666;padding: 20px;" v-model="isPopupShow" @close="close" mode="bottom"
            length="80%" height='60%' border-radius="15" :closeable='true' :mask-close-able="false">
            <view style="background:#66666;padding:15px 20px 30px 20px; ">
                <view style="background-color: #FFFFFF;">
                    <view class="horizontalline"></view>
                    <view>
                        <view class="commodity">
                            <p>课程名称：</p>
                            <p style="color:#333333;">{{ courseItem.courseName }}</p>
                        </view>
                        <view class="commodity">
                            <p>商品价格：</p>
                            <p style="color:#333333;">
                                <span>￥{{ '9.9' }}</span>
                            </p>
                        </view>
                        <view class="commodity">
                            <p>支付金额：</p>
                            <p style="color:#FD461A;margin-top: -3px;" v-if="addPriceAll != 0">
                                <span>¥ </span>
                                <span style="font-size:40rpx;margin-left:10rpx;font-weight: 800;">{{ addPriceAll
                                    }}</span>
                            </p>
                            <p style="color:#FD461A;margin-top: -3px;" v-else>
                                <span>限时免费</span>
                            </p>
                        </view>
                        <view class="commodity">
                            <p>支付方式：</p>
                            <p style="color:#FD461A;margin-top: -3px;">
                                <u-radio-group v-model="payTypeBig" placement="row">
                                    <u-radio name="0">微信支付</u-radio>
                                    <u-radio name="1" :disabled="lingqianIS">{{ lingqianIS ? '零钱不足' : '零钱' }}</u-radio>
                                </u-radio-group>
                            </p>
                        </view>
                    </view>
                </view>
            </view>
            <u-line></u-line>
            <view class="codeBtnCoup" style="justify-content: center;">
                <view class="codeBtn sure" style="width: 80%;" @click="payOrder">支付</view>
            </view>
        </u-popup> -->
    </view>
</template>

<script>
import { dateFormat } from '../../../utils/util';

export default {
    data() {
        return {
            maskShow: true,
            show: false,
            focus: false,
            code: '',
            courseItem: {},
            courseId: '',
            urlShow: false,
            url: '',
            learnStatus: false,
            // isPopupShow: false,
            // payTypeBig: '0',
            // lingqianIS: false
        }
    },
    computed: {
        yyyDate() {
            return function (val) {
                return dateFormat(new Date(val))
            }
        }
    },
    onLoad(course) {
        const id = course.courseId
        this.courseId = id
        this.http.quickGet('/course/online/course/' + id).then(res => {
            this.courseItem = res.data.data
            if ((this.courseItem.status == 0) || course.learnStatus == 'true') {
                this.maskShow = false
            }
        })
    },
    methods: {
        payOrder() {

        },
        close() {
            this.isPopupShow = false
            // console.log('close');
        },
        startLearn(val) {
            if (val == 'code') {
                this.show = true
            } else if (val == 'pay') {
                // this.isPopupShow = true
                this.toPay()
            }
            // this.toggleFlag = 'tolearn'
        },
        toPay() {
            const userinform = uni.getStorageSync('wxUserInfo');
            const id = userinform.userId
            // const data = {
            //     courseId: this.tooldetilsdata.tool.toolId,
            //     amount: this.cartnumber,
            //     deliverType: this.tooldetilsdata.tool.deliverType,
            //     price: '',
            //     payType: 'W06',
            //     paytype: 'W06',
            //     toolType: this.tooldetilsdata.tool.toolType,
            //     userId: id
            // }
            const data = {
                "price": this.courseItem.amount,
                "payType": "W06",
                "userId": id,
                // "recordName": this.courseItem.courseName,
                // "toolId":this.courseItem.courseId
            }
            // return
            const _this = this
            this.http.quickPost(`/play/course/pay`, data, true).then(res => {
                // console.log(res);
                if (res.data.data.retcode == 'SUCCESS') {
                    const info = JSON.parse(res.data.data.payinfo)
                    console.log(info);
                    // return
                    // 06 小程序
                    // 01 扫码
                    // return
                    uni.requestPayment({
                        timeStamp: info.timeStamp,
                        nonceStr: info.nonceStr,
                        package: info.package,
                        signType: info.signType,
                        paySign: info.paySign,
                        success(r) {
                            const sucData = {
                                "price": _this.courseItem.amount,
                                "payType": "W06",
                                "userId": id,
                                "recordName": _this.courseItem.courseName,
                                "toolId": _this.courseItem.courseId
                            }
                            _this.http.quickPost(`/play/course/pay/succes`, sucData, true).then(res => { })
                            uni.showToast({
                                icon: 'none',
                                title: '支付成功'
                            })
                            _this.maskShow = false
                            // that.isPopupShow = false
                            // setTimeout(() => {
                            //     uni.navigateTo({
                            //         url: '/pages/personal/ordernumber/ordernumber?current=0'
                            //     })
                            // }, 1000)
                        },
                        fail(error) {
                            console.log(error);
                            uni.showToast({
                                icon: 'none',
                                title: '支付失败'
                            })
                        }
                    })
                } else {
                    uni.showToast({
                        icon: 'none',
                        title: '支付错误，请联系管理员'
                    })
                }
            })
        },
        focusClick() {
            this.focus = true
        },
        pay() {
            console.log('pay for this');
        },
        openInputCode() {
            this.show = true
        },
        inputCode(e) {
            if (this.code.length > 4) {
                return
            }
            let value = e.detail.value
            this.code = value
        },
        inputFocus(e) {
            console.log(e);
        },
        inputCodeBlur(e) {
            let value = e.detail.value
            this.focus = false
        },
        copy() {
            uni.setClipboardData({
                data: this.courseItem.url, //	这里是个坑接受字符串类型 value转化为字符串
                success: function () {
                    //调用方法成功
                    uni.showToast({
                        title: '已复制到剪切板',
                        icon: 'none'
                    })
                }
            })
            this.urlShow = false
        },
        submitCode() {
            this.http.quickPost('/train/course/enterPasswd/' + this.courseId, { password: this.code }, true).then(res => {
                if (res.data.code != 200) {
                    uni.showToast({
                        title: res.data.msg,
                        icon: 'none',
                        duration: 2000,
                    })
                } else {
                    // this.url = res.data.data
                    this.maskShow = false
                }
            })
            this.code = ''
            this.show = false
        }
    }
}
</script>

<style lang="scss" scoped>
.commodity {
    display: flex;
    color: #808080;
    font-size: 32rpx;
    margin: 20px 0;
}

.commodity input {
    min-height: 40rpx !important;
}

.onLineCourseWrap {
    margin: 25rpx;
    height: calc(100% - 50rpx);
    background: #FFFFFF;
    border-radius: 10rpx;
    padding: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 27rpx;
    color: #404040;

    .onLineTitle {
        font-weight: bold;
        font-size: 30rpx;
        color: #000000;
        line-height: 46rpx;
        margin: 30rpx 0;
        display: flex;
        align-items: center;

        img {
            width: 38rpx;
            height: 38rpx;
            margin-right: 20rpx;
        }
    }

    .onLineTime {
        margin: 15rpx 0;
    }

    .onLineTeacher {
        margin: 20rpx 0;
    }

    .onLine {
        margin: 20rpx 0;
    }

    .onLineContent {
        margin: 20rpx 0;
        line-height: 46rpx;
        // line-height: 1.5;
    }

    .onLineMask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        img {
            width: 46rpx;
            height: 111rpx;
            margin: 619rpx 0 0 50%;
        }

        .learnBtnWrap {
            width: 279rpx;
            margin-top: 211rpx;
            margin-left: 50%;
            transform: translate(-50%);

            .learnBtn {
                width: 279rpx;
                height: 67rpx;
                background: linear-gradient(90deg, #5EA6FD, #1A81F9);
                box-shadow: 0rpx 1rpx 20rpx 1rpx rgba(13, 92, 187, 0.53);
                margin-bottom: 30rpx;
                border-radius: 33rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 30rpx;
                color: #FFFFFF;
                line-height: 65rpx;
                text-align: center;
            }

            .passBtn {
                margin-bottom: 90rpx;
                height: 67rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 30rpx;
                color: #1578ED;
                line-height: 65rpx;
                text-align: center;
            }
        }

    }

    .startLeranBtn {
        position: fixed;
        bottom: 69rpx;
        width: 646rpx;
        height: 70rpx;
        background: linear-gradient(90deg, #5EA6FD, #1A81F9);
        box-shadow: 0rpx 1rpx 20rpx 1rpx rgba(13, 92, 187, 0.4);
        border-radius: 35rpx;

        font-family: PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
        line-height: 65rpx;
        text-align: center;
    }

    .slot-content {
        font-size: 28rpx;
        color: $u-content-color;
        padding-left: 30rpx;
    }

    .input-list {
        padding-top: 20rpx;
        display: flex;
        align-items: center;

        .input-item {
            width: 0rpx;
        }

        .code-list {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .code-item {
                width: 80rpx;
                height: 80rpx;
                text-align: center;
                line-height: 80rpx;
                border: 1rpx solid #eee;
                border-radius: 10rpx;
                background: #EAEEF3;
            }
        }


    }

    .codeBtnCoup {
        padding: 20rpx;
        display: flex;
        justify-content: space-between;
        margin-top: 40rpx;

        .codeBtn {
            width: 250rpx;
            line-height: 70rpx;
            border-radius: 35rpx;
            text-align: center;
            font-size: 28rpx;
            color: #FFFFFF;
        }

        .sure {
            background: linear-gradient(90deg, #5EA6FD, #1A81F9);
        }

        .canle {
            color: #666666;
            border: 1px solid #E0E0E0;
        }
    }

    .courseContent {
        width: 372rpx;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        margin: 30rpx auto 0 auto;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        line-height: 49rpx;
        // background-color: #000000;
        text-align: center;
    }


}
</style>