<template>
  <div v-if="show">
    <basicPop :pop="pop" @closeClick="closeClick">
      <div class="pop-title">
        <div v-if="assignGoodsType == 1">
          仅<b>购买以下指定商品</b>，可参与活动
        </div>
        <div v-if="assignGoodsType == 2">
          <div v-if="priceTypeFlag == 0">
            以下所列商品，<b>不参与本次活动</b>
          </div>
          <div v-if="priceTypeFlag == 1">
            <b>以下商品不参与活动</b>，若与活动商品合并下单，将导致整单无法参与，<b>请单独下单</b>。
          </div>
        </div>
      </div>
      <div class="container-box">
        <div class="container" @click="goToBuy(item)" v-lz-click="'5'" v-for="(item) in goods"
          :key="item.skuId" >
          <img alt="商品" :src="item.imagePath ? item.imagePath : item.skuImg" />
          <div class="exposure-info">
            <span class="name">
              {{ item.name ? item.name : item.skuName }}
            </span>
            <div class="price">
              <span>￥</span>
              {{ item.price ? item.price : item.skuPrice }}
            </div>
          </div>
        </div>
        <div class="bottom-line">—— 没有更多了 ——</div>
      </div>
    </basicPop>
  </div>
</template>

<script>
import basicPop from "./hdzxtbasicPop.vue";
import apis1 from "../../../util/apis1.js";
import { newToSkuPage } from "../../../util/tools.js";

const { getOrderActivityGoods, storeGoodsPoint,getOrderGoods } = apis1;
export default {
  props: [],
  components: {
    basicPop
  },
  data() {
    return {
      pop: {
        title: "活动商品"
      },
      goods: [],
      priceTypeFlag:2
    };
  },
  created() {
    console.log(this.assignGoodsType,"assignGoodsType")
    this.priceTypeFlag = sessionStorage.getItem("priceTypeFlag");
    // 自定义样式初始化
    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.pop.title = this.assignGoodsType == '1' ? '活动商品' : '排除商品'

    this.initData();
  },
  methods: {
    initData() {
      if(sessionStorage.getItem("activityType") == '10088'){
        getOrderGoods(1, 1000, res => {
          this.goods = res.data.records;
        });
      }else{
         getOrderActivityGoods(res => {
          this.goods = res.data.skuInfoList;
        });
      }
     
    },
    closeClick() {
      this.submit();
    },
    goToBuy(sku) {
      if (this.isTemplate && !this.isWebClick) {
        return;
      }
      if (this.isWebClick) {
        return;
      }
      storeGoodsPoint(5);
      newToSkuPage(sku);
    }
  }
};
</script>

<style lang="scss">
.pop-title{
  font-size: .24rem;
  padding: 0 0.3rem;
  text-align: center;
  margin-top: .15rem;
}
.container-box {
  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: 60vh;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  .bottom-line {
    font-size: 0.24rem;
    color: rgb(150, 150, 150);
    text-align: center;
    grid-column-start: span 2;
    margin: 0.3rem 0;
  }
}
.container {
  height: 4.6rem;
  width: 3.15rem;
  background-color: white;
  padding: 0.18rem 0.26rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;

  img {
    width: calc(3.15rem - 0.52rem);
    height: calc(3.15rem - 0.52rem);
  }

  .exposure-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.24rem;
    gap: 0.15rem;
    width: 100%;
    .name {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; // 控制多行的行数
      -webkit-box-orient: vertical;
    }

    .price {
      color: #e2231a;
    }
  }
}
</style>
