<template>
  <div class="aoyi">
    <!-- 背景图片 -->
    <img
      class="img-bg"
      :src="comp.props.bgImg.val"
      :style="{padding:comp.props.padding.val,'border-radius':comp.props.radius.val}"
    />
    <div class="redpage-box">
      <img :src="hbImg" class="hbImg" alt="hbImg" @click="onClickLottery()" />
      <div class="rule" @click="openRule()">
        <span class="rule-icon">!</span>
        <span>活动规则</span>
      </div>
    </div>
    <!-- 遮罩 -->
    <div class="mask" v-show="mask"></div>
    <!-- 中奖 -->
    <div class="w-prize" v-show="zj">
      <p class="prize-text">抽到了澳艺山庄“{{prizeData[0].AwardsName}}”红包</p>
      <p class="text-c mb-3">
        <span class="amount">{{prizeData[0].GiftUnitPoints}}</span>
        <span class="yuan">元</span>
      </p>
      <div class="text-c mb-1 tips">请到微信红包中查收领取</div>
      <div class="text-c">
        <button class="share" @click="share()">分享惊喜</button>
      </div>
      <div class="text-c clear-div">
        <span class="clear" @click="clear(1)">×</span>
      </div>
    </div>
    <!-- 未中奖 -->
    <div class="no-prize" v-show="wzj">
      <p class="no-prize-text">很遗憾本次未中奖！下次再接再厉！</p>
      <div class="text-c clear-div">
        <span class="clear" @click="clear(2)">×</span>
      </div>
    </div>
    <!-- 错误 -->
    <div class="errer-prize" v-show="err">
      <img
        class="err-img"
        src="http://beta-sup8-images.oss-cn-shanghai.aliyuncs.com/h5plus/aoyierror.png"
        alt
      />
      <p class="errer-prize-text" v-html="errMsg"></p>
      <div class="text-c clear-div1">
        <span class="clear" @click="clear(3)">×</span>
      </div>
    </div>
    <!-- 活动规则 -->
    <div
      :class="{'activity-rule':envType=='run','activity-rule-d':envType=='design'}"
      v-show="rule"
    >
      <div class="rule-title">活动规则</div>
      <span class="rule-clear" @click="clear(4)">×</span>
      <div class="rule-center" v-html="comp.props.ruleTxet.val"></div>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import apiHelper from "@/assets/js/apiHelper.js";
// import { userInfo } from 'os';
import { Indicator } from "mint-ui";
import wx from "weixin-js-sdk";
import ut from "@/assets/js/utils.js";
import eventBus from "@/assets/js/eventBus.js";

export default {
  name: "WinningPrize",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      bgStyle: {},
      env: "",
      weChatInfo: this.sup8.context.wxUser,
      isReg: false, //是否有登陆流程,是否需要注册
      hbImg:
        "http://beta-sup8-images.oss-cn-shanghai.aliyuncs.com/h5plus/aoyihb.png",
      zjImg:
        "http://beta-sup8-images.oss-cn-shanghai.aliyuncs.com/h5plus/aoyizj1.png",
      wzjImg:
        "http://beta-sup8-images.oss-cn-shanghai.aliyuncs.com/h5plus/aoyiwzj.png",
      bgImg:
        "http://beta-sup8-images.oss-cn-shanghai.aliyuncs.com/h5plus/aoyibg.png",
      errImg:
        "http://beta-sup8-images.oss-cn-shanghai.aliyuncs.com/h5plus/aoyierror.png",
      mask: false,
      zj: false, //中奖
      wzj: false, //未中奖
      err: false, //错误
      rule: false, //规则
      envType: "run", //入口
      prizeData: [{ AwardsName: "", GiftUnitPoints: 0 }],
      errMsg: "",
      geo: {}
    };
  },
  created: function() {
    // var that = this;
    this.mergeCompProps(this.comp);

    switch (this.sup8.env) {
      case this.sup8._def.env.design:
        this.env = "设计器模式";
        this.envType = "design";
        break;
      case this.sup8._def.env.preview:
        this.env = "预览模式";
        break;
      case this.sup8._def.env.run:
        this.env = "运行模式";

        if (this.sup8.context.geo) {
          this.checkIsRegister();
        } else {
          eventBus.subscribe("gpsDone", data => {
            this.checkIsRegister();
          });
        }

        break;
      default:
        break;
    }
  },
  mounted: function() {},
  methods: {
    share() {
      const appConfig = ut.ssg("appConfig");
      location.href =
        appConfig.publicPath +
        "/Preview/?tid=" +
        this.sup8.h5Template.ExternalUrl +
        "&ptype=10-1";
    },
    openRule() {
      this.mask = this.envType != "design" ? true : false;
      this.rule = true;
    },
    clear(v) {
      this.mask = false;
      switch (v) {
        case 1:
          this.zj = false;
          break;
        case 2:
          this.wzj = false;
          break;
        case 3:
          this.err = false;
          break;
        case 4:
          this.rule = false;
          break;

        default:
          break;
      }
    },
    // 判断用户是否注册过
    checkIsRegister() {
      let that = this;
      let userInfo = {
        MainId: "",
        UserId: "",
        Location: "",
        Address: "",
        ActivityId: "",
        EnterpriseNo: "",
        Mobile: "",
        MsgCode: "",
        DigitCode: "",
        IsRegister: false,
		WeChat: {}
      };
      if (that.sup8.context.activityRegister == "3-2") {
        // 模板有注册页面
        userInfo.IsRegister = true;
      }
      console.log(100002);
      console.log(this.sup8.context.geo);
      const geo = !!this.sup8.context.geo ? this.sup8.context.geo : "";
      userInfo.Location = that.sup8.context.channel;
      userInfo.Address = geo != "" ? `${geo.address}` : "";
      userInfo.WeChat = that.weChatInfo;
      userInfo.DigitCode = that.sup8.codeInfo.Code;
      userInfo.ActivityId = !!that.sup8.h5Template
        ? that.sup8.h5Template.ActivityId
        : "";
      userInfo.EnterpriseNo = that.sup8.context.eno;
      Indicator.open();
      apiHelper.checkIsRegister(JSON.stringify(userInfo), function(res) {
        Indicator.close();
        if (res.flag) {
          // that.isReg = false;
          // that.sup8.context.userId = res.data;
          // IsNeedRegister：true：需要注册，false:不需要注册
          if (res.data.IsNeedRegister) {
            that.isReg = true;
          } else {
            that.isReg = false;
            that.sup8.context.userId = res.data.UserId;
          }
        } else {
          that.isReg = true;
          that.err = true;
          that.mask = true;
          that.errMsg = "网络开小差了，请稍后再试";
          // if(that.sup8.context.activityRegister == "3-2"){
          //     // 模板有注册页面
          //     that.isReg = true;
          // }
        }
      });
    },
    onClickLottery() {
      let that = this;
      switch (that.sup8.env) {
        case that.sup8._def.env.design:
          break;
        case that.sup8._def.env.preview:
          this.$parent.changeSelectedPage("3-3");
          break;
        case that.sup8._def.env.run:
          if (!this.sup8.context.wxUser) {
            Toast("参与活动需要微信授权，请重新扫码授权参与");
            return;
          }
          if (!this.isReg) {
            this.participationActivity();
          }
          break;
        default:
          break;
      }
    },
    participationActivity() {
      let that = this;
      if (that.sup8.context.decodestatus) {
        that.mask = true;
        that.err = true;
        that.errMsg = "无法参与活动(" + that.sup8.context.decodestatus + ")";
        return;
      }
      let userInfo = {
        MainId: "",
        UserId: "",
        Location: "",
        Address: "",
        ActivityId: "",
        EnterpriseNo: "",
        Mobile: "",
        MsgCode: "",
        DigitCode: "",
        IsRegister: false,
        WeChat: {},
        WebBrowser: navigator.userAgent,
		TargetPeople:this.sup8.context.targetpeople,
		ActivityType:this.sup8.context.businesstype
      };
      if (that.sup8.context.activityRegister == "3-2") {
        // 模板有注册页面
        userInfo.IsRegister = true;
      }
      const geo = !!this.sup8.context.geo
        ? this.sup8.context.geo.addressComponent
        : "";
      userInfo.Location = that.sup8.context.channel;
      userInfo.Address =
        geo != ""
          ? `${geo.country}${geo.province}${geo.city}${geo.district}${geo.street}${geo.street_number}`
          : "";
      userInfo.WeChat = that.weChatInfo;
      userInfo.DigitCode = that.sup8.codeInfo.Code;
      userInfo.ActivityId = that.sup8.context.activityid;
      userInfo.EnterpriseNo = that.sup8.context.eno;
      userInfo.UserId = that.sup8.context.userId;
      Indicator.open();
      apiHelper.participationActivity(
        JSON.stringify(userInfo),
        function(res) {
          Indicator.close();
          that.mask = true;
          if (res.flag) {
            if (!!res.data.WiningRecords && res.data.WiningRecords.length > 0) {
              that.prizeData = res.data.WiningRecords;
              that.zj = true;
            } else {
              that.wzj = true;
            }
          } else {
            // 0:正常，1：活动规则，2：奖项规则，9：系统错误
            if (res.errorCode == 1 || res.errorCode == 9) {
              that.err = true;
              that.errMsg = decodeURIComponent(res.msg);
            } else {
              that.wzj = true;
            }
          }
        },
        function(res) {
          Indicator.close();
          Toast("网络开小差了，请稍后再试");
        }
      );
    }
  }
};
</script>

<style scoped>
.aoyi {
  /* overflow: hidden; */
  margin-bottom: 57px;
  position: relative;
}
.img-bg {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  z-index: 1;
}
.redpage-box {
  position: absolute;
  left: 25%;
  top: 14%;
  width: 50%;
}
.hbImg {
  width: 100%;
}
.rule {
  position: absolute;
  width: 100%;
  top: 78%;
  text-align: center;
  font-size: 0.9rem;
  color: #404040;
}
.rule-icon {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  /* line-height: .9rem; */
  text-align: center;
  border: 1px solid #404040;
  font-size: 0.8rem;
}
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
}
.w-prize {
  position: fixed;
  padding-top: 7rem;
  top: 50%;
  left: 50%;
  width: 18rem;
  height: 25rem;
  margin-left: -9rem;
  margin-top: -13rem;
  background: url("http://beta-sup8-images.oss-cn-shanghai.aliyuncs.com/h5plus/aoyizj.png")
    no-repeat;
  background-size: 100%;
  z-index: 10001;
  box-sizing: border-box;
}
.no-prize {
  position: fixed;
  padding-top: 12.2rem;
  top: 50%;
  left: 50%;
  width: 15rem;
  height: 19.5rem;
  margin-left: -7.5rem;
  margin-top: -10rem;
  background: url("http://beta-sup8-images.oss-cn-shanghai.aliyuncs.com/h5plus/aoyiwzj.png")
    no-repeat;
  background-size: 100%;
  z-index: 10001;
  box-sizing: border-box;
}
.errer-prize {
  position: fixed;
  padding-top: 2rem;
  top: 50%;
  left: 50%;
  width: 15rem;
  height: 15rem;
  margin-left: -7.5rem;
  margin-top: -7.5rem;
  background: #fff;
  background-size: 100%;
  z-index: 10001;
  box-sizing: border-box;
  border-radius: 1rem;
}
.activity-rule {
  position: fixed;
  padding-bottom: 0.8rem;
  top: 50%;
  left: 50%;
  width: 16rem;
  height: 25rem;
  margin-left: -8rem;
  margin-top: -13rem;
  background: #fff;
  background-size: 100%;
  z-index: 10001;
  border-radius: 1rem;
  overflow: hidden;
}
.activity-rule-d {
  position: absolute;
  padding-bottom: 0.8rem;
  top: 50%;
  left: 50%;
  width: 16rem;
  height: 25rem;
  margin-left: -8rem;
  margin-top: -13rem;
  background: #fff;
  background-size: 100%;
  z-index: 10001;
  border-radius: 1rem;
  overflow: hidden;
}
.rule-title {
  line-height: 5rem;
  background: #c4a47e;
  text-align: center;
  color: #fff;
  font-weight: bold;
}
.rule-center {
  height: 20rem;
  padding: 0 1rem;
  overflow-y: auto;
}
.tips {
  color: #d9b04e;
}
.share {
  position: relative;
  width: 13rem;
  height: 3rem;
  background: #fff;
  border: none;
  border-radius: 3rem;
  color: #e01e3d;
  font-weight: bold;
  letter-spacing: 0.2rem;
}
.share::after {
  content: "";
  position: absolute;
  width: 12.35rem;
  height: 2.35rem;
  top: 0.3rem;
  left: 0.3rem;
  border: 1px solid #e01e3d;
  border-radius: 3rem;
}
.prize-text {
  margin: 0 auto;
  width: 8rem;
  color: #e8b168;
  font-size: 0.8rem;
  text-align: center;
}
.no-prize-text {
  margin: 0 auto;
  width: 8.5rem;
  color: #d9b04e;
  font-size: 0.9rem;
  text-align: center;
}
.errer-prize-text {
  margin: 0 auto;
  width: 12rem;
  color: #636363;
  font-size: 0.9rem;
  text-align: center;
  word-wrap: break-word;
}
.err-img {
  width: 10rem;
  display: block;
  margin: 0 auto 1rem;
}
.text-c {
  text-align: center;
}
.amount {
  font-size: 3rem;
  color: #d11937;
  font-weight: bold;
}
.yuan {
  font-size: 0.9rem;
  color: #d11937;
}
.clear-div {
  position: absolute;
  width: 100%;
  bottom: 0;
}
.clear-div1 {
  position: absolute;
  width: 100%;
  bottom: -2.4rem;
}
.clear {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  text-align: center;
  line-height: 1.2rem;
  color: #c3c3c3;
  border: 2px solid #c3c3c3;
  border-radius: 100%;
  font-size: 1rem;
}
.rule-clear {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 1.2rem;
  height: 1.2rem;
  text-align: center;
  line-height: 1.2rem;
  color: #ddd1c3;
  border: 2px solid #ddd1c3;
  border-radius: 100%;
  font-size: 1rem;
}
.mb-3 {
  margin-bottom: 3rem;
}
.mb-1 {
  margin-bottom: 1rem;
}
</style>
