<template>
    <transition name="video-fade">
        <div
            :class="bem()"
            v-if="visible"
        >
            <div :class="bem('container')">
                <span :class="bem('close')" @click="close">+</span>
                <video
                    :class="bem('player')"
                    :src="url"
                    :autoplay="autoplay"
                    :loop="loop"
                    controls
                    preload="metadata"
                    muted="muted"
                >
                    <!-- <source src="https://st-gdx.dancf.com/gaodingx/1/configs/system/20190426-101343-f51f.webm" type="video/webm">
                    <source src="https://st-gdx.dancf.com/gaodingx/1/configs/system/20190426-101238-d445.mp4" type="video/mp4"> -->
                    你的浏览器不支持 <code>video</code> 标签.
                </video>
            </div>
        </div>
    </transition>
</template>

<script>
import { componentMixin, createComponentName } from '../_utils/component';

export default {
    name: createComponentName('video-dialog'),
    mixins: [componentMixin],
    // 兼容元素标签引用的方式
    props: {
        videoShow: {
            type: Boolean,
            default: false
        },
        videoUrl: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            visible: false,
            url: '',
            autoplay: false, // 自动播放
            loop: false // 循环播放
        };
    },
    watch: {
        visible(value) {
            if (this.callback) {
                this.callback(value);
            }
        },
        videoShow(value) {
            this.visible = value;
            if (value) {
                this.url = this.videoUrl;
                document.documentElement.style.overflow = 'hidden';
            }
            else {
                this.url = '';
                document.documentElement.style.overflow = '';
            }
        }
    },
    beforeDestroy() {
        document.body.removeChild(this.$el);
    },
    methods: {
        close() {
            if (this.videoShow) {
                this.$emit('update:videoShow', false);
            }
            else {
                this.visible = false;
                this.url = '';
                document.documentElement.style.overflow = '';
            }
        },

    }
};
</script>

<style lang="less">
@import "../_styles/base.less";

@b: ~"@{prefix}-video-dialog";

.@{b} {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .7);
    z-index: 999;
    &__container {
        position: relative;
        width: 1200px;
        height: 675px;
        margin: auto;
        // border-radius: 6px;
    }
    &__close {
        position: absolute;
        top: -28px;
        left: calc(100% + 16px);
        font-size: 46px;
        font-weight: 200;
        color: @color-white;
        transform: rotate(45deg);
        cursor: pointer;
    }
    &__player {
        width: 100%;
        height: 100%;
        outline: 0;
        cursor: pointer;
    }
}

.video-fade-enter-active {
    animation: video-fade-in .3s;
}

.video-fade-leave-active {
    animation: video-fade-out .3s;
}

@keyframes video-fade-in {
    0% {
        // transform: translate3d(0, -20px, 0);
        opacity: 0;
    }
    100% {
        // transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes video-fade-out {
    0% {
        // transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        // transform: translate3d(0, -20px, 0);
        opacity: 0;
    }
}

</style>
