<template>
    <div class="m-title">
        <div class="title" @click="jumpDetail">{{text}}</div>
        <div class="m-bottom-margin" v-if="bottomMargin"></div>
    </div>
</template>

<script>
// 视频组件
export default {
    name: "MTitle",

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

    // 数据
    data() {
        return {
            text: "",
            link: "",
            bottomMargin: false,
        };
    },

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

        self.init()
    },

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

            self.text = self.content.formData.form.models[0].title;
            self.link = self.content.formData.form.models[0].link;
            self.bottomMargin =
                self.content.formData.moduleTitle.models[0]
                    .isShowBottomMargin === "1";
        },

        // 跳转到详情
        jumpDetail() {
            const self = this;
            if (this.link && this.link !== "/") {
                self.router.push(url);
            }
        },
    },

    // 数据计算
    computed: {
    },

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

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

<style lang="scss" scoped>
.m-bottom-margin {
    height: px(30);
}

.title{
    display: block;
    font-size: px(44);
    color: #333;
    padding: px(30);
    background-color: #fff;
}
</style>