<template>
    <div class="m-video" v-if="enableVideo">
        <div class="m-video__content">
            <div class="m-video__preview" v-if="playShow" @click="play">
                <img class="m-video__img" mode="aspectFill" :src="src" alt="">
                <img class="m-video__play" src="/static/live/play.png" alt="">
            </div>
            <div class="m-goods" @click="jumpGoodsDetail">
                <img class="m-goods__img" :src="goods.img" alt="">
                <div class="m-goods__content">
                    <div class="m-goods__title">{{ goods.title }}</div>
                    <div class="m-goods__price">{{ goods.priceFormat }}</div>
                </div>
            </div>
            <video id="video" class="m-video__video" :poster="video.cover" :src="video.url"></video>
        </div>
        <div class="m-bottom-margin" v-if="bottomMargin"></div>
    </div>
</template>

<script>
    // 视频组件
    export default {
        name: 'MVideo',

        props: {
            // 内容
            content: {
                type: Object,
            },
        },

        // 数据
        data() {
            return {
                playShow: true,
                src: '',
                video: '',
                goods: '',
                bottomMargin: false,
            }
        },

        // 初始化
        created() {
            const self = this

            self.init()
        },

        // 函数
        methods: {
            init() {
                const self = this

                self.src = self.content.formData.form.models[0].src
                self.video = self.content.formData.form.models[0].video
                self.goods = self.content.asynData.list[0]
                self.bottomMargin = self.content.formData.form.moduleTitle.models[0].isShowBottomMargin === '1';
            },

            // 播放视频
            play() {
                const self = this

                let video = uni.createVideoContext('video', self)

                video.play()
                self.playShow = false
            },

            // 跳转到商品详情
            jumpGoodsDetail() {
                const self = this

                if (self.goods.link) {
                    self.router.push(self.goods.link)
                } else {
                    self.router.push({
                        path: '/pages/goods/detail',
                        query: {
                            goodsId: self.goods.itemId,
                        },
                    })
                }
            },
        },

        // 数据计算
        computed: {
            enableVideo() {
                return this.$store.state.common.enableVideo
            },
        },

        // 数据监听
        watch: {
            content(val) {
                const self = this

                if (val) {
                    self.init()
                }
            },
        },
    }
</script>

<style lang="scss" scoped>
    .m-video {

        &__content {
            position: relative;
            width: 100%;
            height: px(660);
        }

        &__preview {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            width: 100%;
            height: 100%;

            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                display: block;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, .4);
            }
        }

        &__img {
            width: 100%;
            height: 100%;
        }

        &__play {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 3;
            width: px(120);
            height: px(120);
            transform: translate(-50%, -50%);
        }

        &__video {
            width: 100%;
            height: 100%;
        }
    }

    .m-goods {
        position: absolute;
        top: px(400);
        right: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        width: px(355);
        height: px(136);
        padding-left: px(10);
        border-radius: px(68) 0 0 px(68);
        background-color: #fff;

        &__img {
            width: px(115);
            height: px(115);
            border-radius: 50%;
        }

        &__content {
            flex: 1;
            padding: 0 px(15);
        }

        &__title {
            @include omits(1);
            font-size: px(36);
            color: #000;
        }

        &__price {
            margin-top: px(15);
            font-size: px(36);
            color: #fd5121;
        }
    }

    .m-bottom-margin {
        height: px(30);
    }
</style>