<template>
    <div class="m-shortvideo" v-if="enableShortVideo">
        <div class="m-shortvideo__top" v-if="title || subTitle">
            <div class="m-shortvideo__title">{{ title }}</div>
            <div class="m-shortvideo__sub-title">{{ subTitle }}</div>
        </div>
        <scroll-view class="m-scroll" :scroll-x="true" v-if="videotype === '0'">
            <ul class="m-scroll__list">
                <li class="m-scroll__item" v-for="(item, index) in list" :key="index" @click="jumpDetail(item)">
                    <img class="m-scroll__img" mode="aspectFill" :src="item.snapshot" alt="">
                    <div class="m-scroll__content">
                        <div class="m-scroll__title">{{ item.title }}</div>
                    </div>
                    <div class="m-play">
                        <img class="m-play__img" src="/static/icon/play.png" alt="">
                    </div>
                </li>
            </ul>
        </scroll-view>
        <ul class="m-list" v-if="videotype === '1'">
            <li class="m-list__item" v-for="(item, index) in list" :key="index"  @click="jumpDetail(item)">
                <img class="m-list__img" mode="aspectFill" :src="item.snapshot" alt="">
                <div class="m-list__content">
                    <div class="m-list__title">{{ item.title }}</div>
                </div>
                <div class="m-play">
                    <img class="m-play__img" src="/static/icon/play.png" alt="">
                </div>
            </li>
        </ul>
        <ul class="m-list m-list--more" v-if="videotype === '2'">
            <li class="m-list__item" v-for="(item, index) in list" :key="index"  @click="jumpDetail(item)">
                <img class="m-list__img" mode="aspectFill" :src="item.snapshot" alt="">
                <div class="m-list__content">
                    <div class="m-list__title">{{ item.title }}</div>
                </div>
                <div class="m-play">
                    <img class="m-play__img" src="/static/icon/play.png" alt="">
                </div>
            </li>
        </ul>
        <ul class="m-list m-list--both" v-if="videotype === '3'">
            <li class="m-list__item" v-for="(item, index) in list" :key="index"  @click="jumpDetail(item)">
                <img class="m-list__img" mode="aspectFill" :src="item.snapshot" alt="">
                <div class="m-list__content">
                    <div class="m-list__title">{{ item.title }}</div>
                </div>
                <div class="m-play">
                    <img class="m-play__img" src="/static/icon/play.png" alt="">
                </div>
            </li>
        </ul>
        <div class="m-bottom-margin" v-if="bottomMargin"></div>
    </div>
</template>

<script>
    // 短视频营销
    export default {
        name: 'MShortvideo',

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

        // 数据
        data() {
            return {
                title: '',
                subTitle: '',
                videotype: '',
                list: [],
                bottomMargin: false,
            }
        },

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

            self.init()
        },

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

                self.title = self.content.formData.moduleTitle.models[0].title
                self.subTitle = self.content.formData.moduleTitle.models[0].subTitle
                self.videotype = self.content.formData.form.models[0].videotype
                self.list = self.content.asynData.list
                self.bottomMargin = self.content.formData.moduleTitle.models[0].isShowBottomMargin === '1'
            },

            // 跳转到短视频详情
            jumpDetail(val) {
                const self = this

                self.router.push({
                    path: '/pages/live/video',
                    query: {
                        id: val.id,
                    },
                })
            },
        },

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

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

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

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

        &__top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: px(110);
            padding: 0 px(45);
            background-color: #fff;
        }

        &__title {
            font-size: px(32);
            color: #333;
        }

        &__sub-title {
            font-size: px(32);
            color: #999;
        }
    }

    .m-scroll {
        width: 100%;
        height: px(770);
        background-color: #fff;

        &__list {
            white-space: nowrap;
            padding: px(25) px(55);
        }

        &__item {
            position: relative;
            display: inline-block;
            width: px(430);
            height: px(720);
            margin-left: px(30);
            border-radius: px(15);
            overflow: hidden;

            &:first-child {
                margin-left: 0;
            }

            &:last-child {
                margin-right: px(55);
            }
        }

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

        &__content {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .2);
        }

        &__title {
            @include omit();
            position: absolute;
            bottom: px(30);
            left: 0;
            z-index: 1;
            width: 100%;
            padding: 0 px(30);
            font-size: px(38);
            color: #fff;
        }
    }

    .m-list {
        display: flex;
        flex-direction: column;
        padding: 0 px(30) px(55);
        background-color: #fff;

        &__item {
            position: relative;
            width: 100%;
            height: px(540);
            margin-top: px(30);
            border-radius: px(15);
            overflow: hidden;

            &:first-child {
                margin-top: 0;
            }
        }

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

        &__content {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .2);
        }

        &__title {
            @include omit();
            position: absolute;
            bottom: px(30);
            left: 0;
            z-index: 1;
            width: 100%;
            padding: 0 px(30);
            font-size: px(38);
            color: #fff;
        }
    }

    .m-list--more {
        flex-direction: row;
        flex-wrap: wrap;
        padding: px(20) px(55);

        .m-list__item {
            width: px(300);
            height: px(500);
            margin: px(35) 0 0 px(35);

            &:nth-child(3n+1) {
                margin-left: 0;
            }

            &:nth-child(-n+3) {
                margin-top: 0;
            }
        }
    }

    .m-list--both {
        flex-direction: row;
        flex-wrap: wrap;
        padding: px(20) px(55);

        .m-list__item {
            width: px(470);
            height: px(260);
            margin: px(30) 0 0 px(30);

            &:nth-child(2n+1) {
                margin-left: 0;
            }

            &:nth-child(-n+2) {
                margin-top: 0;
            }
        }
    }

    .m-play {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(90);
        height: px(90);
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background-color: rgba(0, 0, 0, .6);

        &__img {
            width: px(50);
            height: px(50);
        }
    }

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