<template>
  <div
    class="dec-imgLink"
    :class="{ radius: arg.radius }"
    :style="{ paddingRight: space + 'px', paddingLeft: space + 'px' }"
  >
    <span style="display: none">{{ tab.refresh }}</span>
    <template v-if="!$isEmptyObj(arg.ids)">
      <!-- 轮播-carousel -->
      <template v-if="arg.styleArg === 'carousel'">
        <div><img class="imgH" :src="decImgDomain(arg.ids[0].img)" /></div>
      </template>
      <!-- 水平滑动-row -->
      <div
        v-else-if="arg.styleArg === 'row'"
        :style="{
          marginLeft: 0 - lacuna / 2 + 'px',
          marginRight: 0 - lacuna / 2 + 'px',
        }"
      >
        <div class="scroll-w">
          <div
            v-for="(item, i) in arg.ids"
            :key="i"
            class="imgH"
            :style="{
              height: imgH,
              width: scrollW,
              paddingLeft: lacuna / 2 + 'px',
              paddingRight: lacuna / 2 + 'px',
            }"
          >
            <img :src="decImgDomain(item.img)" />
          </div>
        </div>
      </div>
      <!-- 热区-tap-->
      <div class="tap" v-else-if="arg.styleArg === 'tap'">
        <img class="imgH" :src="decImgDomain(arg.ids[0].img)" />
      </div>
      <!-- 垂直叠放-colum -->
      <template v-else-if="arg.styleArg === 'column'">
        <div
          class="colum"
          v-for="(item, i) in arg.ids"
          :key="i"
          :style="{
            paddingRight: space + 'px',
            paddingLeft: space + 'px',
            paddingTop: i == 0 ? 0 : lacuna + 'px',
          }"
        >
          <img class="imgH" :src="decImgDomain(item.img)" />
        </div>
      </template>
      <template v-else>
        <div class="colum">
          <img class="imgH" :src="decImgDomain(arg.img)" />
        </div>
      </template>
    </template>
    <template v-else>
      <div class="colum">
        <img class="imgH" :src="decImgDomain('')" />
      </div>
    </template>
  </div>
</template>

<script>
// 设置广告
export default {
  inject: ["decImgDomain", "$isEmptyObj"],
  props: {
    tab: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      arg: null,
      img: {},
      imgH: "",
    };
  },
  watch: {
    "tab.refresh": function () {
      this.initData();
    },
  },
  computed: {
    space() {
      if (this.arg.styleArg === "colum") this.arg.space = 0;
      return this.arg.space || 0;
    },
    lacuna() {
      return this.arg.lacuna || 0;
    },
    scrollW() {
      if (this.arg.styleArg === "row") {
        let num = this.arg.rowNum || 1;
        return parseInt((1 / num) * 10000) / 100 + "%";
      }
    },
  },
  created() {
    this.arg = this.tab.arg;
    this.initData();
  },
  methods: {
    initData() {
      const that = this;
      function imgLoad(url, callback) {
        let img = new Image();
        img.onload = () => {
          callback({ height: img.height, width: img.width });
        };
        img.onerror = () => {
          callback({ height: 200, width: 200 });
        };
        img.src = url;
      }
      if (this.arg.styleArg == "row") {
        const result = this.arg.ids || [];
        const firstImg =
          result.length > 0
            ? this.decImgDomain(result[0] && result[0].img)
            : "";
        const len = this.arg.rowNum || 1;
        if (firstImg) {
          const fn = (img) => {
            const imgH =
              parseInt(((img.height * 375) / img.width / len) * 100) / 100;
            that.imgH = imgH > 0 ? imgH + "px" : "";
            that.firstImg = firstImg;
            that.img = img;
          };
          if (firstImg != this.img.url || !this.img.height) {
            imgLoad(firstImg, fn);
          } else {
            fn(that.img);
          }
        }
      }
    },
  },
};
</script>
