<template>
  <div
    :style="styleData.yuanClass"
    ref="freeBargain"
    @click="styleClick('click', 'freeBargain')"
    @mousemove="styleClick('mousemove', 'freeBargain')"
    @mouseout="styleClick('mouseout')"
  >
    <div :style="styleData.drawDanner">
      <div :style="styleData.shopNameClass">{{ shopName }}</div>
      <a href="javascript: void(0);">
        <img
          :src="skuInfo.skuImg"
          @click="goToSku(skuInfo)"
          :style="styleData.skuImgStyle"
        />
      </a>
      <div :style="styleData.pirzeName">{{ skuInfo.skuName }}</div>
      <div :style="styleData.pirzeSize">大奖抱回家</div>
    </div>
    <div :style="styleData.fTac">
      <div :style="styleData.drawDetailSku">
        <div :style="styleData.avatar">
          <div>
            <div :style="styleData.avatarIb">
              <img :style="styleData.avatarImg" :src="userImg" alt="" />
            </div>
            <div :style="styleData.nickNameStyle">{{ nickName }}</div>
            <div :style="styleData.kanjiaStyle">
              <span v-if="pointStatus == 3"> 恭喜您砍价成功！</span>
              <span v-else-if="pointStatus == 2">
                还差
                {{ prizeInfoList[1].priceInfo | toFixed }}
                元即可抽取最后大奖</span
              >
              <span v-else-if="pointStatus == 1">
                还差
                {{ prizeInfoList[0].priceInfo | toFixed }}
                元即可抽取最后大奖</span
              >
              <span v-else>
                还差 {{ skuInfo.skuPrice | toFixed }} 元即可抽取最后大奖</span
              >
              <!-- <div style="margin-top: 0.05rem; font-size: 0.2rem; color: rgb(51, 51, 51); display: flex; justify-content: center; align-items: center;"></div> -->
            </div>
          </div>
        </div>
        <div :style="styleData.kuangStyle">
          <div :style="styleData.tiaoStyle">
            <div :style="styleData.lineCon"></div>
            <div
              v-if="pointStatus == 3"
              :style="styleData.lineStyle"
              style="width: 95%"
            ></div>
            <div
              v-else-if="pointStatus == 2"
              :style="styleData.lineStyle"
              style="width: 55%"
            ></div>
            <div
              v-else-if="pointStatus == 1"
              :style="styleData.lineStyle"
              style="width: 25%"
            ></div>
            <div v-else :style="styleData.lineStyle" style="width: 0%"></div>
            <div :style="styleData.listStyle">
              <div>￥{{ skuInfo.skuPrice | toFixed }}</div>
              <div :style="styleData.circle"></div>
              <!-- <div style="margin-top: 0.1rem; height: 0.76rem;">&nbsp;</div> -->
            </div>
            <div :style="styleData.listItem">
              <div>￥{{ prizeInfoList[0].priceInfo | toFixed }}</div>
              <div :style="styleData.circle"></div>
              <div :style="styleData.prizeNameDiv">
                {{ prizeInfoList[0].prizeName }}
                <a
                  :style="styleData.ljlq1"
                  v-lz-click="'16'"
                  @click="receiveCoupon(0)"
                  v-if="buttonStatus[0] == 3"
                  >立即领取</a
                >
                <a
                  :style="styleData.backStyleS"
                  v-if="buttonStatus[0] == 1"
                  style="left: 50%; transform: translateX(-50%)"
                  >已发完</a
                >
                <a
                  :style="styleData.backStyleS"
                  v-if="buttonStatus[0] == 2"
                  style="left: 50%; transform: translateX(-50%)"
                  >已领取</a
                >
                <a
                  :style="styleData.backStyleS"
                  v-if="buttonStatus[0] == 4"
                  style="left: 50%; transform: translateX(-50%)"
                  >立即领取</a
                >
              </div>
            </div>
            <div :style="styleData.listItem">
              <div>￥{{ prizeInfoList[1].priceInfo | toFixed }}</div>
              <div :style="styleData.circle"></div>
              <div :style="styleData.prizeNameDiv">
                {{ prizeInfoList[1].prizeName }}
                <a
                  :style="styleData.ljlq2"
                  v-lz-click="'16'"
                  @click="receiveCoupon(1)"
                  v-if="buttonStatus[1] == 3"
                  >立即领取</a
                >
                <a
                  :style="styleData.backStyleS"
                  v-if="buttonStatus[1] == 1"
                  style="left: 50%; transform: translateX(-50%)"
                >
                  已发完</a
                >
                <a
                  :style="styleData.backStyleS"
                  v-if="buttonStatus[1] == 2"
                  style="left: 50%; transform: translateX(-50%)"
                  >已领取</a
                >
                <a
                  :style="styleData.backStyleS"
                  v-if="buttonStatus[1] == 4"
                  style="left: 50%; transform: translateX(-50%)"
                  >立即领取</a
                >
              </div>
            </div>
            <div :style="styleData.listItem1">
              <div>￥{{ prizeInfoList[2].priceInfo | toFixed }}</div>
              <div :style="styleData.circle"></div>
              <div :style="styleData.prizeNameDiv">
                {{ prizeInfoList[2].prizeName }}
                <a
                  :style="styleData.ljlq3"
                  v-lz-click="'16'"
                  @click="receiveCoupon(2)"
                  v-if="buttonStatus[2] == 3"
                  >立即领取</a
                >
                <a :style="styleData.backStyleS" v-if="buttonStatus[2] == 1"
                  >已发完</a
                >
                <a :style="styleData.backStyleS" v-if="buttonStatus[2] == 2"
                  >已领取</a
                >
                <a :style="styleData.backStyleS" v-if="buttonStatus[2] == 4"
                  >立即领取</a
                >
              </div>
            </div>
          </div>
        </div>
        <div v-if="!needFollowShop == 1">
          <a v-lz-click="'2'" :style="styleData.yq" @click="gotoShare()"
            >邀请好友帮忙砍价</a
          >
        </div>
        <div v-else>
          <a v-lz-click="'2'" :style="styleData.yq" @click="gotoShare()"
            >关注店铺并邀请好友帮忙砍价</a
          >
        </div>
      </div>
    </div>
    <div>
      <div v-if="exposureList.length > 0" :style="styleData.exposureStyle">
        精品推荐
      </div>
    </div>
    <div :style="styleData.backStyle">
      <div :style="styleData.goodListStyle">
        <div
          v-for="(item, index) in exposureList"
          :key="index"
          :style="styleData.goodsItemStyle"
        >
          <div :style="styleData.goodBottomStyle">
            <img :style="styleData.shopImgClass" :src="item.skuImg" />
            <p :style="styleData.goodNameStyle">{{ item.skuName }}</p>
            <p :style="styleData.goodPriceStyle" v-if="item.skuPrice > 0">
              ￥{{ item.skuPrice }}
            </p>
            <a
              :style="styleData.detailBtn"
              v-lz-click="'9'"
              @click="goToBuy(item)"
              >购买</a
            >
          </div>
        </div>
      </div>
    </div>
    <div v-if="!windowFlag">
      <div :style="styleData.nutDialogMask"></div>
      <div :style="styleData.nutDialogBox">
        <div :style="styleData.nutDialog">
          <div :style="styleData.nutDialogBody">
            <span :style="styleData.nutDialogTitle">友情提示</span>
            <div :style="styleData.nutDialogContent">
              抱歉哦~部分奖品已经发放完毕，继续召唤小伙伴可能无法获得奖品哦~
            </div>
          </div>
          <div :style="styleData.nutDialogFooter">
            <button @click="popClick()" :style="styleData.nutDialogBtn">
              确认
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
import store from "../../../store/store";
import { newToSkuPage, goToShopPage } from "../../../util/tools.js";
import { allShare } from "../../../js/share.js";
import { PrizeResultPopComService } from "../../../util/comCreate.js";

let { freeBargain, receiveCoupon, followShopZero,storeGoodsPoint } = apis1;

export default {
  filters: {
    // 小数点保留两位,不足用0补充
    toFixed(num) {
      return (Math.round(num * 100) / 100).toFixed(2);
    },
  },

  props: [
    "datas",
    "keyData",
    "styleData",
    "isTemplate",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      needFollowShop: 0,
      exposureList: [],
      skuInfo: {
        skuName: "广博（GuangBo） 语音型计算器/高级计算机 单个装 150*200*50mm",
        skuImg:
          "http://img12.360buyimg.com/n0/jfs/t12832/246/1288857654/132524/7616c638/5a1e4ff8Ncd7cd478.jpg",
        skuPrice: 41.9,
      },
      shopName: "",
      prizeInfoList: [{ priceInfo: 20 }, { priceInfo: 10 }, { priceInfo: 10 }],
      pointStatus: "", //  0 1 2 3 对应4个节点
      helpStatus: "", //助力状态
      nickName: "",
      userImg: "",
      sendStatus: "",
      buttonStatus: 0,
      windowFlag: true, //是否弹出奖品领取完弹窗
      prizeNum: 0, //奖品剩余数量
      prizeResultData: {
        styleData: {},
        datas: {},
        anFlag: 0,
        butFlag: true,
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
      styleDataOld: {},
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
  },
  mounted() {},

  methods: {
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          c_this: this,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {
      var datasAll = this.templateData;
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        if (datasAll) {
          this.shopName = datasAll.activity.shopName;
          this.userImg =
            "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png";
          this.nickName = "一刀一矿狗";
          this.skuInfo.skuImg = datasAll.bargain.skuInfo.imagePath;
          this.skuInfo.skuPrice = datasAll.bargain.skuInfo.price;
          this.pointStatus = 0;
          this.prizeInfoList[0].priceInfo = 20;
          this.prizeInfoList[1].priceInfo = 10;
          this.prizeInfoList[2].priceInfo = 10;
          // this.exposureList = datasAll.exposedData.exposedGoods;
        } else {
          this.shopName = "XXX京东自营官方旗舰店";
          this.userImg =
            "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png";
          this.nickName = "一刀一矿狗";
          this.skuInfo.skuImg =
            "http://img12.360buyimg.com/n0/jfs/t12832/246/1288857654/132524/7616c638/5a1e4ff8Ncd7cd478.jpg";
          this.skuInfo.skuPrice = "41.9";
          this.pointStatus = 0;
          this.prizeInfoList[0].priceInfo = 20;
          this.prizeInfoList[1].priceInfo = 10;
          this.prizeInfoList[2].priceInfo = 10;
        }
      } else {
        this.getFreeBargain(0);
      }
    },
    // 初始化获取数据
    getFreeBargain(status) {
      (this.type = store.state.shareUserId ? "0" : "1"), // 1 主端 0 客端
        freeBargain((bargain) => {
          console.log(bargain, "freebargain");
          this.shopName = bargain.data.shopName;
          // debugger
          this.skuInfo = bargain.data.skuInfo;
          this.prizeInfoList = bargain.data.prizeInfoList;
          this.pointStatus = bargain.data.pointStatus; //是否解锁节点
          this.helpStatus = bargain.data.helpStatus;
          this.nickName = bargain.data.nickName;
          this.userImg = bargain.data.userImg;
          this.sendStatus = bargain.data.sendStatus; //是否领取奖品
          this.buttonStatus = bargain.data.buttonStatus; //按钮状态
          this.windowFlag = bargain.data.windowFlag;
          this.prizeNum = bargain.data.prizeNum; //剩余奖品数量
          this.needFollowShop = bargain.data.needFollowShop; //剩余奖品数量

          if (bargain.data.exposeSkuInfo != undefined) {
            this.exposureList = bargain.data.exposeSkuInfo;
          }
          console.log(
            this.sendStatus[0],
            this.sendStatus[1],
            this.sendStatus[2]
          );

          console.log(this.prizeNum[0], this.prizeNum[1], this.prizeNum[2]);
          if (status == 0) {
            // 初始化进入 判断分享状态
            if (this.helpStatus == 1) {
              this.$toast("助力成功");
            } else if (this.helpStatus == 2) {
              this.$toast("已为他人助力");
            } else if (this.helpStatus == 3) {
              this.$toast("已助力过");
            }
          }
        });
    },
    followShop() {
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        // Toast
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        return;
      }
    },
    popClick() {
      this.windowFlag = true;
    },
    goToSku(sku) {
      storeGoodsPoint(5)
      newToSkuPage(sku);
    },
    receiveCoupon(point) {
      receiveCoupon(point, (data) => {
        this.sendStatus[point] = true;
        if (data.data.resp_code == 60010) {
          this.$toast("奖品已发完");
          return;
        }
        this.prizeResultData.datas = data.data;
        PrizeResultPopComService.create(
          this.prizeResultData,
          data.data,
          (submit) => {
            PrizeResultPopComService.close();
          }
        );
        // 初始化刷新画面
        this.getFreeBargain(1);
      });
    },

    goToShop() {
      let shopId = store.state.shopId;
      storeGoodsPoint(4)
      goToShopPage(shopId);
    },
    goToBuy(skuid) {
      storeGoodsPoint(5)
      newToSkuPage(skuid);
    },
    // 邀请好友
    gotoShare() {
      let actStatus = sessionStorage.getItem("actStatus");
      console.log(this.isTemplate, actStatus, this.teamId);
      if (!this.isTemplate) {
        if (actStatus == 2) {
          // Toast
          this.$toast("活动已结束");
          return;
        }
        if (actStatus == 1) {
          this.$toast("活动尚未开始");
          // Toast('活动尚未开始');
          return;
        }

        if (actStatus == 3) {
          if (this.needFollowShop == 1) {
            followShopZero((callback) => {
              console.log("关注店铺");
            });
          }
          allShare(this.isTemplate, this, (callBackData) => {
            console.log(callBackData, "callBackData");
          });
        }
      } else {
        this.$toast("活动预览，仅供查看");
      }
    },
  },
};
</script>

<style lang="scss">
// .draw-sign-list {
//   padding: .4rem;
//   padding-bottom: .9rem;
// }
// .f-cb, .f-cbli li {
//   zoom: 1;
// }
// ol, ul {
//   margin: 0;
//   padding: 0;
//   list-style: none;
// }
// .draw-sign-list li .detail {
//   padding: .1rem;
//   font-size: .28rem;
// }

// .backStyle{
//   height: 13rem;
//   width: 100%;
//   background-color: #e30101;
//   position: absolute;
//   top: 16.23rem;
// }

// .goodClassStyle {
//   height: 5rem;
//   width: 6.9rem;
//   overflow: hidden;
//   position: absolute;
//   background-color: #e30101;
//   left: .33rem;
// }

// .goodImgStyle{
//   width: 100%;
//   height: 3.4rem;
//   display: flex;
//   justify-content: center;
//   align-items: center;

// }
</style>
