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

<script>
// 设置分组
export default {
  inject: ["decAxios", "decImgDomain"],
  props: {
    tab: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      endName: "",
      arg: this.tab.arg,
      bgImg: "",
    };
  },
  watch: {
    "tab.refresh": function () {
      this.initData();
    },
  },
  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(";");
    },
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      const api = this.decAxios.getGoodFineData;
      const select = this.arg.id,
        that = this;
      if (select.id) {
        api({ id: select.id }).then(({ code, result }) => {
          that.bgImg = "";
          that.endName = "";
          if (code == 200) {
            result = result || {};
            const endTime = (result.endTime || "2022-5-20").replace(/-/g, "/");
            const startTime = (result.startTime || "2022-5-20").replace(
              /-/g,
              "/"
            );
            if (that.initTime(endTime, startTime) != "end") {
              that.bgImg = that.decImgDomain(result.picture);
            } else {
              that.endName = "活动已结束";
            }
          }
        });
      } else {
        this.bgImg = "";
      }
    },
    initTime(endTime, startTime) {
      const end = new Date(endTime),
        start = new Date(startTime),
        current = new Date();
      let state = "";
      if (current - start > 0) {
        if (end - current > 0) {
          state = "ing";
        } else {
          state = "end";
        }
      } else {
        state = "start";
      }
      return state;
    },
  },
};
</script>
