<template>
  <div
    class="back"
    :style="styleData.backStyle"
    v-if="exposureInfoList.skuFlag"
    ref="exposureGoods1"
    @click="styleClick('click', 'exposureGoods1')"
    @mousemove="styleClick('mousemove', 'exposureGoods1')"
    @mouseout="styleClick('mouseout')"
  >
    <div class="imgTitle" :style="styleData.imgTitleStyle"></div>
    <div class="goodClass" :style="styleData.goodClassStyle">
      <div class="goodList" :style="styleData.goodListStyle">
        <div
          class="goodsItem"
          v-for="(item, index) in exposureList"
          :key="index"
          :style="styleData.goodsItemStyle"
          v-if="activityType == 10032"
        >
          <div
            class="goodImg"
            @click="goToBuy(item.skuId)"
            v-lz-click="'5'"
            :style="styleData.goodImgStyle"
          >
            <img class="Img1" :src="item.skuImg" :style="styleData.Img1Style" />
          </div>
          <div class="goodBottom" :style="styleData.goodBottomStyle">
            <span class="goodName" :style="styleData.goodNameStyle">
              {{ item.skuName }}
            </span>
            <div class="displayGood">
              <span
                :style="styleData.goodPriceStyle"
                v-if="item.skuPrice > 0"
              >
                ￥{{ item.skuPrice }}
              </span>
              <img
                src="https://img10.360buyimg.com/imgzone/jfs/t1/19455/28/5018/3035/5c383571E95e9c4b6/ab56c4c5831708b8.png"
                @click="goToBuy(item.skuId)"
                v-lz-click="'5'"
                style="
                  display: inline-block;
                  background-size: 100%;
                  width: 0.88rem;
                  height: 0.4rem;
                  color: #fff;
                "
              />
            </div>
          </div>
        </div>
        <div
          class="goodsItem"
          v-for="(item, index) in exposureList"
          :key="index"
          :style="styleData.goodsItemStyle"
          v-if="activityType == 10033"
        >
          <div
            class="goodImg"
            @click="goToBuy(item.skuId)"
            v-lz-click="'5'"
            :style="styleData.goodImgStyle"
          >
            <img class="Img1" :src="item.skuImg" :style="styleData.Img1Style" />
          </div>
          <div class="goodBottom" :style="styleData.goodBottomStyle">
            <span class="goodName" :style="styleData.goodNameStyle">
              {{ item.skuName }}
            </span>
            <div class="displayGood">
              <span
                :style="styleData.goodPriceStyle"
                v-if="item.skuPrice > 0"
              >
                ￥{{ item.skuPrice }}
              </span>
              <img
                src="https://img10.360buyimg.com/imgzone/jfs/t1/37474/33/12482/5382/5d1066baEa718e504/c53f5639c4b11c26.png"
                @click="goToBuy(item.skuId)"
                v-lz-click="'5'"
                style="
                  display: inline-block;
                  background-size: 100%;
                  width: 1.3rem;
                  height: 0.4rem;
                  color: #fff;
                  text-decoration: none;
                "
              />
            </div>
          </div>
        </div>
        <div
          class="goodsItem"
          v-for="(item, index) in exposureList"
          :key="index"
          :style="styleData.goodsItemStyle"
          v-if="activityType != 10032 && activityType != 10033"
        >
          <div
            class="goodImg"
            @click="goToBuy(item.skuId)"
            v-lz-click="'5'"
            :style="styleData.goodImgStyle"
          >
            <img class="Img1" :src="item.skuImg" :style="styleData.Img1Style" />
          </div>
          <div class="goodBottom" :style="styleData.goodBottomStyle">
            <p class="goodName" :style="styleData.goodNameStyle">
              {{ item.skuName }}
            </p>
            <p
              class="goodPrice"
              :style="styleData.goodPriceStyle"
              v-if="item.skuPrice > 0"
            >
              ￥{{ item.skuPrice }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { goToSkuPage } from "../../../util/tools.js";
import apis1 from "../../../util/apis1.js";
import store from "../../../store/store";

export default {
  props: [
    "isTemplate",
    "datas",
    "keyData",
    "styleData",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      exposureList: [],
      exposureInfoList: [],
      shareFlag: false,
      shareUserId: "",
      styleDataOld: {},
      isCustomSwitching: "",
    };
  },
  mounted() {},
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
  },
  methods: {
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          c_this: this,
          isCustomSwitching: this.isCustomSwitching,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {
      var datasAll = this.templateData;
      this.activityType = sessionStorage.getItem("activityType");

      if (this.isTemplate == true) {
        if (this.isWebClick) {
          this.exposureInfoList.skuFlag = true;
          this.exposureList = [
            {
              skuImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/56052/24/8445/190078/5d5f9568Eb80d16db/ff06e4e40d59adef.jpg",
              skuName:
                "衣物除菌液 清新柠檬 750ml 高效杀菌除螨 配合洗衣液消毒液使用 孕妇儿童衣物一起洗",
              skuPrice: "27.6",
              skuId: "27.6",
            },
            {
              skuImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/56052/24/8445/190078/5d5f9568Eb80d16db/ff06e4e40d59adef.jpg",
              skuName:
                "衣物除菌液 清新柠檬 750ml 高效杀菌除螨 配合洗衣液消毒液使用 孕妇儿童衣物一起洗",
              skuPrice: "27.6",
              skuId: "27.6",
            },
          ];
        }
        console.log(111111,this.exposureList)
        this.$toast("活动预览，仅供查看");
        if (datasAll) {
          console.log('datasAll9999999',datasAll)
          this.exposureList = datasAll.exposedData.exposedGoods;
          for (var i = 0; i < this.exposureList.length; i++) {
            this.exposureList[i].skuImg =
              datasAll.exposedData.exposedGoods[i].imagePath;
            this.exposureList[i].skuName =
              datasAll.exposedData.exposedGoods[i].name;
            this.exposureList[i].skuPrice =
              datasAll.exposedData.exposedGoods[i].price;
            this.exposureList[i].skuId =
              datasAll.exposedData.exposedGoods[i].skuId;
          }

          // 判断有没有显示的商品
          if (this.exposureList.length > 0) {
            this.exposureInfoList.skuFlag = true;
          }
          console.log('datasAll8888888',this.exposureList)
        }
      } else {
        this.shareFlag = this.datas.shareFlag;
        this.shareUserId = store.state.shareUserId;
        if (this.shareFlag == true) {
          let goodsList = apis1[this.datas.goodsList];
          goodsList(this.shareUserId, (data) => {
            this.exposureInfoList = data.data;
            this.exposureList = data.data.skuInfoList;
          });
        } else {
          let goodsList = apis1[this.datas.goodsList];
          goodsList((data) => {
            this.exposureInfoList = data.data;
            this.exposureList = data.data.skuInfoList;
          });
        }
      }
    },
    goToBuy(sku) {
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      goToSkuPage(sku);
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.displayGood {
  display: flex;
  justify-content: space-between;
  padding: 0 0.1rem;
}
</style>
