<template>
  <div class="extend-commodity" v-if="list.length">
    <div class="extend-commodity--box">
      <a v-if="list[0].l" :href="list[0].l" target="_blank">
        <img :src="list[0].u" alt="" />
      </a>
      <img v-else :src="list[0].u" alt="" />
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'extend-commodity-box',
  data() {
    return {
      spread: this.$route.query.spread,
      list: []
    };
  },
  computed: {
    ...mapGetters({
      advertMiddle: 'advertMiddle'
    }),
    commodity() {
      const list = this.advertMiddle.list || [];
      return list.map(x => {
        return {
          e: null,
          s: null,
          l: x.advertLink,
          u: x.advertImgUrl
        };
      });
    }
  },
  mounted() {
    this.$Bus.$on('bus-commodity', this.setCommodity);
  },
  methods: {
    setCommodity(list) {
      this.list = list.map(x => {
        let l = x.l;
        if (this.spread) {
          l += `${l.split('?')[1] ? '&' : '?'}spread=${this.spread}`;
        }
        x.l = l;
        return x;
      });
    },
    _close() {
      this.isShow = false;
    }
  },
  watch: {
    commodity(nVal) {
      this.setCommodity(nVal);
    }
  },
  beforeDestroy() {
    this.$Bus.$off('bus-commodity', this.setCommodity);
  }
};
</script>
<style lang="less" scoped>
.extend-commodity {
  position: relative;
  padding-top: 150/1080 * 100%;
  height: 0;
  .extend-commodity--box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    a,
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
