<template>
  <view
    class="ad-box"
    :style="{ height: ad.height == 'auto' ? 'auto' : ad.height + 'rpx',margin:marginStyle }"
  >
    <view
      class="ad-chi"
      v-for="(item, index) in adtemp"
      :key="index"
      :style="[item.formatStyle]"
      @click="clickHandler(item.link[0].new_link_url)"
    >
      <img :src="item.pic_url" style="margin-bottom:-4px" mode="widthFix"/>
    </view>
    <view class="hots" v-for="(x, i) in hotspots" :key="i" :style="[x.formatStyle]" @click="clickHots(x.link)">&nbsp;</view>
  </view>
</template>

<script>
export default {
  props: ["ad"],
  data() {
    return {
      adtemp:[],
      marginStyle:"",
      hotspots:[]
    }
  },
  created() {
    this.ad.list.forEach((x) => {
      x.formatStyle = {
        width: x.width,
        height: x.height,
        left: x.left,
        top: x.top,
        backgroundImage: x.backgroundImage,
        backgroundRepeat: x.backgroundRepeat,
        backgroundSize: x.backgroundSize,
        backgroundPosition: x.backgroundPosition
      };
      if (this.ad.height == "auto") {
        x.formatStyle.position = "unset";
      }
      this.marginStyle=`${this.ad.top??0}px ${this.ad.right??0}px ${this.ad.bottom??0}px ${this.ad.left??0}px `
      this.adtemp.push(x)
    });
    this.ad.hotspot.forEach(x=>{
      x.formatStyle={
        left:x.left+'rpx',
        top:x.top+'rpx',
        height:x.height+'rpx',
        width:x.width+'rpx'
      }
      this.hotspots.push(x)
    })
  },
  methods: {
    clickHandler(url) {
      if (url && url.length > 0) {
        uni.navigateTo({
          url: url,
        });
      }
    },
    clickHots(link) {
      if (link && link.length > 0) {
        uni.navigateTo({
          url: link[0].PageUrl,
        });
      }
    },
  },
};
</script>

<style>
.ad-box {
  position: relative;
  width: 100%;
}
.ad-box .hots{
  position: absolute;
  z-index: 2;
}
.ad-box .ad-chi {
  position: absolute;
}
.ad-box .ad-chi img {
  width: 100%;
}
</style>
