<template>
  <div class="m-singlepicture" v-if="show">
    <div class="m-singlepicture__box" @click="jumpLink">
      <img class="m-singlepicture__img" :src="imgSrc" mode="widthFix" alt="title" />
    </div>
    <div class="m-bottom-margin" v-if="bottomMargin"></div>
  </div>
</template>

<script>
  // 锚点
  export default {
    name: 'MSinglepicture',

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

    // 数据
    data() {
      return {
        show: true,
        title: '',
        imgSrc: '',
        link: '',
        bottomMargin: false,
      }
    },

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

      self.init()
    },

    // 函数
    methods: {
      init() {
        const self = this
        console.log(self.content);

        self.title = self.content.formData.moduleTitle.models[0].title
        self.imgSrc = self.content.formData.form.models[0].src
        self.link = self.content.formData.form.models[0].link
        self.bottomMargin = self.content.formData.moduleTitle.models[0].isShowBottomMargin === '1'

        if (!this.imgSrc) {
          self.show = false
        }
      },

      // 跳转链接
      jumpLink() {
        const self = this

        if (self.link) {
          self.router.push(self.link)
        } else {
          uni.previewImage({
            urls: [self.imgSrc],
          })
        }
      },
    },

    // 数据计算
    computed: {},

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

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

<style lang="scss" scoped>
.m-singlepicture {
  &__box {
    width: 100%;
  }
  &__img {
    width: 100%;
  }
}

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