<template>
  <div class="dec-goodSpecial" :style="className">
    <img v-if="bgImg" class="img" :src="bgImg" alt="" />
    <div class="default" v-else>活动图</div>
  </div>
</template>

<script>
// 设置分组
export default {
  inject: ["decAxios", "decImgDomain"],
  props: {
    tab: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      arg: this.tab.arg,
      bgImg: "",
    };
  },
  computed: {
    className() {
      let arr = [];
      if (this.arg.space) arr.push(`margin: 0 ${this.arg.space}px`);
      if (this.arg.radius) arr.push(`borderRadius: ${this.arg.radius}px`);
      if (this.arg.bgColor && this.arg.bgColor != "transparent")
        arr.push(`background-color: ${this.arg.bgColor}`);
      if (this.arg.bgSize)
        arr.push(`padding: 0 ${50 - this.arg.bgSize * 0.5}%`);
      return arr.join(";");
    },
  },
  watch: {
    "tab.refresh": function () {
      this.initData();
    },
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      const api = this.decAxios.getGoodSpecialData;
      const select = this.arg.id,
        that = this;
      if (select.id) {
        api({ id: select.id }).then(({ code, result }) => {
          that.bgImg = "";
          if (code == 200) that.bgImg = that.decImgDomain(result.picture);
        });
      } else {
        this.bgImg = "";
      }
    },
  },
};
</script>
