<template>
    <div class="root" :style="{backgroundColor:comp.props.bgColor.val }">
        <!-- 背景图片 -->
        <img class="img-bg" :src="comp.props.bgImg.val" />
        <!-- 登录区域 -->
        <img class="img-gift" :src="comp.props.giftImg.val" />
        <div class="reg-form">
            <img class="img-close" :src="img.close" @click="onClickClose" />

            <h1 class="title">注册参与活动</h1>

            <div class="input-field">
                <img class="img-icon" :src="img.phone" />
                <input type="tel" v-model="mobile" placeholder="请输入手机号" />
            </div>

            <div class="input-field">
                <img class="img-icon" :src="img.lock" />
                <input type="tel" class="inpit-code" placeholder="请输入验证码" v-model="code"/>
                <mt-button type="danger" class="btn-code" :disabled="btnDisabled" @click="onClickVcode">{{vcodeText}}</mt-button>
            </div>

            <img class="img-smt" :src="comp.props.smtBtnImg.val" @click="onClickSmt" />
        </div>
    </div>
</template>

<script>
import eventBus from "../../../../../src/assets/js/eventBus.js";
import apiHelper from "@/assets/js/apiHelper.js";
import { Toast } from "mint-ui";

export default {
    name: "Comp",
    props: ["comp", "cfg", "selectedPage"],
    data() {
        return {
            img: {
                close:
                "http://image.supercarrier8.com/h5_template/m_001/%E6%B3%A8%E5%86%8C/%E5%8F%89%C3%97.png",
                phone:
                "http://image.supercarrier8.com/h5_template/m_001/%E6%B3%A8%E5%86%8C/%E6%89%8B%E6%9C%BA%E5%9B%BE%E6%A0%87.png",
                lock:
                "http://image.supercarrier8.com/h5_template/m_001/%E6%B3%A8%E5%86%8C/%E9%AA%8C%E8%AF%81%E7%A0%81%E5%9B%BE%E6%A0%87.png"
            },
            mobile:"",
            code:"",
            vcodeText:"获取验证码",
            btnDisabled:false,
            weChatInfo : this.sup8.context.wxUser
        };
    },
    methods: {
        onClickClose() {
            this.$parent.changeSelectedPage("3-1");
        },
        onClickSmt() {
            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;
            }
            const geo = this.sup8.context.geo.addressComponent;
            userInfo.Location = that.sup8.context.channel;
            userInfo.Address = `${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.h5Template.ActivityId;
            userInfo.EnterpriseNo = that.sup8.context.eno;
            userInfo.Mobile = that.mobile;
            userInfo.MsgCode = that.code;
            apiHelper.activityRegister(JSON.stringify(userInfo), function(res) {
                if (res.flag) {
                    Toast(res.msg);
                    that.sup8.context.userId = res.data;
                    that.$parent.changeSelectedPage("3-1");
                }else{
                    Toast(res.msg);
                }
            });
        },
        onClickVcode() {
            this.btnDisabled = true;
            let count = 60;
            let that = this;
            let eno = this.sup8.context.eno;
            
            apiHelper.getVerificationCode(eno,this.mobile, function(res) {
                if (res.flag) {
                    Toast(res.msg);
                    that.vcodeText = count+"秒后可重发";
                    let t = setInterval(() => {
                        count--;
                        that.vcodeText = count+"秒后可重发";
                        if(count==0){
                            that.btnDisabled = false;
                            that.vcodeText = "获取验证码";
                            clearInterval(t);
                        }
                    },1000)
                }else{
                    that.btnDisabled = false;
                    Toast(res.msg);
                }
            });
            
        }
    },

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

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

    mounted: function() {
        var that = this;
    }
};
</script>

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

.img-gift {
  position: absolute;
  width: 26%;
  top: 12%;
  left: 37%;
  z-index: 2;
}

.reg-form {
  position: absolute;
  background-color: white;
  width: 80%;
  /* height: 50%; */
  top: 20%;
  left: 10%;
  border-radius: 4px;
  text-align: center;
  padding-top: 15%;
}

.reg-form .img-close {
  position: absolute;
  width: 8%;
  top: 4%;
  right: 5%;
  z-index: 2;
}

.reg-form .title {
  margin-bottom: 10%;
}

.reg-form .input-field {
  width: 90%;
  height: 2.5rem;
  margin: 8% auto;
  text-align: left;
  background-color: #f8f8f8;
  /* background-color: blue; */
  border-radius: 30px;
}

.reg-form .img-smt {
  width: 60%;
  margin: 8% auto;
}

.reg-form .input-field .img-icon {
  position: relative;
  width: 1rem;
  top: 0.5rem;
  margin-left: 8%;
  margin-right: 2%;
}

.reg-form .input-field .img-code {
  position: relative;
  height: 2.5rem;
  top: 0.5rem;
  margin-right: 0%;
}

.reg-form .input-field input {
  border: 0;
  background-color: unset;
  width: 70%;
  height: 1.5rem;
  position: relative;
  top: 0.1rem;
}
.reg-form .input-field input.inpit-code {
  width: 40%;
}

.reg-form .input-field .btn-code {
  position: absolute;
  font-size: 0.8rem;
  height: 2.5rem;
  right: 5%;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  border-radius: 30px;
}

.reg-form .input-field input:focus {
  outline: 0;
}

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