<template>
  <div v-if="show">
    <basicPop :pop="pop" @closeClick="closeClick">
      <div class="container">
        <exposure-item
          @click.native="() => goToBuy(item)"
          v-lz-click="'5'"
          v-for="(item, index) in goods"
          :key="index"
          :exposure="item"
        />
        <div class="bottom-line">—— 没有更多了 ——</div>
      </div>
    </basicPop>
  </div>
</template>

<script>
import basicPop from "./hdzxtbasicPop.vue";
import exposureItem from "../../logicalComponent/recommend/exposureStepOrd/components/exposureItem.vue";
import apis1 from "../../../util/apis1.js";
import { newToSkuPage } from "../../../util/tools.js";

const { breakThroughSkuList, storeGoodsPoint } = apis1;
export default {
  props: [],
  components: {
    basicPop,
    exposureItem
  },
  data() {
    return {
      pop: {
        title: "活动商品"
      },
      goods: []
    };
  },
  created() {
    // 自定义样式初始化
    if (this.styleData) {
      const { rightLineDiv, leftLineDiv, titlepop } = this.styleData;

      this.pop = {
        ...this.pop,
        rightLineDiv: rightLineDiv || {},
        leftLineDiv: leftLineDiv || {},
        titlepop: titlepop || {
          backgroundImage:
            "url(//img10.360buyimg.com/imgzone/jfs/t1/141588/29/18217/44025/5fd571b9Ef55329ec/42dba91b188b9dce.png)"
        }
      };
    }

    this.initData();
  },
  methods: {
    initData() {
      breakThroughSkuList(true, res => {
        this.goods = res.data.skuInfoList;
        console.log(res.data.skuInfoList, "breakThroughSkuList");
      });
    },
    closeClick() {
      this.handleClose();
    },
    goToBuy(sku) {
      if (this.isTemplate && !this.isWebClick) {
        return;
      }
      if (this.isWebClick) {
        return;
      }
      storeGoodsPoint(5);
      newToSkuPage(sku);
    }
  }
};
</script>

<style lang="scss">
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.1rem;
  width: fit-content;
  margin: 0.3rem auto 0 auto;
  padding: 0 0 0.3rem 0;
  max-height: 50vh;
  overflow: auto;
  .bottom-line {
    font-size: 0.24rem;
    color: rgb(150, 150, 150);
    text-align: center;
    grid-column-start: span 2;
    margin: 0.3rem 0;
  }
}
</style>
