<template>
  <view
    class="ad-box"
    :style="{ height: ad.height == 'auto' ? 'auto' : ad.height + 'rpx' }"
  >
    <view
      class="ad-chi"
      v-for="(item, index) in ad.list"
      :key="index"
      :style="[item.formatStyle]"
      @click="clickHandler(item.link[0].new_link_url)"
    >
      <img :src="item.pic_url" mode="widthFix"/>
    </view>
  </view>
</template>

<script>
export default {
  props: ["ad"],
  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";
      }
    });
  },
  methods: {
    clickHandler(url) {
      if (url && url.length > 0) {
        uni.navigateTo({
          url: url,
        });
      }
    },
  },
};
</script>

<style>
.ad-box {
  position: relative;

  width: 100%;
}
.ad-box .ad-chi {
  position: absolute;
}
.ad-box .ad-chi img {
  width: 100%;
}
</style>
