<template>
    <div class="m-multipicture" v-if="show">
        <div class="m-multipicture__top" v-if="title || subTitle">
            <div class="m-multipicture__title">{{ title }}</div>
            <div class="m-multipicture__sub-title">{{ subTitle }}</div>
        </div>
        <scroll-view class="m-multipicture__scroll" :style="'height:' + height + 'rpx'" :scroll-x="true">
            <div class="m-multipicture__content" :style="'width:' + width + 'rpx; height:' + height + 'rpx'">
                <img class="m-multipicture__img" :src="imgSrc" alt="">
                <ul class="anchor">
                    <li
                        class="anchor__item"
                        :style="'top:' + item.coords[1] + 'rpx;left:' + item.coords[0] + 'rpx;width:' + (item.coords[2] - item.coords[0]) + 'rpx;height:' + (item.coords[3] - item.coords[1]) + 'rpx;'"
                        v-for="(item, index) in anchor" :key="index"
                        @click="jump(item.link)"
                    ></li>
                </ul>
            </div>
        </scroll-view>
        <div class="m-bottom-margin" v-if="bottomMargin"></div>
    </div>
</template>

<script>
    // 横滑
    export default {
        name: 'MMultipicture',

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

        // 数据
        data() {
            return {
                show: true,
                title: '',
                subTitle: '',
                imgSrc: '',
                width: '',
                height: '',
                anchor: [],
                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.imgSrc = self.content.formData.form.models[0].content.src
                self.width = self.content.formData.form.models[0].content._src.w
                self.height = self.content.formData.form.models[0].content._src.h
                self.anchor = self.content.formData.form.models[0].content.map
                self.bottomMargin = self.content.formData.moduleTitle.models[0].isShowBottomMargin === '1'

                if (isNaN(Number(self.height)) || Number(self.height) === 0) {
                    self.show = false
                }
            },
        },

        // 数据计算
        computed: {},

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

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

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

        &__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;
        }

        &__scroll {
            position: relative;
            width: 100%;
        }

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

    .anchor {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;

        &__item {
            position: absolute;
            z-index: 1;
        }
    }

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