<template>
    <div class="video-container">
        <div style="position: relative;margin: 0 auto;">
            <video class="video-js vjs-theme-city" id="my-player" ref="videoPlayer1"></video>

        </div>
        <div class="vjs-playlist">
        </div>
        <div id="wxy111" style="visibility: hidden; position: absolute;">
            <mta-single-choice
                    :getShowModel="false"
                    :questionData="qa"
                    @reply="singleChoiceReplyCallback"
                    shitiIndex="1"
            ></mta-single-choice>

        </div>
    </div>
</template>

<script>
    import 'video.js/dist/video-js.css';
    import '@/assets/css/video/city.css';
    import '@/assets/css/video/fantasy.css';
    import '@/assets/css/video/forest.css';
    import '@/assets/css/video/sea.css';
    import 'videojs-playlist-ui/dist/videojs-playlist-ui.vertical.css';

    import videojs             from 'video.js';
    import playlist            from 'videojs-playlist';
    import playlistUi          from 'videojs-playlist-ui';
    import { isObject, clone } from '@/utils/common';

    import MtaSingleChoice from '@/components/client/Questions/SingleChoice.vue';

    export default {
        name:     'VideoPlayer',
        props:    {
            options: {
                type: Object,
                default() {
                    return {};
                },

            },
        },
        computed: {},
        components: {
            MtaSingleChoice
        },
        data() {
            return {
                player:        null,
                clonedOptions: {},
                divShow: false,
                qa: {"stId":631,"stTypeId":1,"stClassifyId":2,"stLevelId":1,"name":"在中国制造业中，\"智能制造”理念是由哪首次提出的","score":"1","content":["华为","河南重工","三一重工","北方重工"],"reply":null,"marked":false,"type":"danxuan","onlyNum":1,"order":0}
            };
        },
        mounted() {
            /*console.dir(videojs);
            console.dir(playlist);*/
            this.clonedOptions = clone(this.options);
            this.setVideoZhCN();
            videojs.hook('beforesetup', function (videoEl, options) {
                // videoEl.className += ' vjs-layout-x-small';

                /*if (options.autoplay) {
                    options.autoplay = false
                }*/

                options.language = 'zh-CN';
                options.userActions = {};
                options.userActions.hotkeys = {};
                options.userActions.hotkeys.playPauseKey = function (e) {
                    videojs.log(e);
                };

                // videojs.log(videoEl, options);

                return options;
            });
            videojs.registerPlugin('playlist', playlist);
            videojs.registerPlugin('playlistUi', playlistUi);
            this.player = videojs(this.$refs.videoPlayer1, this.options, function onPlayerReady() {
                // videojs.log('onPlayerReady', this);
                /*var tech = this.tech({IWillNotUseThisInPlugins: true});
                videojs.log(tech);*/
                /*let preload = this.preload();
                videojs.log(preload);*/
                // this.currentTime(30);
                // this.play();
            });


            this.player.on('play', () => {
                /*const curTime = this.player.currentTime();
                const duration = this.player.duration();
                if (curTime > duration / 3) {
                    this.player.pause();
                }*/
                if (!this.clonedOptions.progressControlEnable && this.clonedOptions.progressControlEnable === false) {
                    this.player.controlBar.progressControl.disable();
                }

            });
            /*this.player.on('pause', () => {

                // Modals are temporary by default. They dispose themselves when they are
                // closed; so, we can create a new one each time the player is paused and
                // not worry about leaving extra nodes hanging around.
                var modal = this.player.createModal('This is a modal!');

                // When the modal closes, resume playback.
                modal.on('modalclose', () => {
                    this.player.play();
                });
            });*/
            // tech() will error with no argument

            this.player.on('loadedmetadata', () => {
                var duration = this.player.duration();
                videojs.log('loadedmetadata duration: ', duration);
            });

            this.player.on('timeupdate', (event) => {
                const curTime = this.player.currentTime();
                const duration = this.player.duration();
                // videojs.log('timeupdate-------------', curTime, duration);
                /*if (curTime > duration / 3) {
                    this.player.pause();
                }*/
            });

            this.player.on('ended', function () {
                videojs.log('播放结束了!');
            });

        },
        methods:  {
            setVideoZhCN() {
                videojs.addLanguage('zh-CN', {
                    'Play':                                                                                                                        '播放',
                    'Pause':                                                                                                                       '暂停',
                    'Current Time':                                                                                                                '当前时间',
                    'Duration':                                                                                                                    '时长',
                    'Remaining Time':                                                                                                              '剩余时间',
                    'Stream Type':                                                                                                                 '媒体流类型',
                    'LIVE':                                                                                                                        '直播',
                    'Loaded':                                                                                                                      '加载完毕',
                    'Progress':                                                                                                                    '进度',
                    'Fullscreen':                                                                                                                  '全屏',
                    'Non-Fullscreen':                                                                                                              '退出全屏',
                    'Mute':                                                                                                                        '静音',
                    'Unmute':                                                                                                                      '取消静音',
                    'Playback Rate':                                                                                                               '播放速度',
                    'Subtitles':                                                                                                                   '字幕',
                    'subtitles off':                                                                                                               '关闭字幕',
                    'Captions':                                                                                                                    '内嵌字幕',
                    'captions off':                                                                                                                '关闭内嵌字幕',
                    'Chapters':                                                                                                                    '节目段落',
                    'Close Modal Dialog':                                                                                                          '关闭弹窗',
                    'Descriptions':                                                                                                                '描述',
                    'descriptions off':                                                                                                            '关闭描述',
                    'Audio Track':                                                                                                                 '音轨',
                    'You aborted the media playback':                                                                                              '视频播放被终止',
                    'A network error caused the media download to fail part-way.':                                                                 '网络错误导致视频下载中途失败。',
                    'The media could not be loaded, either because the server or network failed or because the format is not supported.':          '视频因格式不支持或者服务器或网络的问题无法加载。',
                    'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.': '由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。',
                    'No compatible source was found for this media.':                                                                              '无法找到此视频兼容的源。',
                    'The media is encrypted and we do not have the keys to decrypt it.':                                                           '视频已加密，无法解密。',
                    'Play Video':                                                                                                                  '播放视频',
                    'Close':                                                                                                                       '关闭',
                    'Modal Window':                                                                                                                '弹窗',
                    'This is a modal window':                                                                                                      '这是一个弹窗',
                    'This modal can be closed by pressing the Escape key or activating the close button.':                                         '可以按ESC按键或启用关闭按钮来关闭此弹窗。',
                    ', opens captions settings dialog':                                                                                            ', 开启标题设置弹窗',
                    ', opens subtitles settings dialog':                                                                                           ', 开启字幕设置弹窗',
                    ', opens descriptions settings dialog':                                                                                        ', 开启描述设置弹窗',
                    ', selected':                                                                                                                  ', 选择',
                    'captions settings':                                                                                                           '字幕设定',
                    'Audio Player':                                                                                                                '音频播放器',
                    'Video Player':                                                                                                                '视频播放器',
                    'Replay':                                                                                                                      '重播',
                    'Progress Bar':                                                                                                                '进度条',
                    'Volume Level':                                                                                                                '音量',
                    'subtitles settings':                                                                                                          '字幕设定',
                    'descriptions settings':                                                                                                       '描述设定',
                    'Text':                                                                                                                        '文字',
                    'White':                                                                                                                       '白',
                    'Black':                                                                                                                       '黑',
                    'Red':                                                                                                                         '红',
                    'Green':                                                                                                                       '绿',
                    'Blue':                                                                                                                        '蓝',
                    'Yellow':                                                                                                                      '黄',
                    'Magenta':                                                                                                                     '紫红',
                    'Cyan':                                                                                                                        '青',
                    'Background':                                                                                                                  '背景',
                    'Window':                                                                                                                      '视窗',
                    'Transparent':                                                                                                                 '透明',
                    'Semi-Transparent':                                                                                                            '半透明',
                    'Opaque':                                                                                                                      '不透明',
                    'Font Size':                                                                                                                   '字体尺寸',
                    'Text Edge Style':                                                                                                             '字体边缘样式',
                    'None':                                                                                                                        '无',
                    'Raised':                                                                                                                      '浮雕',
                    'Depressed':                                                                                                                   '压低',
                    'Uniform':                                                                                                                     '均匀',
                    'Dropshadow':                                                                                                                  '下阴影',
                    'Font Family':                                                                                                                 '字体库',
                    'Proportional Sans-Serif':                                                                                                     '比例无细体',
                    'Monospace Sans-Serif':                                                                                                        '单间隔无细体',
                    'Proportional Serif':                                                                                                          '比例细体',
                    'Monospace Serif':                                                                                                             '单间隔细体',
                    'Casual':                                                                                                                      '舒适',
                    'Script':                                                                                                                      '手写体',
                    'Small Caps':                                                                                                                  '小型大写字体',
                    'Reset':                                                                                                                       '重置',
                    'restore all settings to the default values':                                                                                  '恢复全部设定至预设值',
                    'Done':                                                                                                                        '完成',
                    'Caption Settings Dialog':                                                                                                     '字幕设定视窗',
                    'Beginning of dialog window. Escape will cancel and close the window.':                                                        '开始对话视窗。离开会取消及关闭视窗',
                    'End of dialog window.':                                                                                                       '结束对话视窗',
                    'Seek to live, currently behind live':                                                                                         '试图直播，当前延时播放',
                    'Seek to live, currently playing live':                                                                                        '试图直播，当前实时播放',
                    'progress bar timing: currentTime={1} duration={2}':                                                                           '{1}/{2}',
                    '{1} is loading.':                                                                                                             '正在加载 {1}。',
                    'Picture-in-Picture':                                                                                                          '画中画',
                    'Now Playing':                                                                                                                 '正在播放',
                    'Up Next':                                                                                                                     '播放下一个',
                    'Untitled Video':                                                                                                              '无标题视频',
                });
            },
            createTracks() {
                console.log('createTracks');
                for (let i = 0; i < 3; i++) {
                    /*var videoTrack = new videojs.VideoTrack({
                                                           id:       'st-video-track-' + (i + 1),
                                                           kind:     'translation',
                                                           label:    'videoTrack-' + (i + 1),
                                                           language: 'cn',
                                                       });*/
                    var audioTrack = new videojs.AudioTrack({
                                                                id:       'st-audio-track-' + (i + 1),
                                                                kind:     'translation',
                                                                label:    'audioTrack-' + (i + 1),
                                                                language: 'cn',
                                                            });
                    // this.player.videoTracks().addTrack(videoTrack);
                    this.player.audioTracks().addTrack(audioTrack);
                }
            },
            createButton() {
                videojs.log('createButton');
                var player = this.player;
                var Button = videojs.getComponent('Button');
                var button = new Button(player, {
                    clickHandler: (event) => {
                        videojs.log('Clicked');
                        // console.log('Clicked')
                        this.dialogOpen();
                    },
                });
                var stButton = player.controlBar.addChild(button);
                stButton.addClass('vjs-icon-hand');
            },
            dialogOpen() {

                console.log(this);
                let ModalDialog = videojs.getComponent('ModalDialog');
                /*content	Mixed	<optional> Provide customized content for this modal.
                    description	string	<optional> A text description for the modal, primarily for accessibility.
                    fillAlways	boolean	<optional> false Normally, modals are automatically filled only the first time they open. This tells the modal to refresh its content every time it opens.
                    label	string	<optional> A text label for the modal, primarily for accessibility.
                    pauseOnOpen	boolean	<optional> true	If true, playback will will be paused if playing when the modal opens, and resumed when it closes.
                    temporary	boolean	<optional> true If true, the modal can only be opened once; it will be disposed as soon as it's closed.
                    uncloseable	boolean	<optional> false If true, the user will not be able to close the modal through the UI in the normal ways. Programmatic closing is still possible.*/




                /*var modal_content = '<button @click="stBtnClick">st按钮7788</button>';

                // where the magic happens
                var contentEl = document.createElement('div');
                // probably better to just build the entire thing via DOM methods
                contentEl.innerHTML = modal_content;*/


                var contentEl = document.getElementById('wxy111');
                contentEl.style.visibility="visible";
                let opt = {
                    content:     contentEl,
                    description: 'description st9988',
                    fillAlways:  false,
                    label:       'stlabel',
                    pauseOnOpen: true,
                    temporary:   false,
                    uncloseable: false,
                };
                let modalDialog = new ModalDialog(this.player, opt);
                this.player.addChild(modalDialog);
                modalDialog.on('dispose', () => {
                    this.player.removeChild(modalDialog);
                });
                modalDialog.open();
                // this.render();
                // let stModalDialog = this.player.addChild(modalDialog);
                // this.divShow = true;
            },
            stBtnClick() {
                alert(1119863);
            },
            /*setSrc(params) {
                if (typeof params === 'string') {
                    this.player.src(params);
                }
                if (isObject(params)) {
                    this.player.src({
                                        type: params.type,
                                        src:  params.src,
                                    });
                }

            },*/
            btnClick() {
                alert(1)
            },
            singleChoiceReplyCallback() {}
        },
        beforeDestroy() {
            if (this.player) {
                this.player.dispose();
            }
        },
        watch:    {
            'options.playlist': {
                handler(newVal, oldVal) {
                    this.player.playlist(newVal);
                    // 延迟播放
                    this.player.playlist.autoadvance(5);
                    this.player.playlistUi();
                },
                immediate: false,
            },
        },
    };
</script>
<style lang="scss">
    .video-container {
        display: flex;

        .vjs-playlist {
            margin-left: 5px;
            width: 180px;

            .vjs-playlist-item {
                font-size: 12px;
                height: 95px;
            }
        }

        .vjs-play-control.vjs-control.vjs-button {
            outline-color: transparent;
        }
        .vjs-modal-dialog-content {
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #cccccc
        }
        /*.vjs-icon-hand {
            content:          "";
            display:          inline-block;
            width:            10px;
            height:           10px;
            background-color: rgba(132, 132, 132, 1);
            border-radius:    50%;
            margin-right:     8px;
        }*/

        /*.video-js .vjs-play-progress:before {
            top: -0.4em;
            background-color: red;
        }
        .video-js .vjs-play-progress:hover:before {
            top: -0.3333333333333333em;
            background-color: blue;
        }*/
    }

</style>
