<template>
  <div
    class="fudaiPrizeDiv"
    :style="styleData.comStyleAll"
    ref="fudaiPrize"
    @click="styleClick('click', 'fudaiPrize')"
    @mousemove="styleClick('mousemove', 'fudaiPrize')"
    @mouseout="styleClick('mouseout')"
  >
    <div :style="styleData.fudaiStyle">
      <div style="height: 100%" v-if="unpackingStatus == 0 || isHelpShare">
        <!-- <div v-if="fudaiData.showType == 0">
          <div v-if="isHelpShare" :style="styleData.helpMysteriousStyle"></div>
          <div v-else :style="styleData.mysteriousStyle"></div>
        </div> -->
        <div :style="styleData.relaPrizeDetailStyle">
          <img
            v-if="fudaiData.showType == 0"
            class="draw-show-dpjf"
            src="//img10.360buyimg.com/imgzone/jfs/t1/204072/11/17162/46807/61a4f018E9c1fc062/26c89fb20c99997a.png"
          />
          <img v-else class="draw-show-dpjf" :src="prizeInfo.showImg" />
          <div :style="styleData.fPrize">
            <div style="text-align: left" v-if="fudaiData.showType == 0">
              完成任务即可领取神秘奖品
            </div>
            <div
              style="
                width: 3.75rem;
                text-align: left;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
              "
              v-else
            >
              完成任务即可领取{{ prizeInfo.prizeName }}
            </div>
            <div :style="styleData.fPrizeName">
              奖品剩余 {{ fudaiData.remainingPrize }}份
            </div>
          </div>
        </div>
      </div>

      <div v-else :style="styleData.relaPrizeDetailStyle">
        <img
          v-if="unpackingStatus == 2 || unpackingStatus == 3 || unpackingStatus == 1"
          class="draw-show-dpjf"
          :src="prizeInfo.showImg"
        />
        <img
          v-if="unpackingStatus == 4"
          class="draw-show-dpjf"
          src="//img10.360buyimg.com/imgzone/jfs/t1/215424/26/6085/31166/61a4ec27Ef76631b3/7d199bc51997b611.png"
        />

        <div :style="styleData.fPrize">
          <strong v-if="unpackingStatus == 2"
            >您已经开启过福袋啦，别太贪心哟，去店铺看看其他活动吧~</strong
          >
          <strong v-else-if="unpackingStatus == 4"
            >抱歉来晚啦，奖品已经抢完啦，去店铺看看其他活动吧~</strong
          >
          <strong v-else-if="unpackingStatus == 3 || unpackingStatus == 1">
            任务完成！
            <div :style="styleData.fPrizeName">
              获得 {{ prizeInfo.prizeName }}
            </div>
          </strong>
        </div>

        <!-- <div v-if="unpackingStatus != 4">
            <div
              v-if="drawPrizeGrant.prizeType == 1"
              style="
                color: rgb(255, 215, 129);
                font-size: 0.24rem;
                margin-top: 0.1rem;
              "
            >
              京豆已放到您的账户中
              <span>京东-我的-京豆</span>
              中查看
            </div>

            <div
              v-if="drawPrizeGrant.prizeType == 3"
              style="
                color: rgb(255, 215, 129);
                font-size: 0.24rem;
                margin-top: 0.1rem;
              "
            >
              实物奖品系统不能自动发放
              <br />
              请
              <span>填写邮寄地址</span>
              并联系客服核实
            </div>

            <div
              v-if="drawPrizeGrant.prizeType == 5"
              style="
                color: rgb(255, 215, 129);
                font-size: 0.24rem;
                margin-top: 0.1rem;
              "
            >
              仅中奖人可享受优惠,仅可使用一次
            </div>

            <div
              v-if="drawPrizeGrant.prizeType == 6"
              style="
                color: rgb(255, 215, 129);
                font-size: 0.24rem;
                margin-top: 0.1rem;
              "
            >
              红包已放到您的账户中
              <span>京东-我的-我的红包-红包</span>
              中查看
            </div>
            <div
              v-if="drawPrizeGrant.prizeType == 7"
              style="
                color: rgb(255, 215, 129);
                font-size: 0.24rem;
                margin-top: 0.1rem;
              "
            >
              礼品卡需手动兑换
              <br />
              请根据兑换指引前往兑换
            </div>

            <div
              v-if="drawPrizeGrant.prizeType == 9"
              style="
                color: rgb(255, 215, 129);
                font-size: 0.24rem;
                margin-top: 0.1rem;
              "
            >
              京东E卡已放到您的账户中
              <span>京东-我的-我的钱包-礼品卡</span>
              中查看
            </div>

            <div style="margin-top: 0.6rem">
              <span
                :style="styleData.unpackBagBtn"
                v-lz-click="'2'"
                @click="shareClick(null)"
                >分享活动</span
              >
              <span
                :style="styleData.unpackBagBtn"
                v-lz-click="'23'"
                @click="goToAddress"
                v-if="drawPrizeGrant.prizeType == 3"
                >填写实物地址</span
              >
              <span
                :style="styleData.unpackBagBtn"
                @click="exchange"
                v-else-if="drawPrizeGrant.prizeType == 7"
                >查看明细</span
              >
              <span
                :style="styleData.unpackBagBtn"
                @click="exchangeClick(drawPrizeGrant)"
                v-else-if="
                  drawPrizeGrant.prizeType == 9 ||
                  drawPrizeGrant.prizeType == 10
                "
                >立即兑换</span
              >
              <span
                :style="styleData.unpackBagBtn"
                v-lz-click="'9'"
                @click="buyGood(skuId)"
                v-else-if="drawPrizeGrant.prizeType == 5"
                >立即购买</span
              >
              <span
                v-else
                :style="styleData.unpackBagBtn"
                v-lz-click="'4'"
                @click="buttonClick(null)"
                >进店逛逛</span
              >
            </div>
          </div> -->
      </div>
    </div>
    <div
      style="display: flex; position: fixed; bottom: 0; width: 100%"
      v-if="
        unpackingStatus == 2 || unpackingStatus == 3 || unpackingStatus == 4
      "
    >
      <div
        :style="styleData.unpackBagBtn"
        v-lz-click="'4'"
        @click="buttonClick(null)"
      >
        进店逛逛
      </div>
      <div
        :style="styleData.unpackBagBtn2"
        v-lz-click="'2'"
        @click="shareClick(null)"
      >
        分享活动
      </div>
    </div>
    <div
      v-else
      :style="styleData.unpackBagBtn1"
      v-lz-click="'4'"
      @click="buttonClick(null)"
    >
      进店逛逛
    </div>
  </div>
</template>

<script>
import apis from "../../../../util/apis1.js";
let { getFudai, getFudaiPrize, myselfBargain } = apis;
import store from "../../../../store/store.js";
import {
  AddressPopComService,
  GiftPopComService,
} from "../../../../util/comCreate.js";
import {
  goToShopPage,
  exchangePrize,
  goToSkuPage,
} from "../../../../util/tools.js";
import { prizeShare } from "../../../../js/share.js";
export default {
  props: [
    "datas",
    "styleData",
    "keyData",
    "isTemplate",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      fudaiData: {
        drawPrizeGrant: {},
        shareUserList: [],
        showType: 0, //默认神秘奖品
        remainingPrize: 1,
        skuId: "",
      },
      skuId: "",
      showType: null,
      isHelpShare: false, //是否是助力人
      unpackingStatus: 0, //  拆包状态 0未拆包 1已拆包
      prizeInfo: {
        showImg: "",
        prizeName: "",
      }, //中奖信息
      drawPrizeGrant: {},
      styleDataOld: {},
      isCustomSwitching: "1", //有tab切换时
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.isHelpShare = store.state.shareUserId ? true : false;
    if (this.isTemplate) {
      var datasAll = this.templateData;
      if (datasAll) {
        console.log(datasAll, "datasAll");
        let initdatas = {
          helpNum: datasAll.fudaifei.helpNum,
          shareUserList: [],
          drawPrizeGrant: datasAll.fudaifei.draw.prizeList[0],
          showType: datasAll.fudaifei.showType,
          isFollow: datasAll.activeConditions.involvementFlag,
          unpackingStatus: 0,
          status: 1,
          remainingPrize: datasAll.fudaifei.draw.prizeList[0].totalPrizeNum,
        };
        this.fudaiData = initdatas;
        this.prizeInfo = initdatas.drawPrizeGrant;
        this.publicData.$emit("isFollowShop", initdatas.isFollow);
        this.publicData.$emit("isHelpStatus", initdatas.status);
        this.publicData.$emit("unpackingStatus", initdatas.unpackingStatus);
      } else {
        let initdatas = {
          helpNum: 1,
          shareUserList: [],
          drawPrizeGrant: {
            id: "1425265065256464385",
            prd: "cjwx",
            activityType: 10057,
            activityId: "1425265061796163585",
            createTime: 1628644646000,
            planId: "cf8b051092564bf8a0a32c7d58f041c4",
            prizeName: "京东E卡",
            prizeType: 8,
            beanNum: 1,
            showImg:
              "//img10.360buyimg.com/imgzone/jfs/t1/184190/15/14510/45811/60f163ebE652f9858/cc23bb7e08270d3d.png",
            shopId: "734259",
            itemId: 2,
            useType: 0,
          },
          remainingPrize: 3,
          showType: 0,
          isFollow: 1,
          unpackingStatus: 0,
          status: 1,
        };
        this.fudaiData = initdatas;
        this.publicData.$emit("isFollowShop", initdatas.isFollow);
        this.publicData.$emit("isHelpStatus", initdatas.status);
        this.publicData.$emit("unpackingStatus", initdatas.unpackingStatus);
      }
    } else {
      this.initData();
    }

    this.publicData.$on(
      "clickPointsHelpFriend",
      (isCustomSwitching, refName) => {
        this.isCustomSwitching = isCustomSwitching;
        if (isCustomSwitching == "1") {
          this.isHelpShare = true;
          this.fudaiData.showType = 0;
        } else if (isCustomSwitching == "2") {
          this.isHelpShare = true;
          this.fudaiData.showType = 1;
          this.prizeInfo = {
            showImg:
              "//img10.360buyimg.com/imgzone/jfs/t1/184190/15/14510/45811/60f163ebE652f9858/cc23bb7e08270d3d.png",
            prizeName: "京东E卡",
          }; //中奖信息
        } else if (isCustomSwitching == "3") {
          this.isHelpShare = false;
          this.unpackingStatus = 3;
          this.prizeInfo = {
            showImg:
              "//img10.360buyimg.com/imgzone/jfs/t1/184190/15/14510/45811/60f163ebE652f9858/cc23bb7e08270d3d.png",
            prizeName: "京东E卡",
          }; //中奖信息
          this.drawPrizeGrant = {
            prizeName: "京东E卡",
          };
        }
      }
    );
  },

  methods: {
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          isCustomSwitching: this.isCustomSwitching, //有tab切换时
          c_this: this,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {
      getFudai((initdatas) => {
        console.log(initdatas, "initdatas");
        this.fudaiData = initdatas.data;
        this.skuId = initdatas.data.skuId;
        this.unpackingStatus = initdatas.data.unpackingStatus;
        this.publicData.$emit(
          "unpackingStatus",
          initdatas.data.unpackingStatus
        );
        this.publicData.$emit("fudaiData", initdatas.data);
        // unpackingStatus 0 没有资格 1 未拆 2 拆过 3 拆成功 4 拆包失败
        if (
          initdatas.data.unpackingStatus == 2 ||
          initdatas.data.unpackingStatus == 3
        ) {
          this.drawPrizeGrant = initdatas.data.drawPrizeGrant;
          this.prizeInfo = initdatas.data.drawPrizeGrant;
        }
        if (initdatas.data.unpackingStatus == 4) {
          this.drawPrizeGrant = initdatas.data.prizeInfo;
          this.prizeInfo = initdatas.data.prizeInfo;
        } else if (initdatas.data.unpackingStatus == 0) {
          this.prizeInfo = initdatas.data.prizeInfo;
        } else if (initdatas.data.unpackingStatus == 1) {
          this.prizeInfo = initdatas.data.prizeInfo;
          //prizeInfo
          getFudaiPrize((prizeData) => {
            if (prizeData.data.unpackingStatus == 4) {
              this.prizeInfo = initdatas.data.prizeInfo;
            } else {
              this.prizeInfo = prizeData.data.drawPrizeGrant;
              this.drawPrizeGrant = prizeData.data.drawPrizeGrant;
            }
            this.unpackingStatus = prizeData.data.unpackingStatus;
            this.publicData.$emit(
              "unpackingStatus",
              prizeData.data.unpackingStatus
            );
          });
        }
        this.publicData.$emit("isFollowShop", initdatas.data.isFollow);
        this.publicData.$emit("isHelpStatus", initdatas.data.status);
      });
    },
    //填写实物地址
    goToAddress() {
      sessionStorage.setItem("addressId", this.drawPrizeGrant.addressId);
      sessionStorage.setItem("prizeGrantId", this.drawPrizeGrant.id);

      var datas = {
        isEditAddress: true,
        isAlLookAddress: false,
      };

      AddressPopComService.create(datas, (submit) => {
        AddressPopComService.close();
      });
      this.submit();
    },
    //plus会员卡爱奇艺会员卡立即兑换
    exchangeClick(prizeResultData) {
      exchangePrize();
    },
    //礼品卡如何兑换
    exchange() {
      let prizeJson = JSON.parse(this.fudaiData.drawPrizeGrant.prizeJson);
      // prizeJson.prizePicture = process.env.SKUPICTURE + prizeJson.prizePicture
      console.log(prizeJson, "prizeJson");
      GiftPopComService.create(prizeJson, (submit) => {
        GiftPopComService.close();
      });
    },
    //进店逛逛
    buttonClick(prizeResultData) {
      let shopId = store.state.shopId;
      goToShopPage(shopId);
    },
    //立即分享
    shareClick() {
      console.log("立即分享");
      prizeShare(false, this, (callBackData) => {
        console.log(callBackData, "callBackData");
      });
    },
    //立即购买商品
    buyGood(skuId) {
      goToSkuPage(skuId);
    },
  },
};
</script>

<style lang="scss">
.fudaiPrizeDiv {
  .unpack-bag {
    display: inline-block;
    width: 5.91rem;
    padding-bottom: 0.5rem;
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 10px;
    .unpack-bag-banner-shiwu {
      width: 5.91rem;
      height: 3.21rem;
    }
  }
  .draw-show-dpjf {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    margin-left: 0.44rem;
  }
  // .relaPrizeStyle {
  //   position: relative;
  //   .relaPrizeDetailStyle {
  //     width: 5.9rem;
  //     padding: 0.3rem;
  //     display: inline-block;
  //     border-radius: 0.1rem;
  //     position: relative;
  //     overflow: hidden;
  //     .draw-tag {
  //       position: absolute;
  //       top: 0;
  //       left: 0;
  //       width: 0.95rem;
  //       height: 0.95rem;
  //       background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/198300/28/2546/721/61121dcfE4fb9893c/7f5e7084f4c6b757.png);
  //       background-repeat: no-repeat;
  //       background-size: 100%;
  //     }
  //     .f-ib {
  //       display: inline-block;
  //       vertical-align: middle;
  //       .draw-show-dpjf {
  //         width: 2rem;
  //         height: 2rem;
  //         display: block;
  //       }
  //     }
  //   }
  // }
}
</style>
