<template>
    <div style="position: relative;">
        <el-dialog title="交互视频" :visible.sync="dialogVisibleVideo" :append-to-body="true" width="95%"
            :before-close="handleClose" class="dialog_diy">
            <div v-if="dialogVisibleVideo">
                <div class="videoBox">
                    <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
                        :options="playerO" v-if="this.json.video" @timeupdate="onPlayerTimeupdate($event)"></video-player>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close">关 闭</el-button>
            </span>
        </el-dialog>
        <choiceD 
        :dialogVisibleChoice.sync="dialogVisibleChoice" 
        :json="toolJson" 
        @play="gotoPlay"
        :userid="userid"
        :id="id"
        :courseType="courseType"
        :taskCount="taskCount"
        :toolindex="toolindex"
        :videoTime="stopTime"
        ></choiceD>
    </div>
</template>

<script>
import choiceD from '../Choice/index.vue'

export default {
    props: {
        dialogVisibleVideo: {
            type: Boolean,
            default: false
        },
        videoJson: {
            type: Object
        },
        userid: {
            type: String,
        },
        id: {
            type: String,
        },
        courseType: {
            type: String,
        },
        taskCount: {
            type: Number,
        },
        toolindex: {
            type: Number,
        }
    },
    components: {
        choiceD,
    },
    data() {
        return {
            json: {},
            playerOptions: {
                playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                autoplay: false, //如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 导致视频一结束就重新开始。
                preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: "zh-CN",
                aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [
                    {
                        type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
                        src: "", //url地址require("../../assets/media/aaa.mp4")
                    },
                ],
                // poster: require("../../assets/tu31.png"), //你的封面地址
                // poster: dataRes.imgUrl, //你的封面地址
                notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true, //当前时间和持续时间的分隔符
                    durationDisplay: true, //显示持续时间
                    remainingTimeDisplay: false, //是否显示剩余时间功能
                    fullscreenToggle: false, //全屏按钮
                },
            },
            playerO: {},
            videoTime: 0,
            dialogVisibleChoice: false,
            stopTime: 0,
            toolJson: {}
        }
    },
    watch: {
        dialogVisibleVideo(newValue, oldValue) {
            this.json = JSON.parse(JSON.stringify(this.videoJson));
            if (this.json.video) {
                this.playerO = JSON.parse(JSON.stringify(this.playerOptions));
                this.playerO.sources[0].src = this.json.video
                this.$nextTick(() => {
                    setTimeout(() => {
                        this.videoTime = Math.round(this.$refs['videoPlayer'].player.cache_.duration)
                    }, 500)
                })
            }
        }
    },
    methods: {
        handleClose(done) {
            this.close()
            done()
        },
        close() {
            this.$emit("update:dialogVisibleVideo", false)
        },
        onPlayerTimeupdate(player) {
            let gklog = player.cache_.currentTime;//当前播放的秒数
            let gklog2 = parseInt(gklog)
            for (var i = 0; i < this.json.setting.length; i++) {
                if (gklog2 == this.json.setting[i].time) {
                    this.stopTime = this.json.setting[i].time
                    player.pause()
                    if (this.json.setting[i].tool.tool == 45) {
                        this.dialogVisibleChoice = true
                        this.toolJson = this.json.setting[i].tool.toolJson
                    }
                }
            }
            console.log(" onPlayerTimeupdate!", gklog);
            console.log(" onPlayerTimeupdate!", gklog2);
        },
        gotoPlay() {
            this.$refs['videoPlayer'].player.currentTime(this.stopTime + 1)
            this.$refs['videoPlayer'].player.play()
        },
    },
    mounted() {
        this.json = JSON.parse(JSON.stringify(this.videoJson));
        if (this.json.video) {
            this.playerO = JSON.parse(JSON.stringify(this.playerOptions));
            this.playerO.sources[0].src = this.json.video
            this.$nextTick(() => {
                setTimeout(() => {
                    this.videoTime = Math.round(this.$refs['videoPlayer'].player.cache_.duration)
                }, 500)
            })
        }
    },
}
</script>

<style scoped>
.dialog_diy>>>.el-dialog__header {
    background: #3c3c3c !important;
    padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__title {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
    top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
    color: #fff;
}

.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer {
    background: #fafafa;
}

.videoBox {
    width: 100%;
    height: 600px;
    background: #fff;
    margin-top: 20px;
    position: relative;
}

.videoBox>.content {
    /* position: absolute; */
    line-height: 600px;
    text-align: center;
    font-size: 18px;
    user-select: none;
}

.videoBox .video-player {
    height: 100%;
    width: auto;
}

.videoBox>>>.vjs-fluid {
    padding: 0 !important;
    height: 100%;
}
</style>