<template>
  <div class="exclusivebigBox" :style="styleData.exclusivebigBox" ref="exclusive"
    @click="styleClick('click', 'exclusive')" @mousemove="styleClick('mousemove', 'exclusive')"
    @mouseout="styleClick('mouseout')">
    <div v-if="productList.length>0" :style="styleData.exclusiveMsg">
      <span v-if="productList[0].freqBound == 0">同一账号同一商品，可多次享受专享价</span>
      <span v-if="productList[0].freqBound == 1">同一账号同一商品，只可享受一次专享价，以专享价购买商品确认收货后取消订单，专享优惠不会再次发放</span>
    </div>
    <div class="exclusiveul" :style="styleData.exclusiveul">
      <div class="exclusiveli" :style="styleData.exclusiveli" v-for="item in productList" :key="item.skuId" @click="handleshoppclick(item)">
        <div class="exclusiveImgbigdiv" :style="styleData.exclusiveImgbigdiv">
          <div class="exclusiveImgbox" :style="styleData.exclusiveImgbox">
            <img :src="item.productImg" class="exclusiveImg" :style="styleData.exclusiveImg" />
            <div class="fd-img-bottom" :style="styleData.fdImgBottomStyle">
              <div class="fd-img-title" :style="styleData.fdImgTitleStyle"></div>
            </div>
          </div>
        </div>
        <div class="exclusivecontdiv" :style="styleData.exclusivecontdiv">
          <div class="exclusivetitle" :style="styleData.exclusivetitle">
            {{ item.productName }}
          </div>
          <!-- <div class="fd-surplus" :style="styleData.surplus">
            剩余：{{ item.stock >= 0 ? item.stock : "*" }}件
          </div> -->
          <div class="fd-surplus" :style="styleData.surplus">
            京东价：￥<span :style="styleData.originalpricespan">{{ item.jdprice }}</span>
          </div>
          <div class="detaildiv" :style="styleData.detaildiv">
            <div class="detailboxleft" :style="styleData.detailboxleft">
              <div class="detailprice" :style="styleData.detailprice">
                <span :style="styleData.detailpriceTile">促销价:￥{{
                    item.promotionalPrice 
                  }}</span>
              </div>
            </div>
            <div class="detailboxright" :style="styleData.detailboxright"
              v-lz-click="'5'" v-lz-skuid="item.skuId">
              抢购
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { newToSkuPage } from "../../../util/tools.js";
import apis1 from "../../../util/apis1.js";
let { getExclusiveGoods, storeGoodsPoint } = apis1;
export default {
  props: [
    "datas",
    "keyData",
    "styleData",
    "isTemplate",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],

  data() {
    return {
      productList: [],
      styleDataOld: {},
    };
  },
  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,
          styleDataOld: this.styleDataOld,
          c_this: this,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {
      if (this.isTemplate) {
        var datasAll = this.templateData;
        if (datasAll) {
          if (datasAll.exclusivePrice.exclusivePriceList) {
            this.productList = datasAll.exclusivePrice.exclusivePriceList;
            console.log(this.productList, "*********");
            this.productList.forEach((ele) => {
              ele.jdprice = ele.price;
              ele.productImg = ele.imagePath;
              ele.productName = ele.name;
              ele.promotionalPrice = ele.promotionalPrice;
              ele.stock = ele.skuMaxNum;
            });
          }
        } else {
          if (this.isWebClick) {
            this.productList = [
              {
                awardStatus: '0',
                jdprice: "15.00",
                productImg:
                  "https://img10.360buyimg.com/imgzone/jfs/t1/41365/4/19153/79682/62c29bdbEf2a268b5/1eb49a701d640808.png",
                productName: "测试",
                promotionalPrice: '14.00',
                stock: 1,
              },
            ];
          } else {
            this.productList = [
              {
                awardStatus: '0',
                jdprice: "15.00",
                productImg:
                  "https://img10.360buyimg.com/imgzone/jfs/t1/41365/4/19153/79682/62c29bdbEf2a268b5/1eb49a701d640808.png",
                productName: "测试",
                promotionalPrice: '14.00',
                stock: 1,
              },
            ];
          }
        }
      } else {
        // 获取曝光商品
        getExclusiveGoods((initdatas) => {
          console.log(initdatas.data);
          if (initdatas.data) {
            this.productList = initdatas.data;
          }
        });
      }
    },
    handleshoppclick(item) {
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }
      let timer = 0;
      if (item.stock == 0 && item.awardStatus == '1' && item.createTime < 1712109600000) {
        timer = 1500;
        this.$toast("优惠人数已发完，无法以专享价格购买商品");
      }
      setTimeout(()=>{
        console.log(item);
        storeGoodsPoint(5)
        newToSkuPage(item);
      },timer)
      
    },
  },
};
</script>
<style>
.fd-img-bottom {
  position: absolute;
  width: 100%;
  height: 0.74rem;
  bottom: 0;
  left: 0;
  background: url("//img10.360buyimg.com/imgzone/jfs/t1/3783/32/19852/15877/62bd4681Eb2255397/2eee7b6c6965b48b.png")
    no-repeat;
  background-size: 100% 100%;
}
.fd-img-title {
  position: absolute;
  width: 1.49rem;
  height: 0.27rem;
  bottom: 0.15rem;
  left: 0.2rem;
  background: url("//img10.360buyimg.com/imgzone/jfs/t1/115328/8/26713/1877/62c2a95fE7c247d0e/003abcb48b23c5b6.png")
    no-repeat;
  background-size: 100% 100%;
}
</style>
