<template>
  <div
    v-if="isHelper == false"
    :style="styleData.bargainGoodDivAll"
    ref="bargainGoodNew"
    @click="styleClick('click', 'bargainGoodNew')"
    @mousemove="styleClick('mousemove', 'bargainGoodNew')"
    @mouseout="styleClick('mouseout')"
  >
    <div :style="styleData.price">
      <div :style="styleData.tu">
        <img :src="skuImg" alt="" style="width: 2rem; height: 2rem" />
      </div>
      <div :style="styleData.skuName">{{ skuName }}</div>

      <div
        v-if="templateId == '20201228083300yqrhkj02'"
        :style="discount ? styleData.skuPrice : styleData.skuPrice1"
      >
        京东价:
        <span :style="styleData.skuSpan">￥95</span>
      </div>

      <div v-else :style="discount ? styleData.skuPrice : styleData.skuPrice1">
        京东价:
        <span :style="styleData.skuSpan">￥{{ skuPrice }}</span>
      </div>
      <div :style="styleData.lastPrice">
        券后价:
        <span :style="styleData.skuSpan">￥{{ discountPrice }}</span>
      </div>
      <div v-if="isWebClick" :style="styleData.button"></div>
      <div
      :key='timer'
        v-else
        :style="styleData.button"
        v-lz-click="'5'"
        v-lz-skuid="skuId"
        @click="goToSku(skuId)"
      ></div>
      <div :style="styleData.numback">
        <div :style="styleData.num">{{ juanPrice }}</div>
      </div>
    </div>

    <div :style="styleData.biao">
      <div :style="styleData.successPeople">
        已成功邀请
        <span :style="styleData.needshare">{{ helpNum }}</span>
        人
      </div>
      <div :style="styleData.quicklyPeople">
        赶紧邀请好友帮忙砍价，领取优惠券吧~
      </div>
      <!-- <ul :style="styleData.changeUl">
        <li :style="styleData.go"><div :style="styleData.goSpan">开始</div></li>
        <li :style="styleData.changeLi" v-for="(item, index) in prizesList" :key="index">
          <div :style="item.status == 0 ? styleData.changeXian : styleData.changeXian1"></div>
          <div :style="item.status == 1 ? styleData.changeJuan : styleData.changeJuan1">
            <div :style="styleData.juanSpan1" style="marginTop: 0.45rem">{{ item.name }}元</div>
            <div :style="styleData.juanSpan1">优惠券</div>
          </div>
          <span :style="styleData.changePeople">{{ item.needPeople }}人</span>
          <div v-if="item.status == 2" :style="styleData.changeType"></div>
          <div v-if="item.status == 1" :style="styleData.changeType1"></div>
          <div v-if="item.status == 0" :style="styleData.changeType2">
            <div :style="styleData.changeTypetest">剩余:{{ item.leftNum }}</div>
          </div>
        </li>
      </ul> -->
      <ul :style="styleData.changeUl">
           <li :style="styleData.go">
               <div :style="styleData.gobtn"></div>
               <div :style="styleData.goTest">
                   <div :style="styleData.needshareprize">活动开始</div>
                   <div :style="styleData.leftNum">GO</div>
               </div>
           </li>
           <div class="aaa" style="margin-left:-.37rem">
                <li :style="styleData.changeLi" v-for="(item, index) in prizesList" :key="index">
                    <div :style="styleData.go1">
                        <div
                        :style="helpNum >= item.needPeople ? styleData.gobtn2 : styleData.gobtn1"
                        >
                        </div>
                         <div :style="styleData.goTest">
                             <div :style="item.status == 2 ? styleData.needsharepic1: styleData.needsharepic">
                                 <img v-if="helpNum >= item.needPeople" :style="styleData.needshareimg"
                                  src="//img10.360buyimg.com/imgzone/jfs/t1/220803/11/7012/473/61b02163E3dc57adf/c1720024c15e91cd.png" alt="">
                                  <img v-else :style="styleData.needshareimg"  src="//img10.360buyimg.com/imgzone/jfs/t1/219789/9/7054/464/61b01423Eff63833e/dd43ceed25bf6066.png" alt="">
                                  <div :style="helpNum >= item.needPeople ? styleData.needshareprize : styleData.needshareprize">{{item.name}}元</div>
                             </div>
                             <div :style="helpNum >= item.needPeople ? styleData.needshare1 : styleData.needshare2">邀请<span>{{item.needPeople}}</span>人</div>
                         </div>
                         <div :style="styleData.goTest1">
                             剩余<span :style="styleData.leftNum">{{item.leftNum}}</span>件
                         </div>
                    </div>

                <div :style="helpNum >= item.needPeople ? styleData.changeXian1 : styleData.changeXian"></div>
            </li>
           </div>

      </ul>

    </div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
let { bargain, bargainFriends,storeGoodsPoint } = apis1;
import { newToSkuPage } from "../../../util/tools";
import store from "../../../store/store.js";
export default {
  props: [
    "isTemplate",
    "keyData",
    "styleData",
    'templateData',
    "datas",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      isHelper: false, //是否是助力者进入
      skuInfo:{},
      skuId: "", //商品id
      skuName: "", //商品名字
      skuPrice: "", //商品价格
      skuImg: "", //商品图片
      discountPrice: "?",
      discount: false, //是否有折扣
      juanPrice: "", //优惠卷
      prizesList: [], //优惠卷列表
      isCustomSwitching: 1,
      styleDataOld: {},
      templateId: 0,
      helpNum: 0,
      timer:new Date().getTime()
    };
  },
  created() {
    console.log(this.styleData,'styleDatastyleDatastyleData')
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.isHelper = store.state.shareUserId ? true : false;
    console.log(store.state.shareUserId,'isHelper')
    this.publicData.$on("kanSwitchValue", (isCustomSwitching, refName) => {
      console.log(isCustomSwitching,'isHelper2222')
      this.isCustomSwitching = isCustomSwitching;
      if (isCustomSwitching == "1") {
        this.isHelper = false;
      } else if (isCustomSwitching == "2") {
        this.isHelper = true;
      } else if (isCustomSwitching == "3") {
        this.isHelper = true;
      }
    });
    if (this.isHelper == false) {
      if (this.isTemplate == true) {
        // console.log(this.temPlateDataAll, "datatemPlateDataAll");
        var datasAll = this.templateData;
        console.log(this.templateData, "datatemPlateDataAll");
        this.temPlateDataAll = this.datas.temPlateDataAll;
        if (datasAll) {
          this.skuName = datasAll.bargain.skuInfo.name;
          this.skuImg = datasAll.bargain.skuInfo.imagePath;
          this.skuPrice = datasAll.bargain.skuInfo.price;
          for (var i = 0; i < datasAll.draw.prizeList.length; i++) {
            datasAll.draw.prizeList[i].leftNum = datasAll.draw.prizeList[i].totalPrizeNum;
            datasAll.draw.prizeList[i].needPeople =
              datasAll.draw.prizeList[i].cotinueSignDay;
            datasAll.draw.prizeList[i].status = 0;
            datasAll.draw.prizeList[i].name =
              datasAll.draw.prizeList[i].priceInfo;
              // for (var j = 0; j < datasAll.bargain.rule.length; j++){
                // datasAll.draw.prizeList[i].name = datasAll.bargain.rule[i].give
                // console.log(datasAll.bargain.rule[i].give,"datasAll.bargain.rule[j].give");
              // }
              console.log(datasAll.draw.prizeList,"datasAll.draw.prizeList");
          }
          this.prizesList = datasAll.draw.prizeList;
        } else {
          this.skuName = "测试商品";
          this.skuImg =
            "http://img12.360buyimg.com/n0/jfs/t1/192711/9/15879/183242/6103e4ccEd571223b/ce8e7085f83f0822.jpg";
          this.skuPrice = 10;
          this.prizesList = [
            {
              leftNum: 10,
              needPeople: 1,
              status: 0,
              name: "3",
            },
            {
              leftNum: 10,
              needPeople: 5,
              status: 0,
              name: "10",
            },
            {
              leftNum: 10,
              needPeople: 10,
              status: 0,
              name: "15",
            },
          ];
        }
        var bb = false;
        for (var i = 0; i < this.prizesList.length; i++) {
          var aa = this.prizesList[i];
          if (aa.status == 1) {
            this.juanPrice = aa.name;
            this.discount = true;
            this.discountPrice = (this.skuPrice - this.juanPrice).toFixed(2);
            if (this.discountPrice <= 0) {
              this.discountPrice = "?";
            }
            bb = true;
          }
        }
        if (!bb) {
          this.juanPrice = "?";
          this.discount = false;
        }
      } else {
        bargain((data) => {
          this.skuImg = data.data.skuInfo.skuImg;
          this.skuName = data.data.skuInfo.skuName;
          this.skuPrice = data.data.skuInfo.skuPrice;
          this.prizesList = data.data.prizes;
          this.prizesstatus = data.data.prizes.status;
          this.skuId = data.data.skuInfo.skuId;
          this.skuInfo = data.data.skuInfo;
          this.timer = new Date().getTime();

          var bb = false;
          for (var i = 0; i < this.prizesList.length; i++) {
            var aa = this.prizesList[i];
            if (aa.status == 1) {
              this.juanPrice = aa.name;
              this.discount = true;
              this.discountPrice = (this.skuPrice - this.juanPrice).toFixed(2);
              if (this.discountPrice <= 0) {
                this.discountPrice = "?";
              }
              bb = true;
            }
          }
          if (!bb) {
            this.juanPrice = "?";
            this.discount = false;
          }
        });

        bargainFriends((data) => {
          this.helpNum = data.data.num;
          console.log(this.helpNum, "kkkkk");
        });
      }
    }
    console.log('isHelper',this.isHelper)
  },
  mounted() {
    this.templateId = window.sessionStorage.getItem("templateId");
  },
  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);
      }
    },
    goToSku() {
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
      } else {
        storeGoodsPoint(5)
        newToSkuPage(this.skuInfo);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
ul {
  /*组合选择器*/
  list-style: none; /*清除列表默认样式*/
  padding: 0; /*清除padding*/
  margin: 0;
}
li {
  float: left;
}


</style>
