<template>
  <div class="m-anchor" v-if="show">
    <div class="m-anchor__top" v-if="title || subTitle">
      <div class="m-anchor__title">{{ title }}</div>
      <div class="m-anchor__sub-title">{{ subTitle }}</div>
    </div>
    <div class="m-anchor__content" :style="'height:' + height + 'rpx'" @click="preview">
      <img class="m-anchor__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="jumpLink(item.link)"
        ></li>
      </ul>
    </div>
    <div class="m-bottom-margin" v-if="bottomMargin"></div>
  </div>
</template>

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

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

    // 数据
    data() {
      return {
        show: true,
        title: '',
        subTitle: '',
        imgSrc: '',
        height: '',
        anchor: [],
        bottomMargin: false,
      }
    },

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

      self.init()
    },

    // 函数
    methods: {
      init() {
        const self = this
        if (self.content.formData.moduleTitle && self.content.formData.moduleTitle.models) {
          self.title = self.content.formData.moduleTitle.models[0].title
          self.subTitle = self.content.formData.moduleTitle.models[0].subTitle
          self.bottomMargin = self.content.formData.moduleTitle.models[0].isShowBottomMargin === '1'
        }
        if (self.content.formData.form.models) {
          self.imgSrc = self.content.formData.form.models[0].content.src
          self.height = self.content.formData.form.models[0].content._src.h
          self.anchor = self.content.formData.form.models[0].content.map
        }

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

      // 图片预览
      preview() {
        const self = this

        if (!self.anchor.length) {
          uni.previewImage({
            urls: [self.imgSrc],
          })
        }
      },

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

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

    // 数据计算
    computed: {},

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

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

<style lang="scss" scoped>
.m-anchor {
  &__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;
  }

  &__content {
    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>