<template>
  <view class="item-wrap" v-if="goods && goods.length > 0">
    <!-- 商品为:字下图img -->
    <template v-if="arg === 'img'">
      <view class="img-wrap" v-for="(product, i) in goods" :key="i">
        <good-img :good="product" :show="show" :simple="false" imgArg="big" />
      </view>
    </template>
    <!-- 商品为: 拼图join-左右 img['4']??-->
    <template v-else-if="arg === 'join'">
      <view class="join-wrap" v-for="(item, j) in goods" :key="j">
        <view class="big-wrap">
          <good-img :good="item.big" :show="show" :imgH="img.h2" />
        </view>
        <view class="small-wrap">
          <view class="item">
            <good-img :good="item.small[0]" :show="show" imgArg="small" />
          </view>
          <view class="item">
            <good-img :good="item.small[1]" :show="show" imgArg="small" />
          </view>
        </view>
      </view>
    </template>
    <!-- 商品为: 组图concat-上下-->
    <template v-else-if="arg === 'concat'">
      <view class="concat-wrap" v-for="(item, k) in goods" :key="k">
        <view class="big-wrap">
          <good-short
            @refreshBuyNum="refreshBuyNum"
            :good="item.big"
            :show="show"
            imgArg="big"
            :imgH="img.h1"
          />
        </view>
        <view class="small-wrap">
          <view class="item">
            <good-img :good="item.small[0]" :show="show" :imgH="img.h2" />
          </view>
          <view class="item">
            <good-img :good="item.small[1]" :show="show" :imgH="img.h2" />
          </view>
        </view>
      </view>
    </template>
    <!-- 商品为:列表list-x -->
    <template v-else-if="'list,list-x'.indexOf(arg) > -1">
      <view class="list-wrap" v-for="(product, l) in goods" :key="l">
        <good-long
          @refreshBuyNum="refreshBuyNum"
          :good="product"
          :count="cartListMap[product.id] || 0"
          :show="show"
          imgArg=""
          :imgW="img.w40"
        />
      </view>
    </template>
    <!-- 商品为:滚两图scroll-two  -->
    <template v-else-if="'scroll-two' == arg">
      <swiper
        class="swiper-scroll"
        :indicator-dots="false"
        :style="{ height: scrollH }"
      >
        <swiper-item v-for="(product, m) in goods" :key="m">
          <view class="swiper-wrap">
            <view v-for="(item, h) in product" :key="h" class="swiper-item">
              <good-img :good="item" :show="show" :imgH="img.h2" />
            </view>
          </view>
        </swiper-item>
      </swiper>
    </template>
    <!-- 商品为:滚三图scroll-three -->
    <template v-else-if="'scroll-three' == arg">
      <swiper
        class="swiper-scroll"
        :indicator-dots="false"
        :style="{ height: scrollH }"
      >
        <swiper-item v-for="(product, n) in goods" :key="n">
          <view class="swiper-wrap">
            <view
              v-for="(item, r) in product"
              :key="r"
              class="swiper-item three"
            >
              <good-short
                :moudle="moudle"
                :good="item"
                :show="show"
                :imgH="img.h3"
                imgArg="small"
              />
            </view>
          </view>
        </swiper-item>
      </swiper>
    </template>
    <!-- 商品为:三图,二图,大图 -->
    <template v-else-if="'three' == arg">
      <view v-for="(product, o) in goods" :key="o" class="item">
        <good-short
          :moudle="moudle"
          :good="product"
          :show="show"
          :imgH="img.h3"
          imgArg="small"
        />
      </view>
    </template>
    <template v-else-if="'double,two'.indexOf(arg) > -1">
      <view v-for="(product, p) in goods" :key="p" class="item">
        <good-short
          @refreshBuyNum="refreshBuyNum"
          :moudle="moudle"
          :count="cartListMap[product.id] || 0"
          :good="product"
          :show="show"
          :imgH="img.h2"
        />
      </view>
    </template>
    <template v-else>
      <view v-for="(product, q) in goods" :key="q" class="item">
        <good-short
          @refreshBuyNum="refreshBuyNum"
          :moudle="moudle"
          :count="cartListMap[product.id] || 0"
          :good="product"
          :show="show"
          :imgH="img.h1"
          imgArg="big"
        />
      </view>
    </template>
  </view>
</template>

<script>
// 设置列表
import goodShort from "./goodShort.vue";
import goodLong from "./goodLong.vue";
import goodImg from "./goodImg.vue";

export default {
  inject: ["decAxios"],
  components: {
    goodShort,
    goodLong,
    goodImg,
  },
  props: {
    moudle: {
      type: String,
      default: "goodList",
    },
    arg: {
      type: String,
      default: "",
    },
    groupKey: {
      type: String,
      default: "left",
    },
    goodKey: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      goodIds: [],
      cartListMap: {}, //购物车列表对象
      goods: [],
      show: {},
      img: {},
    };
  },
  created() {
    const dataKey = `${this.groupKey}-${this.goodKey}`;
    let parent = {};
    // #ifdef H5
    parent = this.$parent.$parent.$parent;
    if (!parent.allGoods) parent = parent.$parent;
    if (!parent.allGoods) parent = parent.$parent;
    if (!parent.allGoods) parent = parent.$parent;
    // #endif
    // #ifndef H5
    parent = this.$parent;
    // #endif
    if (parent.allGoods) {
      this.goods = parent.allGoods[dataKey];
      if (this.goods && this.goods.length > 0) {
        this.img = parent.img;
        this.show = parent.show;
        if (!!this.show.bug) {
          //处理购买按钮的数量显示
          this.refreshBuyNum();
          //监听购物车局部刷新事件
          const decPageType = this.decAxios.getAppMemberData("decPageType");
          const emitKey = `refreshAppCartEvent${decPageType || "1"}`;
          uni.$on(emitKey, (e) => {
            this.refreshBuyNum(e);
          }); //全局购物车刷新事件
        }
      }
    }
  },
  computed: {
    scrollH() {
      if (this.arg == "scroll-two") {
        const h = parseInt((this.img.h2 || "").replace("px", "")) + 14;
        return h + "px";
      } else if (this.arg == "scroll-three") {
        const h = parseInt((this.img.h3 || "").replace("px", "")) + 14;
        return h + "px";
      }
      return "";
    },
  },
  watch: {
    goodKey(val) {
      if (val) {
        const dataKey = `${this.groupKey}-${this.goodKey}`;
        this.goods = this.$parent.allGoods[dataKey];
      }
    },
  },
  methods: {
    refreshBuyNum(e) {
      const obj = e || this.decAxios.getAppMemberData() || {}; //刷新购物车对象
      this.cartListMap = obj; //刷新购物车对象
    },
  },
  beforeDestroy() {
    const decPageType = this.decAxios.getAppMemberData("decPageType");
    const emitKey = `refreshAppCartEvent${decPageType || "1"}`;
    uni.$off(emitKey);
  },
};
</script>
