<template>
  <view class="dec-goodSpecial" :style="className" v-if="bgImg" @tap="go">
    <image class="img" mode="widthFix" :src="bgImg" />
  </view>
</template>

<script>
// 设置分组
export default {
  inject: ["decAxios", "decImgDomain"],
  props: {
    tab: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      bgImg: "",
    };
  },
  computed: {
    className() {
      const arg = this.tab.arg;
      let arr = [];
      if (arg.space) arr.push(`margin: 0 ${arg.space}px`);
      if (arg.radius) arr.push(`borderRadius: ${arg.radius}px`);
      if (arg.bgColor && arg.bgColor != "transparent")
        arr.push(`background-color: ${arg.bgColor}`);
      if (arg.bgSize) arr.push(`padding: 0 ${50 - arg.bgSize * 0.5}%`);
      return arr.join(";");
    },
  },
  created() {
    const arg = this.tab.arg;
    const api = this.decAxios.getGoodSpecialData;
    const select = 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 = "";
    }
  },
  methods: {
    go() {
      this.decAxios.decEventHandler(
        {
          moudle: "goodSpecial",
          type: "detail",
          desc: "跳专区商品页",
        },
        this.tab.arg.id,
        null
      );
    },
  },
};
</script>
