<template>
  <div class="root" :style="{backgroundColor:comp.props.bgColor.val }">
    <!-- 背景图片 -->
    <img class="img-bg" :src="comp.props.bgImg.val" />

    <img class="img-elogo" :src="sup8.enoInfo.logoUrl" />

    <div class="ename">{{sup8.enoInfo.name}}</div>

    <!-- 登录区域 -->
    <img class="img-gift" :src="comp.props.giftImg.val" />
    <div class="dailog">
      <h2 class="title">
        恭喜您！
        <br />
        获得{{prizeInfo[0].AwardsName}}！
      </h2>
      <div class="row pos-r" v-for="p in prizeInfo" :key="p.Id">
        <div class="sawtooth col gift-card money" v-show="p.GiftType==2">
          ¥
          <span class="num">{{p.GiftUnitPoints}}</span>微信红包
        </div>
        <div class="sawtooth col gift-card point" v-show="p.GiftType==4">
          <span class="num">{{p.GiftUnitPoints}}</span>积分
        </div>
        <div class="col gift-state">已发放</div>
      </div>

      <!-- <div class="row">
                <div class="sawtooth col gift-card point">
                    <span class="num">5</span>积分
                </div>
                <div class="col gift-state">已发放</div>
      </div>-->

      <img
        class="img-smt"
        src="http://image.supercarrier8.com/h5_template/m_001/%E4%B8%AD%E5%A5%96/%E7%BB%A7%E7%BB%AD%E5%8F%82%E4%B8%8E.png"
        @click="scan()"
      />
      <div class="result-msg" v-show="showTxt">红包已放入您的微信钱包</div>
    </div>
  </div>
</template>

<script>
import apiHelper from "@/assets/js/apiHelper.js";
import { Toast } from "mint-ui";
import ut from "@/assets/js/utils.js";
import wx from "weixin-js-sdk";
export default {
  name: "Comp",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      captcha: "",
      prizeInfo: [],
      showTxt: false
    };
  },

  created: function() {
    var that = this;
    that.mergeCompProps(that.comp);

    switch (that.sup8.env) {
      case that.sup8._def.env.design:
      case that.sup8._def.env.preview:
        that.prizeInfo = [
          { GiftType: 2, GiftUnitPoints: 5, Id: 1 },
          { GiftType: 2, GiftUnitPoints: 5, Id: 2 },
          { GiftType: 4, GiftUnitPoints: 5, Id: 3 }
        ];
        that.sup8.enoInfo = {
          logoUrl:
            "http://ccn.yesno.com.cn/themes/simplebootx/Public/yesno/img/logo.png",
          name: "中商网络"
        };
        break;

      case that.sup8._def.env.run:
        that.env = "运行模式";
        that.prizeInfo = !!ut.ssg("prizeInfo") ? ut.ssg("prizeInfo") : [];
        that.prizeInfo.forEach(v => {
          if (v.GiftType == 2) {
            that.showTxt = true;
          }
        });
        // that.getWxConfig();
        break;
      default:
        break;
    }
  },

  mounted: function() {
    if (this.sup8.env == this.sup8._def.env.design) {
      $(".part_phone_screen").css("background", this.comp.props.bgColor.val);
    } else {
      $("body").css("background", this.comp.props.bgColor.val);
    }
  },

  methods: {
    // getWxConfig() {
    //   let that = this;
    //   if (that.sup8.$utils.isWechat()) {
    //     let that = this;
    //     const eNo = that.sup8.context.eno;
    //     let url = "";
    //     if (!!that.sup8.$utils.ssg("urlCode")) {
    //       url = that.sup8.$utils.ssg("urlCode");
    //     } else {
    //       url = location.href;
    //     }
    //     console.log("url+++:" + url);
    //     apiHelper.getWxJsSdkConfig(eNo, url.split("#")[0], function(res) {
    //       if (res.flag) {
    //         res = res.data;
    //         wx.config({
    //           debug: false, // 开启调试模式,
    //           appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
    //           timestamp: res.timestamp, // 必填，生成签名的时间戳
    //           nonceStr: res.nonceStr, // 必填，生成签名的随机串
    //           signature: res.signature, // 必填，签名，见附录1
    //           jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    //         });
    //         // wx.error(function(res) {
    //         //     alert("出错了：" + res.errMsg);
    //         // });
    //         // wx.ready(function() {
    //         //     alert("成功了" );
    //         // });
    //       }
    //     });
    //   }
    // },
    scan() {
      let that = this;
      console.log(11);
      wx.scanQRCode({
        needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function(res) {
        //   let url = _.trim(res.resultStr); // 当needResult 为 1 时，扫码返回的结果
        //   sessionStorage.removeItem("urlCode");
        //   location.href = url;
        //   console.log("www"+res);
        },
        fail:function(e){
            console.log(JSON.stringify(e));
        }
      });
    }
  }
};
</script>

<style scoped>
.pos-r {
  position: relative;
}
.root {
  height: 100vh;
  overflow: hidden;
  background-color: #fee3d2;
}
.img-bg {
  width: 100% !important;
  overflow: hidden;
  z-index: 1;
}

.img-elogo {
  position: absolute;
  width: 20%;
  top: 5%;
  left: 40%;
  z-index: 2;
}

.ename {
  position: absolute;
  width: 100%;
  top: 17%;
  text-align: center;
  color: white;
  font-size: 1rem;
}

.img-gift {
  position: absolute;
  width: 40%;
  top: 16%;
  left: 30%;
  z-index: 2;
}

.dailog {
  position: absolute;
  background-color: white;
  width: 80%;
  top: 28%;
  left: 10%;
  border-radius: 4px;
  text-align: center;
  padding-top: 15%;
}

.dailog .title {
  margin-bottom: 10%;
  color: #e48427;
}

.dailog .row {
  width: 90%;
  margin: 8% auto;
  text-align: left;
}

.dailog .row .col {
  display: inline-block;
  width: 32%;
}

.dailog .row .gift-card {
  font-size: 1rem;
  color: white;
  padding: 0.5rem;
  text-align: center;
  width: 55%;
}

.dailog .row .gift-state {
  border: 1px solid #bbbbbb;
  border-radius: 10rem;
  font-size: 1rem;
  color: #bbbbbb;
  text-align: center;
  padding: 0.5rem 0;
  width: 25%;
  right: 0;
  top: 0.3rem;
  position: absolute;
}

.dailog .result-msg {
    padding-bottom: .8rem;
  text-align: center;
  font-size: .8rem;
  color: #723418;
}

.money {
  background-color: #00a8ff;
}

.point {
  background-color: #ffb005;
}

.num {
  font-size: 1.5rem;
  padding: 0 0.5rem;
}

.dailog .img-smt {
  width: 60%;
  margin: 0 auto .5rem;
}

.sawtooth {
  /* 相对定位，方便让before和after伪元素绝对定位偏移 */
  position: relative;
}

.sawtooth:before,
.sawtooth:after {
  content: " ";
  width: 0;
  height: 100%;
  /* 绝对定位进行偏移 */
  position: absolute;
  top: 0;
}

.sawtooth:before {
  /* 圆点型的border */
  border-right: 2px dotted white;
  /* 偏移一个半径，让圆点的一半覆盖p */
  left: -1px;
}

.sawtooth:after {
  /* 圆点型的border */
  border-left: 2px dotted white;
  /* 偏移一个半径，让圆点的一半覆盖p */
  right: -1px;
}

/* 设计器 */
.env-design .root {
  height: 538px !important;
}
</style>
