<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">
            <div class="title">很遗憾，您本次未中奖！</div>

            <div class="row">谢谢参与</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>
    </div>
</template>

<script>
import ut from "@/assets/js/utils.js";
import apiHelper from "@/assets/js/apiHelper.js";
import wx from "weixin-js-sdk";

export default {
    name: "Comp",
    props: ["comp", "cfg", "selectedPage"],
    data() {
        return {
            captcha: "",
            msg:""
        };
    },
    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;
        //         }
        //         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
        //                 });
        //             }
        //         })
        //     }
        // },
        scan() {
            let that = this;
            console.log("hah qqq");
            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;
                },
                fail:function(e){
                    console.log(JSON.stringify(e));
                }
            });
        }
    },

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

        switch (that.sup8.env) {
            case that.sup8._def.env.design:
                that.env = "设计器模式";
                that.sup8.enoInfo={logoUrl:"http://ccn.yesno.com.cn/themes/simplebootx/Public/yesno/img/logo.png",name:"中商网络"};
                break;
            case that.sup8._def.env.preview:
                that.env = "预览模式";
                break;
            case that.sup8._def.env.run:
                that.env = "运行模式";
                // that.getWxConfig();
                break;
            default:
                break;
        }
    },

    mounted: function() {
        // this.msg = !!ut.ssg("prizeInfo")?ut.ssg("prizeInfo"):"很遗憾，您本次未中奖";
    }
};
</script>

<style scoped>
.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: 19%;
  text-align: center;
  color: white;
  font-size: 1rem;
}

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

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

.dailog .title {
  margin-top: 10%;
  margin-bottom: 10%;
  color: #e48427;
  font-size: 1.2rem;
}

.dailog .row {
  width: 100%;
  margin: 8% auto;
  color: #f91f1d;
  font-size: 2rem;
}
.dailog .img-smt {
  width: 60%;
  margin: 8% auto;
}
/* 设计器 */
.env-design .root {
  height: 538px !important;
}
</style>
