<template>
    <el-card>
        <div slot="header">
            <span class="span-size">承办单位：{{ organizer }}<br /></span>
            <span class="span-size">考级详细地址：{{ address }}<br /></span>
            <span class="span-size">联系人：{{ owner }}<br /></span>
            <span class="span-size">联系电话：{{ phone }}<br /></span>
            <span class="span-size">检查记录：无<br /></span>
        </div>
        <div class="video" :id="name" style="width:100%;height:320px">
            <!-- <div class="bottom"></div> -->

            <video
                v-if="videoUrl"
                :src="videoUrl"
                controlsList="nodownload noremote footbar"
                controls="controls"
                style="width:100%;height:320px"
                oncontextmenu="return false;"
                ref="video"
                autoplay
                loop
                muted
            >
                您的浏览器不支持 video 标签。
            </video>
        </div>
    </el-card>
</template>

<script>
import EZUIKit from 'ezuikit-js';

export default {
    name: 'VideoGrid',
    props: ['token', 'device', 'name', 'organizer', 'address', 'owner', 'phone'],
    data() {
        return {
            player: null,
            list: [
                'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-47-24CxnKwMnv.mp4',
                'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-15-30-43nvcwuumz.mp4',
                'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-33-40dhjGRCso.mp4',
                'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-47-40sDbsFufH.mp4'
            ],
            videoUrl: ''
        };
    },
    methods: {
        init(form = {}) {
            let token = form.accessToken || this.token;
            let device = form.deviceSerial || this.device;

            this.player = new EZUIKit.EZUIKitPlayer({
                autoplay: true,
                id: this.name || 'video-container',
                accessToken: token,
                url: 'ezopen://open.ys7.com/' + device + '/1.live',
                template: 'security', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
                // 视频上方头部控件
                // header: ['capturePicture', 'save', 'zoom'], // 如果templete参数不为simple,该字段将被覆盖
                plugin: ['talk'] // 加载插件，talk-对讲
                // 视频下方底部控件
                // footer: ['talk', 'broadcast', 'hd', 'fullScreen'] // 如果template参数不为simple,该字段将被覆盖
                // audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
                // openSoundCallBack: data => console.log('开启声音回调', data),
                // closeSoundCallBack: data => console.log('关闭声音回调', data),
                // startSaveCallBack: data => console.log('开始录像回调', data),
                // stopSaveCallBack: data => console.log('录像回调', data),
                // capturePictureCallBack: data => console.log('截图成功回调', data),
                // fullScreenCallBack: data => console.log('全屏回调', data),
                // getOSDTimeCallBack: data => console.log('获取OSDTime回调', data),
            });
            console.group('mounted 组件挂载完毕状态===============》');
        },
        showFullScreen() {
            if (!this.player) {
                this.init();
                return;
            }
            this.player.fullScreen();
        },
        initVideo(index = 0) {
            this.videoUrl = this.list[index % this.list.length];
            // this.$nextTick(() => {
            //     setTimeout(() => {
            //         this.$refs.video.play();
            //     }, 500);
            // });
        }
    }
};
</script>
<style lang="less" scoped>
.el-card {
    width: 30%;
    margin-right: 3%;
    margin-bottom: 20px;
}

.video {
    position: relative;
    cursor: pointer;
    /deep/ iframe {
        width: 100%;
        height: 100%;
    }
    video {
        background-color: #000;
        height: 100%;
    }
}

.bottom {
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    z-index: 3;
}

.span-size {
    font-size: 14px;
    color: #565b66;
    line-height: 15px;
}
</style>
