<!--  亮健优医福利惠 -->
<template>
    <div class="main">
        <!-- 背景 -->
        <div class="bg">
            <img :src="rules.ImgBackgroundUrl" alt class="img" />
        </div>
        <div class="form">
            <!-- 手机号码 -->
            <div class="order-wrapper animated flipInY">
                <van-cell-group>
                    <van-field
                        v-model.trim="phone"
                        :left-icon="icon.iconPhone"
                        placeholder="请输入手机号"
                    />
                    <van-field
                        v-model.trim="verificationCode"
                        :left-icon="icon.iconKey"
                        center
                        clearable
                        placeholder="请输入短信验证码"
                    >
                        <van-button
                            slot="button"
                            size="small"
                            round
                            type="info"
                            :disabled="SendSMSDisabled"
                            @click="sendSMS"
                        >{{SMSTips}}</van-button>
                    </van-field>

                    <!-- <van-field value="输入框已禁用" label="验证码" left-icon="contact" /> -->
                </van-cell-group>
                <!-- 获取专属海报 -->
                <van-button
                    class="animated fadeInUp"
                    slot="button"
                    size="large"
                    round
                    type="info"
                    @click="getPoster"
                >获取专属海报</van-button>
                <!-- 规则 -->
                <div class="rules animated bounceInLeft" @click="rulesShow=true">活动规则</div>
            </div>
        </div>

        <van-action-sheet v-model="rulesShow" title="活动规则">
            <div class="content">
                <div class="title">活动时间：</div>
                <p>{{rules.AppointmentsStartTime |getTime }}~{{rules.AppointmentsEndTime |getTime}}</p>
                <div class="title">活动说明：</div>
                <p>{{rules.ActivityDescription}}</p>
                <div class="title">活动规则：</div>
                <p>{{rules.ActivityRules }}</p>
            </div>
        </van-action-sheet>
    </div>
</template>
<script>
    import { iconPhone, iconKey } from "@/assets/js/icon.js"; //图标
    export default {
        name: "ljluck",
        data() {
            return {
                phone: "", //手机号码
                verificationCode: "", // 短信验证码
                SendSMSDisabled: false, // 发送验证码是否禁用
                timeId: null, //定时器
                SMSTips: "获取验证码", // 发送短信验证码提示文字
                icon: {
                    iconPhone,
                    iconKey
                },
                rules: {}, // 规则信息
                rulesShow: false, //显示规则
                time: 0 //倒计时
            };
        },
        created() {
            this.init();
        },
        methods: {
            async init() {
                let { data } = await this.$http.GetFollowEvent();
                if (data.IsSuccess) {
                    this.rules = data.ResultObject;
                }
            },
            /** 获取海报 */
            async getPoster() {
                if (this.verify() && this.verify("code")) {
                    this.LJ_LOADING();
                    let { data } = await this.$http.PosterFissionBinding(
                        this.phone,
                        this.verificationCode
                    );
                    if (data.IsSuccess) {
                        // 成功
                        this.$toast("海报获取成功，本页面即将关闭");
                        setTimeout(_ => {
                            // 关闭微信网页
                            // WeixinJSBridge.invoke("closeWindow", {}, function(res) {
                            //     //alert(res.err_msg);
                            // });
                            WeixinJSBridge.call("closeWindow");
                        }, 1500);
                    } else {
                        this.$toast(data.ResultMsg);
                    }
                }
            },
            // 发送短信验证码
            async sendSMS() {
                if (this.verify()) {
                    this.LJ_LOADING();
                    // 短信倒计时
                    this.countDown();
                    // 获取短信验证码
                    let { data } = await this.$http.SendModifyPswdSMS({
                        mobile: this.phone,
                        verificationCode: ""
                    });
                    if (data.IsSuccess) {
                        // 成功
                        this.$toast("短信发送成功");
                        console.log(data);
                    } else {
                        // 解除禁用状态
                        this.$toast(data.ResultMsg);
                        this.time = 0;
                        setTimeout(_ => {
                            this.SendSMSDisabled = false;
                        }, 100);
                    }
                }
            },
            // 倒计时  callback => 回调函数
            countDown() {
                // 禁用按钮
                clearInterval(this.timeId);
                this.SendSMSDisabled = true;
                this.time = 60;
                this.timeId = setInterval(_ => {
                    this.time -= 1;
                    this.SMSTips = `还剩${this.time}秒`;
                    if (this.time <= 0) {
                        this.SMSTips = "获取验证码";
                        this.SendSMSDisabled = false;
                        clearInterval(this.timeId);
                        this.timeId = null;
                    }
                }, 1000);
            },
            // 验证正则
            verify(type = "phone") {
                // 手机
                if (type == "phone") {
                    let MobileReg = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
                    if (!MobileReg.test(this.phone)) {
                        this.$toast("请输入正确的手机号");
                        return false;
                    }
                    return true;
                }
                // 验证码
                if (type == "code") {
                    let SMSReg = /^[0-9]{6}$/;
                    if (!SMSReg.test(this.verificationCode)) {
                        this.$toast("请输入6位短信验证码");
                        return false;
                    }
                    return true;
                }
                return false;
            }
        }
    };
</script>
<style lang='less' scoped>
    .img {
        display: block;
        position: absolute;
        z-index: 0;
        width: 100%;
    }
    .main {
        height: 100%;
        // overflow: hidden;
        .bg {
            height: 4.7rem;
        }
        .animated {
            animation-duration: 1s !important;
        }
        .rules {
            width: 2rem;
            height: 0.6rem;
            font-size: 0.3rem;
            line-height: 0.6rem;
            color: #666;
            margin: 0 auto;
        }
        .van-button--large {
            width: 80%;
            height: 0.8rem;
            line-height: 0.8rem;
            margin: 0.3rem 0 0.34rem;
        }
        .van-button--small {
            border-radius: 0.1rem;
        }
        .form {
            position: relative;
            z-index: 1;
        }
    }
    .content {
        padding: 0.3rem;
        color: #666;
        line-height: 2;
        text-align: left;
        .title {
            color: #000;
            font-size: 0.26rem;
            &:not(:nth-of-type(1)) {
                margin-top: 0.4rem;
            }
        }
        p {
            font-size: 0.24rem;
        }
    }
    .order-wrapper {
        position: relative;
        width: 6.9rem;
        background-color: #ffffff;
        box-shadow: 0.03rem 0.04rem 0.1rem 0rem rgba(218, 218, 218, 0.541);
        border-radius: 0.2rem;
        margin: 0 auto;
        overflow: hidden;
        z-index: 2;
        padding: 0.55rem;

        /deep/ .van-cell {
            background: #f8f8f8;
            border-radius: 0.1rem;
            margin-bottom: 0.36rem;
        }
        /deep/ .van-cell__title {
            flex: none;
        }
        /deep/ .van-cell__value {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 0.2rem;
        }

        // 提示信息样式
        .tipsMessage /deep/ .van-cell__value {
            font-size: 0.2rem;
            line-height: 0.3rem;
            color: #999999;
            overflow: auto;
            white-space: pre-wrap;
            text-overflow: clip;
        }

        /deep/ .van-icon {
            filter: contrast(0.1);
        }
    }
</style>