<template>
  <div
    class="exposureGoodsBoxC"
    :style="styleData.goumaiBigbox"
    ref="exposureGoods"
    @click="styleClick('click', 'exposureGoods')"
    @mousemove="styleClick('mousemove', 'exposureGoods')"
    @mouseout="styleClick('mouseout')"
  >
    <div v-if="isshow" :style="styleData.goodbg">
      <div :style="styleData.goodTitleStyle" v-if="isShowTitle">
        <img :style="styleData.img" :src="styleData.img.imageUrl" />
      </div>
      <div
        :style="styleData.goodTitleStyle"
        style="text-align: center"
        v-if="isShowTitleByWords"
      >
        店长推荐
      </div>
      <div :style="styleData.goodulbox">
        <div
          v-for="(item, index) in exposureList"
          :key="index"
          :style="styleData.goodlibox"
        >
          <div>
            <a
              href="javascript:;"
              style="display: block; width: 3.4rem; height: 3.4rem"
              ><img
                alt=""
                :src="item.imagePath ? item.imagePath : item.skuImg"
                style="width: 100%; height: 100%"
              />
            </a>
            <div class="title" v-if="titleShow">
              <span class="titleSpan">{{
                item.name ? item.name : item.skuName
              }}</span>
            </div>
            <div class="detail" v-if="titleShow">
              <!---->
              <div class="price">
                <span class="price1">￥</span
                >{{ item.price ? item.price : item.skuPrice | toFixed }}
              </div>
              <div
                v-if="!isgoumaiShow"
                class="attention"
                v-lz-click="'5'" v-lz-skuid="item.skuId"
                @click="goToBuy(item)"
              >
                抢购
              </div>
            </div>
          </div>
          <div
            v-if="isgoumaiShow"
            class="attention2"
            v-lz-click="'9'"
            @click="goToBuy(item)"
            :style="styleData.goumai"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { newToSkuPage } from "../../../util/tools.js";
import apis1 from "../../../util/apis1.js";
let {storeGoodsPoint} = apis1
export default {
  props: [
    "datas",
    "keyData",
    "styleData",
    "isTemplate",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      exposureList: [],
      styleDataOld: {},
      isCustomSwitching: "",
      isgoumaiShow: false, //是否显示购买按钮图片形式
      isShowTitle: false, //是否显示title
      isShowTitleByWords: false, //是否显示title文字
      isshow: false, //没有曝光商品页面不显示
      titleShow: true,
    };
  },
  filters: {
    toFixed: function (value) {
      console.log(32,value)
      if (!value) {
        return "";
      } else {
        return Number(value).toFixed(2);
      }
    },
  },
  mounted() {},
  created() {
    this.initData();
     this.isgoumaiShow = this.datas.isgoumaiShow;
    this.isShowTitle = this.datas.isShowTitle;
    this.isShowTitleByWords = this.datas.isShowTitleByWords;
    this.titleImg = this.datas.titleImg;
    this.titleShow =
      this.datas.titleShow == false ? this.datas.titleShow : true;
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
  },
  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;
      console.log('datasAllxhy',datasAll)
      if (this.isTemplate == true) {
        if (this.isWebClick) {
          this.exposureList = [
            {
              skuImg:
                "http://img10.360buyimg.com/n0/jfs/t1/127444/23/4432/144265/5edef4d9E0acddac4/7fd90344735c0059.jpg",
              skuName:
                "滴露Dettol 衣物除菌液 清新柠檬 750ml 高效杀菌除螨 配合洗衣液消毒液使用 孕妇儿童衣物一起洗",
              skuPrice: "27.6",
              skuId: "27.6",
            },
          ];
        }

        if (datasAll) {
          if(datasAll.orderGift.exposedData.exposedGoods.length>0 || datasAll.exposedData.exposedGoods.length>0) {
            this.isshow = true;
          } else {
            this.isshow = false;
          }
          if (datasAll.orderGift.assignGoodsFlag == "1") {
            // 指定商品
            this.exposureList = datasAll.orderGift.exposedData.exposedGoods;
            for (var i = 0; i < this.exposureList.length; i++) {
              this.exposureList[i].skuImg =
                datasAll.goodsData.exposedGoods[i].imagePath;
              this.exposureList[i].skuName =
                datasAll.goodsData.exposedGoods[i].name;
              this.exposureList[i].skuPrice =
                datasAll.goodsData.exposedGoods[i].price;
              this.exposureList[i].skuId =
                datasAll.goodsData.exposedGoods[i].skuId;
            }
          } else {
            // 曝光商品
            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;
            }
          }
        }
      } else {
        let goodsList = apis1[this.datas.goodsList];
        goodsList((data) => {
          this.exposureList = data.data.skuInfoList;
          if(this.exposureList.length>0) {
            this.isshow = true;
          } else {
            this.isshow = false;
          }
        });
      }
    },
    goToBuy(sku) {
      storeGoodsPoint(5)
      newToSkuPage(sku);
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.exposureGoodsBoxC {
  .titleSpan {
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 0.3rem;
    color: #262626;
    padding: 0 0.2rem;
    margin: 0.2rem 0 0.43rem;
    box-sizing: border-box;
  }
  .detail {
    width: 3rem;
    height: 0.6rem;
    display: flex;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/159308/25/21187/7832/619b8d96Ee8b26a4f/a4dd481902c8e6e6.png);
    background-size: 100%;
    margin: 0 auto 0.2rem;
    .price {
      width: 2.05rem;
      height: 0.6rem;
      line-height: 0.6rem;
      font-size: 0.3rem;
      color: #fff;
      text-align: left;
      padding-left: 0.2rem;
      box-sizing: border-box;
      .price1 {
        font-size: 0.2rem;
      }
    }
    .attention {
      width: 0.95rem;
      height: 0.6rem;
      line-height: 0.6rem;
      font-size: 0.3rem;
      color: #ff4467;
      text-align: center;
    }
  }
}
</style>
