<template>
  <div class="dec-goodIntegral">
    <div class="group-tab">
      <div class="tab-wrap">
        <div
          v-for="(item, i) in tabs"
          :key="item"
          class="tab-item"
          :class="{ active: active == i }"
        >
          <span class="text">{{ item }}</span>
        </div>
      </div>
    </div>
    <div class="d-top">
      <div class="d-two">
        <div v-for="(good, i) in goods" :key="i" class="d-wrap">
          <good-short :good="good" :show="show" :imgH="imgH"></good-short>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 设置分组
import goodShort from "./goodShort.vue";
import variable from "../../style/variable.js";

export default {
  inject: ["decAxios", "decImgDomain"],
  components: {
    goodShort,
  },
  props: {
    tab: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      arg: {},
      tabs: ["全部", "1-1000", "1001-5000", "5001-10000", "10000以上"],
      goods: [], // 商品分组完整商品数据
      active: 0, // 选中的分组
      firstImg: "",
      imgH: "118px",
    };
  },
  created() {
    this.arg = this.tab.arg;
    this.show = this.arg.show;
    //图片直接默认是正方形图片
    const w2 = variable["@phoneWidth"] - variable["@space"] * 3;
    const h2 = parseInt(w2 * 50) / 100;
    this.imgH = h2 + "px";
    this.initData();
  },
  watch: {
    "arg.dataNum": function () {
      this.initData();
    },
    "arg.autoLoad": function () {
      this.initData();
    },
  },
  methods: {
    initData() {
      const api = this.decAxios.getGoodIntegralData;
      const pageSize = this.arg.dataNum || 10;
      api({ pageNo: 1, pageSize, range: "" }).then((res) => {
        const records = (res.result && res.result.records) || res.result || [];
        if (records.length > 0) {
          this.goods = records;
        } else {
          this.goods = ["1", "2"].map((i) => {
            return {
              id: i,
              targetName: "积分商品名称",
              integral: "200",
              stock: 0,
            };
          });
        }
      });
    },
  },
};
</script>
