<template>
  <div
    id="preferential"
    :style="styleData.preferential"
    ref="preferential"
    @click="styleClick('click', 'preferential')"
    @mousemove="styleClick('mousemove', 'preferential')"
    @mouseout="styleClick('mouseout')"
  >
    <div :style="styleData.titleImg"></div>

    <!-- ===========前几名下单===== -->
    <div
      :style="styleData.commodityBox"
      v-for="(item, index) in aggregate"
      :key="index"
    >
      <div class="fadeInDownBox" :style="styleData.fadeInDownBox">
        <div class="fadeInDownDiv" :style="styleData.fadeInDownDiv">
          前<span class="fadeInDownsPan" :style="styleData.fadeInDownsPan">{{
            topNum
          }}</span
          >名享<span class="fadeInDownsPan" :style="styleData.fadeInDownsPan">{{
            item.DiscountPrice
          }}</span
          >折优惠
        </div>
      </div>
      <!-- ======产品信息===== -->
      <div class="productDiv" :style="styleData.productDiv">
        <div :style="styleData.commodityImg">
          <img :style="styleData.productImg" :src="item.productImg" alt="" />
        </div>
        <div class="productBox" :style="styleData.productBox">
          <div class="ProductTitlebox" :style="styleData.ProductTitlebox">
            <div class="ProductTitle" :style="styleData.ProductTitle">
              {{ item.ProductTitle }}
            </div>
            <div class="Productcont" :style="styleData.Productcont">
              <div class="ProductcontLeft" :style="styleData.ProductcontLeft">
                <div v-if="item.awardStatus == '0'">
                  特惠价：￥<strong
                    class="PreferentialPrice"
                    :style="styleData.PreferentialPrice"
                    >{{ item.productPrice }}</strong
                  >
                  <span
                    class="PreferentialPriceSpan"
                    :style="styleData.PreferentialPriceSpan"
                    >￥{{ item.originalPrice }}</span
                  >
                </div>
                <div v-else>
                  京东价：￥<strong
                    class="PreferentialPrice"
                    :style="styleData.PreferentialPrice"
                    >{{ item.productPrice }}</strong
                  >
                </div>
                <div class="progressEnd" :style="styleData.progressEnd">
                  已抢
                  <span
                    class="progressEndSpan"
                    :style="styleData.progressEndSpan"
                    >{{ item.robbedCount }}</span
                  >件
                </div>
                <div class="progress" :style="styleData.progress">
                  <div class="progresscont" :style="styleData.progresscont">
                    <div
                      class="progressbg"
                      :style="`width:${item.progresscontSpan}%`"
                    >
                    </div>
                    <div style="width:100%;text-align:center;position: absolute;z-index: 1;color: #fff;">{{ item.progresscontSpan }}%</div>
                    <!-- <span class="progresscontSpan" :style="styleData.progresscontSpan">{{aggregate.progresscontSpan}}</span> -->
                  </div>
                  <div
                    class="ProductcontRight"
                    :style="styleData.ProductcontRight"
                  >
                    <span
                      class="ProductcontRightBtn"
                      :style="styleData.ProductcontRightBtn"
                      v-if="item.awardStatus == '0'"
                      @click="openrobPop(item)"
                      v-lz-click="'5'" v-lz-skuid="item.skuId"
                      >马上抢</span
                    >
                    <span
                      class="ProductcontRightBtnDis"
                      :style="styleData.ProductcontRightBtnDis"
                      v-else
                      >已抢购</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import apis1 from "../../../util/apis1.js";
let { getFrontNDiscount,storeGoodsPoint } = apis1;
import { newToSkuPage } from "../../../util/tools.js";
export default {
  props: [
    "datas",
    "keyData",
    "styleData",
    "isTemplate",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],
  data() {
    return {
      topNum: "",
      aggregate: [],
    };
  },
  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;
        console.log(datasAll,'************')
        if (datasAll) {
            console.log(datasAll.draw.prizeList,'445454545454')
          if (datasAll.draw.prizeList) {
            this.topNum = datasAll.activityCommonRule.rules.preferentialCount;
            console.log( datasAll.activityCommonRule.rules.preferentialCount,'445454545454')
            datasAll.draw.prizeList.forEach((ele) => {
            //   ele.remark = JSON.parse(ele.remark);
              this.aggregate.push({
                DiscountPrice:
                  (ele.remark.favorablePrice / ele.priceInfo).toFixed(2) * 10, //优惠折扣
                productPrice: ele.remark.favorablePrice, //特惠价格
                ProductTitle: ele.remark.skuName, //产品标题
                originalPrice: ele.priceInfo, //原价
                progresscontSpan: 0, // 已抢百分比
                robbedCount: 0, //已抢件数
                productImg: ele.remark.skuPicture,
                awardStatus: 0,
                openrob: "0", //判断是否"马上抢"(1是抢,0是已购)
              });
            });
          }
        } else {
          if (this.isWebClick) {
            this.aggregate = [
              {
                peopleNumber: "10", //前几名下单
                DiscountPrice: "9", //优惠折扣
                productPrice: "35.888", //特惠价格
                ProductTitle: "【测试商品勿拍】 升降式地'插座'", //产品标题
                originalPrice: "40.00", //原价
                progresscontSpan: 100, // 已抢百分比
                robbedCount: "0", //已抢件数
                awardStatus: 0,
                productImg:
                  "https://img10.360buyimg.com/imgzone/jfs/t1/181078/22/26780/321140/62b9110eE079e8ebc/3d087abcd61adcd4.png", //产品图片
              },
            ];
          } else {
            this.aggregate = [
              {
                peopleNumber: "10", //前几名下单
                DiscountPrice: "9", //优惠折扣
                productPrice: "35.888", //特惠价格
                ProductTitle: "【测试商品勿拍】 升降式地'插座'", //产品标题
                originalPrice: "40.00", //原价
                progresscontSpan: "100", // 已抢百分比
                robbedCount: "0", //已抢件数
                awardStatus: 0,
                productImg:
                  "https://img10.360buyimg.com/imgzone/jfs/t1/181078/22/26780/321140/62b9110eE079e8ebc/3d087abcd61adcd4.png", //产品图片
              },
            ];
          }
        }
      } else {
        // 获取前n名优惠
        getFrontNDiscount((initdatas) => {
          console.log(initdatas.data);
          if (initdatas.data) {
            let data = initdatas.data;
            this.topNum = data.topNum;
            data.topNDiscountDrawVoList.forEach((ele) => {
              ele.remark = JSON.parse(ele.remark);
              this.aggregate.push({
                id: ele.id,
                skuId:ele.remark.skuId,
                DiscountPrice:
                  (ele.remark.favorablePrice / ele.jdprice).toFixed(2) * 10, //优惠折扣
                productPrice: ele.remark.favorablePrice, //特惠价格
                ProductTitle: ele.remark.skuName, //产品标题
                originalPrice: ele.jdprice, //原价
                progresscontSpan: ele.progressBar, // 已抢百分比
                robbedCount: ele.hasSendNum, //已抢件数
                productImg: ele.remark.skuPicture,
                awardStatus: ele.awardStatus,
              });
            });
          }
        });
      }
    },
    openrobPop(skuId) {
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }
      storeGoodsPoint(5)
      newToSkuPage(skuId);
    },
  },
};
</script>
<style scoped>
.bounceInDown {
  animation: mymove 0.7s;
}
@keyframes mymove {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  60% {
    opacity: 1;
    transform: translateY(20px);
  }
  80% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.fadeInDownDiv {
  animation: fadeinT 1s;
}
@keyframes fadeinT {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.progressbg {
  background: #fb3836;
  height: 0.3rem;
  color: #fff;
  text-align: center;
  line-height: 0.3rem;
  font-size: 0.2rem;
  border-radius: 0.15rem;
  float: right;
  font-weight: 300;
}
</style>
