<!-- Created by henian.xu on 2019/12/13. -->

<template>
    <div class="video">
        <div
            class='inner'
            :style='innerStyles'>
            <div
                class="ratio"
                :style="ratioStyles"
            />
            <div class="content">
                <img
                    v-if="coverSrc"
                    class="cover"
                    :src="coverSrc"
                    alt="cover"
                >
                <i class="play-icon el-icon-video-play" />
                <!--<div>{{ src }}</div>
                <div>{{ aspectRatio_ }}</div>
                <div>{{ coverSrc }}</div>-->
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Video',
    data() {
        return {};
    },
    props: {
        src: {
            type: String,
            default: '',
        },
        aspectRatio: {
            type: String,
            default: '',
        },
        cover: {
            type: [String, Array],
            default: '',
        },
        borderRadius: {
            type: String,
            default: '',
        },
    },
    computed: {
        coverSrc() {
            const { cover } = this;
            if (!cover) return '';
            let obj = cover;
            if (Array.isArray(cover)) [obj] = cover;
            if (this.$utils.isObject(obj)) obj = obj.address;
            return obj;
        },
        aspectRatio_() {
            const { aspectRatio } = this;
            const [width = 1, height = 1] = aspectRatio.split(':');
            return height / width;
        },
        ratioStyles() {
            const { aspectRatio_ } = this;
            return {
                paddingTop: `${aspectRatio_ * 100}%`,
            };
        },
        innerStyles() {
            const { borderRadius } = this;
            if (!borderRadius) return {};
            return {
                borderRadius,
                overflow: 'hidden',
            };
        },
    },
};
</script>

<style lang="scss">
.video {
    > .inner {
        overflow: hidden;
        position: relative;
        background-color: #000;
        > .content {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            > .cover {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            > .play-icon {
                position: absolute;
                left: 50%;
                top: 50%;
                font-size: 50px;
                margin-top: -25px;
                margin-left: -25px;
                color: #fff;
            }
        }
    }
}
</style>
