<template>
  <div
    v-if="isHelper && isMeetCondition"
    :style="
      bargainChance == 0
        ? styleData.bargainKeDivStyle
        : styleData.bargainKeDiv1Style
    "
    ref="bargainKeGood"
    @click="styleClick('click', 'bargainKeGood')"
    @mousemove="styleClick('mousemove', 'bargainKeGood')"
    @mouseout="styleClick('mouseout')"
  >
    <div class="11111111" :style="styleData.tu">
      <!-- 邀请人信息 -->
      <div :style="styleData.people">
        <div :style="styleData.shareimg">
          <img
            :src="shareImg"
            alt=""
            style="width: 100%; height: 100%; border-radius: 50%"
          />
        </div>
        <div :style="styleData.shareUserName">
          {{ shareUserName }} 邀请您帮忙砍价
        </div>
        <div :style="styleData.maxCutPrice">最高立减{{ maxCutPrice }}元</div>
      </div>

      <!-- 商品信息 -->

      <div class="2222222222" :style="styleData.kuang">
        <img :src="skuImg" alt="" style="width: 1.6rem; height: 1.6rem" />
        <div :style="styleData.skuName">{{ skuName }}</div>
        <div :style="styleData.skuPrice" v-if="templateId == '20201228083300yqrhkj02'">
          京东价：
          <span style="color: #c22e26">￥95元</span>
        </div>
        <div :style="styleData.skuPrice" v-else>
          京东价：
          <span style="color: #c22e26">￥{{ skuPrice }}元</span>
        </div>
        <div
          v-if="isWebClick"
          :style="styleData.button"
        ></div>
        <div
          v-else
          :style="styleData.button"
          v-lz-click="'4'"
          @click="goToSku(skuId)"
        ></div>
      </div>
      <div :style="styleData.chanceyuan">
        <div>快来砍价</div>
        <div>获得优惠券</div>
      </div>
    </div>
    <!-- 邀请好友 -->
    <div
      class="33333333333"
      :style="styleData.friendp"
      v-if="bargainChance != 0"
    >
      <ul :style="styleData.friendpUl">
        <li :style="styleData.go"></li>
        <li
          v-for="(item, index) in prizeNamesList"
          :key="index"
          :style="styleData.changeLi"
        >
          <div
            :style="
              item.needNum <= level
                ? styleData.changeXian1
                : styleData.changeXian2
            "
          ></div>

          <div
            :style="
              item.needNum <= level
                ? styleData.changeJuan
                : styleData.changeJuan1
            "
          >
            <div :style="styleData.juanSpan1">{{ item.price }}元</div>
            <div :style="styleData.juanSpan2">优惠券</div>
          </div>
        </li>
      </ul>
    </div>
    <div
      class="44444444444"
      :style="bargainChance == 0 ? styleData.xin : styleData.xin1"
    >
      <div
        v-if="bargainChance == 0 && isWebClick"
        :style="styleData.kan"
      ></div>
      <div
        v-if="bargainChance == 0 && !isWebClick"
        :style="styleData.kan"
        v-lz-click="'3'"
        @click="kan"
      ></div>

      <div
        v-if="bargainChance == 1 && !maxChange"
        :style="styleData.bargainover"
      >
        已经成功帮好友砍价。
      </div>

      <div
        v-if="bargainChance == 2 && !maxChange"
        :style="styleData.bargainover"
      >
        您已经帮其他好友砍过价了。
      </div>
      <div
        v-if="okkan && bargainChance == 2 && !maxChange"
        :style="styleData.okkan"
      >
        活动期间只能为一位好友砍价
      </div>
      <div v-if="maxChange" :style="styleData.maxChange">
        来晚啦，好友已经砍成啦
      </div>
      <div
        v-if="bargainChance != 0 && isWebClick"
        :style="styleData.add"
      ></div>
      <div
        v-if="bargainChance != 0 && !isWebClick"
        v-lz-click="'1'"
        @click="join"
        :style="styleData.add"
      ></div>
    </div>
  </div>
</template>

<script>
import bargainMain from "../../logicalComponent/bargainMain/bargainMain.vue"; //砍价主态
import { goToSkuPage } from "../../../util/tools";
import {
  BargainMemberPopComService,
  BargainMainPopComService,
  JoinMembershipPopComService,
} from "../../../util/comCreate.js";
import apis1 from "../../../util/apis1.js";
let { bargain, guest, toJoin, toBargain, myselfBargain,storeGoodsPoint } = apis1;
import store from "../../../store/store.js";
export default {
  props: [
    "isTemplate",
    "datas",
    "styleData",
    "keyData",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  components: {
    bargainMain,
  },
  data() {
    return {
      isHelper: false, //是否是助力者进入
      skuName: "", //商品名字
      skuPrice: "", //商品价格
      shareImg: "", //分享人头像
      shareUserName: "",
      maxCutPrice: "", //最高立减
      skuId: "", //商品id
      bargainChance: 0, //是否有砍价机会
      skuImg: "", //商品图片
      prizeNamesList: "", //优惠卷列表
      okkan: true, //是否有砍价机会
      maxNum: 0, //当前砍价人数
      maxChange: false, //当前是否砍过状态
      currentStarLevel: "", //当前会员等级
      requireMinLevel: "", //所需最小等级
      level: "", //等级
      isMeetCondition: true, //是否满足砍价条件
      isCustomSwitching: "",
      id:0,
      styleDataOld:{},
      templateId:0
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.isHelper = store.state.shareUserId ? true : false;
    this.isHelper = store.state.shareUserId ? true : false;
    this.publicData.$on("kanSwitchValue", (isCustomSwitching, refName) => {
      this.isCustomSwitching = isCustomSwitching;
      if (isCustomSwitching == "1") {
        this.isHelper = false;
      } else if (isCustomSwitching == "2") {
        this.bargainChance = 0;   
        this.isHelper = true;
        this.isMeetCondition = true;
       this.mobanChange();
      }else if(isCustomSwitching == "3"){
        this.bargainChance = 1;
        this.isHelper = true;
        this.isMeetCondition = true;
         this.mobanChange();
      }
    });
    if (this.isHelper == true) {
      if (this.isTemplate == true) {
        this.temPlateDataAll = this.templateData;
        this.bargainChance = 0;
        this.member = true;
        this.guestmember = true;
        this.shareImg =
          "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png";
        this.shareUserName = "模板人员昵称";
        this.maxCutPrice = "15";

        this.skuName = this.temPlateDataAll.bargain.skuInfo.name;
        this.skuImg = this.temPlateDataAll.bargain.skuInfo.imagePath;
        this.skuPrice = this.temPlateDataAll.bargain.skuInfo.price;

        this.level = 1;
        for (var i = 0; i < this.temPlateDataAll.draw.prizeList.length; i++) {
          this.temPlateDataAll.draw.prizeList[i].price =
            this.temPlateDataAll.draw.prizeList[i].priceInfo;
          this.temPlateDataAll.draw.prizeList[i].needNum =
            this.temPlateDataAll.draw.prizeList[i].cotinueSignDay;
        }
        this.prizeNamesList = this.temPlateDataAll.draw.prizeList;
      } else {
        //判断是否是自己
        myselfBargain((data) => {
          this.myself = data.data;
          if (this.myself) {
            store.commit("setShareUserId", null);
            let cur_url = location.href;
            let shareUserIdIndex = cur_url.indexOf("shareUserId");
            let url1 = cur_url.substr(0, shareUserIdIndex - 1);
            let endUrl = url1 + "&shareUserId=";
            location.href = endUrl;
            this.isMeetCondition = true;
            this.publicData.$emit("isMeetCondition", 1);
          } else {
            //查询商品以及奖品详情
            guest((data) => {
              this.shareImg = data.data.img;
              this.shareUserName = data.data.shareUserName;
              this.maxCutPrice = data.data.skuInfoVo.maxCutPrice;
              this.skuName = data.data.skuInfoVo.skuName;
              this.skuPrice = data.data.skuInfoVo.skuPrice;
              this.bargainChance = data.data.bargainStatus;
              this.skuImg = data.data.skuInfoVo.skuImg;
              this.prizeNamesList = data.data.prizeNames;
              this.level = data.data.level;
              this.member = data.data.member;
              this.change2 = true;
              this.skuId = data.data.skuInfoVo.skuId;

              this.bargainname = data.data.shareUserName;
              this.guestmember = data.data.member;
              this.bargainshopName = data.data.shopName;
              this.shopLogo = data.data.shopLogo;
              this.openCardUrl = data.data.openCardUrl;

              if (!this.member) {
                JoinMembershipPopComService.create(
                  this.openCardUrl,
                  this.bargainname,
                  this.shopLogo,
                  this.bargainshopName,
                  (submit) => {
                    JoinMembershipPopComService.close();
                  }
                );
              }

              for (var i = 0; i < this.prizeNamesList.length; i++) {
                if (
                  this.prizeNamesList[this.prizeNamesList.length - 1].needNum ==
                  this.level
                ) {
                  this.juanPrice =
                    this.prizeNamesList[this.prizeNamesList.length - 1].price;
                  return;
                } else if (
                  this.prizeNamesList[i].needNum <= this.level &&
                  this.prizeNamesList[i + 1].needNum > this.level
                ) {
                  this.juanPrice = this.prizeNamesList[i].price;
                  return;
                } else {
                  this.juanPrice = "?";
                }
              }
            });
          }
        });
      }
    }
  },
   mounted(){
    this.templateId = window.sessionStorage.getItem('templateId')
  },
  methods: {
    goToSku(skuid) {
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
      } else {
        storeGoodsPoint(5)
        goToSkuPage(skuid);
      }
    },
    kan() {
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("来晚啦，活动已结束");
        return;
      }

      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        return;
      }

      toBargain((data) => {
        if (data.data.result) {
          this.bargainChance = 1;
          this.okkan = false;
          this.maxChange = false;
          this.level = data.data.level;
          this.$toast("砍价成功");
        } else if (data.data.level >= data.data.maxNum) {
          this.$toast("来晚了，好友已经砍成啦");
          this.bargainChance = 4;
          this.maxChange = true;
          this.level = data.data.level;
        } else {
          this.$toast("来晚了，好友已经砍成啦");
          // this.bargainChance = false;
          this.maxChange = true;
          this.level = data.data.level;
          // console.log("bad");
        }
        this.maxNum = data.data.maxNum;

        this.prizeNamesList = data.data.prizeNames;
        for (var i = 0; i < this.prizeNamesList.length; i++) {
          if (
            this.prizeNamesList[this.prizeNamesList.length - 1].needNum ==
            this.level
          ) {
            this.juanPrice =
              this.prizeNamesList[this.prizeNamesList.length - 1].price;
            return;
          } else if (
            this.prizeNamesList[i].needNum <= this.level &&
            this.prizeNamesList[i + 1].needNum > this.level
          ) {
            this.juanPrice = this.prizeNamesList[i].price;
            return;
          } else {
            this.juanPrice = "?";
          }
        }
      });
    },
    join() {
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("来晚啦，活动已结束");
        return;
      }

      if (this.member) {
        // this.submit();
        if (this.isTemplate == true) {
          BargainMainPopComService.create(
            this.isTemplate,
            this.temPlateDataAll,
            (submit) => {
              BargainMainPopComService.close();
            }
          );
          return;
        }
        toJoin((data) => {
          this.currentStarLevel = data.data.currentStarLevel;
          this.requireMinLevel = data.data.requireMinLevel;
          //1 客端变主端可以参与活动 2 客端参与活动等级不足
          if (data.data.result) {
            store.commit("setShareUserId", null);
            let cur_url = location.href;
            let shareUserIdIndex = cur_url.indexOf("shareUserId");
            let url1 = cur_url.substr(0, shareUserIdIndex - 1);
            let endUrl = url1 + "&shareUserId=";
            location.href = endUrl;
            this.isMeetCondition = true;
            this.publicData.$emit("isMeetCondition", 1);
          } else {
            // this.$emit('callBack', '2');
            this.isMeetCondition = false;
            this.publicData.$emit("isMeetCondition", 2);
          }
          // if (data.data.result) {
          //   this.$emit('callBack', '1');
          // } else {
          //   this.$emit('callBack', '2');
          // }
        });
      } else {
        this.$toast("您还不是会员，请开通会员");
      }
    },
    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);
      }
    },
    mobanChange(){
      if (this.isHelper == true) {
          if (this.isMeetCondition == true) {
            console.log(this.temPlateDataAll, "datatemPlateDataAll");
            this.temPlateDataAll = this.datas.temPlateDataAll;
            if(this.type == 2){
               this.bargainChance = 0;
            }else if(this.type ==3 ){
               this.bargainChance = 1;
            }

            this.member = true;
            this.guestmember = true;
            this.shareImg =
              "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png";
            this.shareUserName = "模板人员昵称";
            this.maxCutPrice = "15";

            this.skuName = '尊享好物';
            this.skuImg = 'http://img12.360buyimg.com/n0/jfs/t1/192711/9/15879/183242/6103e4ccEd571223b/ce8e7085f83f0822.jpg';
            this.skuPrice = 30;
            this.prizeNamesList=[
              {
               price: 1,
              needNum: 5
              },
              {
               price: 2,
              needNum: 10
              },
              {
               price: 5,
              needNum: 20
              },
            ]

            this.level = 1;
            // for (
            //   var i = 0;
            //   i < this.prizeList.length;
            //   i++
            // ) {
            //   this.prizeList[i].price =this.prizeList[i].priceInfo;
            //   this.prizeList[i].needNum =this.prizeList[i].cotinueSignDay;
            // }
            // this.prizeNamesList = this.prizeList;
          }
        }
    }
  },
};
</script>

<style scoped>

ul {
  /*组合选择器*/
  list-style: none; /*清除列表默认样式*/
  padding: 0; /*清除padding*/
  margin: 0;
}
</style>
