<!--
 * @Description: 视频组件
 * @Date: 2020-06-30 16:00:37
 * @LastEditTime: 2020-10-10 14:47:57
 * @LastEditors: 李璕
--> 
<template>
    <div
        class="see-video"
        v-if="isShow"
        ref="wrapper"
        :class="{
            'see-video--empty': !imageSrc && isDesign,
        }"
    >
        <template v-if="!videoSrc && isDesign">
            <div class="see-video__main">
                <div class="see-video__main__title">上传视频</div>
                <div class="see-video__main__desc">支持扩展名：mp4</div>
            </div>
        </template>

        <template v-else>
            <div class="see-video__main">
                <div
                    @click="btnClick(true)"
                    class="btn-play"
                    :class="{
                        'btn-play-mobile': isMobile,
                    }"
                ></div>
            </div>
        </template>

        <img v-show="imageSrc" :src="imageSrc" class="see-video__image" />
        <div v-show="imageSrc" class="see-video__mask"></div>
    </div>
</template>
<script>
import permissionMixin from "./permission-mixin";
export default {
    name: "see-video",
    mixins: [permissionMixin],
    props: {
        componentData: {
            required: false,
        },
    },
    inject: ["$EventBus"],
    data() {
        return {};
    },
    computed: {
        isDesign() {
            return this.componentData.commonVariable.pageType === "design";
        },
        imageSrc() {
            if (this.componentData && this.componentData.imageSrc) {
                return this.componentData.imageSrc;
            }
            return "";
        },
        videoSrc() {
            if (this.componentData && this.componentData.videoSrc) {
                return this.componentData.videoSrc;
            }
            return "";
        },
        isMobile() {
            return this.componentData.commonVariable.isMobile;
        },
    },
    watch: {
        componentData: {
            immediate: true,
            handler: function () {},
        },
    },
    created() {},
    mounted() {},
    methods: {
        btnClick(flag) {
            // this.canplayFlag = flag;
            if (!this.isDesign) {
                this.$EventBus.$emit("playVideo", {
                    src: this.componentData.videoSrc,
                });
            }
        },
    },
    destroyed() {},
};
</script>

<style lang="scss" >
.see-video {
    position: relative;
    width: 100%;
    border-radius: 4px;
    min-height: 50px;
    .see-video__image {
        width: 100%;
        border-radius: 4px;
    }
}
.see-video--empty {
    background: rgba(204, 204, 204, 0.14);
    border: 1px solid rgba(0, 0, 0, 0.14);
    height: 200px;
}
.see-video__main {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .see-video__main__title {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
    }
    .see-video__main__desc {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.65);
    }
    .btn-play {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 40px;
        width: 40px;
        margin-left: -20px;
        margin-top: -20px;

        background: url("./assets/play.png");
        background-size: cover;
        background-repeat: no-repeat;
        cursor: pointer;
        z-index: 1;
    }
    .btn-play-mobile {
        height: 30px;
        width: 30px;
        margin-left: -15px;
        margin-top: -15px;
    }
}
.see-video__mask {
    position: absolute;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 4px;
    background-color: black;
    opacity: 0.2;
}
</style>

