<view class="container">
    <!--手機號-->
    <view class="section">
        <text class="txt">手機號</text>
        <input value="{{mobile}}" placeholder-class="placeholder"  placeholder="11位手機號碼" type="number" maxlength="11"
               bindinput="mobileInput"/>
    </view>
    <!--圖片驗證碼-->
    <view class="section">
        <view>
            <text class="txt">圖形驗證碼</text>
            <input placeholder-class="placeholder" placeholder="輸入圖形驗證碼" type="text" maxlength="4"
                   bindinput="imgCaptchaInput"/>
        </view>

        <image class="imgBtn" src="{{imgCodeSrc}}" bindtap="getImgCode"></image>
    </view>
    <!--短信驗證碼-->
    <view class="section">
        <view>
            <text class="txt">驗證碼</text>
            <input placeholder-class="placeholder" placeholder="輸入驗證碼" type="number" maxlength="6"
                   bindinput="smsCaptchaInput"/>
        </view>

        <view class="smsBtn" bindtap="getSMS">{{captchaText}}</view>
    </view>

    <view class="agree" style="margin-top:40rpx">
        <checkbox-group bindchange="checkboxChange">
          <checkbox class="check" value="1" checked="true" bindchange="checkboxChange"></checkbox>
        </checkbox-group>
        <span>已閱讀并同意</span> <text style="color:#98c7ff" bindtap="xieyi">《用戶使用協議》</text>
    </view>
    <view class="regist {{phoneAll&&checkAgree?'active':''}}" bindtap="regist">立即登錄</view>
</view>
        <!--mask-->
<view class="toast_mask" wx:if="{{isShowToast}}"></view>
        <!--以下為toast顯示的內容-->
<view class="toast_content_box" wx:if="{{isShowToast}}">
<view class="toast_content">
    <view class="toast_content_text">
        {{toastText}}
    </view>
</view>
</view>

// 獲取全局應用程序實例對象
const app = getApp()

Page({
    data: {
        //toast默認不顯示
        isShowToast: false,
        mobile: '',
        imgCode: '',
        code: '',
        // inviteCode: '',
        errorContent: '請輸入手機號',
        timer: 60,
        captchaText: '獲取驗證碼',
        captchaSended: false,
        isReadOnly: false,
        capKey: '',
        sendRegist: false,
        imgCodeSrc: '',
        phoneAll: false,
        checkAgree:true,
        checkboxValue:[1],
    },
    // 顯示彈窗
    showToast(txt, duration = 1500) {
        //設置toast時間，toast內容
        this.setData({
            count: duration,
            toastText: txt
        });
        var _this = this;
        // toast時間
        _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000;
        // 顯示toast
        _this.setData({
            isShowToast: true,
        });
        // 定時器關閉
        setTimeout(function () {
            _this.setData({
                isShowToast: false
            });
        }, _this.data.count);
    },
    // 雙向綁定mobile
    mobileInput(e) {
        this.setData({
            mobile: e.detail.value
        });

        if(this.data.mobile.length===11){
            this.setData({
                phoneAll: true
            });
        }else if(this.data.mobile.length<11){
            this.setData({
                phoneAll: false
            });
        }
    },
    // 雙向綁定img驗證碼
    imgCaptchaInput(e) {
        this.setData({
            imgCode: e.detail.value
        });
    },
    // 雙向綁定sms驗證碼
    smsCaptchaInput(e) {
        this.setData({
            code: e.detail.value
        });
    },
    // 同意協議
    checkboxChange(e) {
        this.data.checkboxValue = e.detail.value;
        if(this.data.checkboxValue[0]==1){
            this.setData({
                checkAgree: true
            });
        }else {
            this.setData({
                checkAgree: false
            });
        }
    },
    // 獲取短信驗證碼
    getSMS() {
        var that = this.data;

        if (!that.mobile) {
            this.showToast('請輸入手機號');
        } else if (that.mobile.length != 11 || isNaN(that.mobile)) {
            this.showToast('請輸入正確手機號');
        }
        else if (that.imgCode.length != 4) {
            this.showToast('請輸入正確圖片驗證碼');
        }
        else {
            if (that.captchaSended) return;
                this.setData({
                    captchaSended: true
                })
            app.api.getSMSByMobileAndCaptcha({
                mobile: that.mobile,
                capKey: that.capKey,
                code: that.imgCode,
                type:1
           
            }).then((result) => {
                this.showToast(result.message);
                if (result.code != 1) {
                    this.getImgCode();
                    this.setData({
                        captchaSended: false,
                    });
                } else {
                    var counter = setInterval(() => {
                        that.timer--;
                        this.setData({
                            timer: that.timer,
                            captchaText: `${that.timer}秒`,
                            isReadOnly: true
                        });
                        if (that.timer === 0) {
                            clearInterval(counter);
                            that.captchaSended = false;
                            that.captchaText = '獲取驗證碼';
                            this.setData({
                                timer: 60,
                                captchaText: '獲取驗證碼',
                                captchaSended: false
                            })
                        }
                    }, 1000);
                }
            });
        }
    },
    // 獲取圖形碼
    getImgCode() {
        var capKey = "zdx-weixin" + Math.random();
        this.setData({
            imgCodeSrc: "http://prezdx.geinihua.com/invite/WeChat/verify?capKey=" + capKey,
            capKey: capKey
        });
    },
    //用戶使用協議
    xieyi() {
        wx.navigateTo({
            url: '../userXieyi/userXieyi'
        })

    },
    // 注冊
    regist() {
        var that = this.data;
        if(!that.checkAgree||!that.phoneAll){
            return
        }
        // sessionCheck為1，目的是防止微信code碼先于session過期
        var code = wx.getStorageSync('wxCode');
        var sessionCheck = wx.getStorageSync('sessionCheck');

        wx.setStorageSync('mobile',that.mobile);

        if (!that.mobile) {
            this.showToast('請輸入手機號');
        } else if (that.mobile.length != 11 || isNaN(that.mobile)) {
            this.showToast('請輸入正確手機號');
        } else if (that.code.length != 6) {
            this.showToast('請輸入正確驗證碼');
        } else {
            wx.showLoading({
                title: '加載中...',
            });
            app.api.loginByCaptcha({
                mobile: that.mobile,
                smsCode: that.code,
                code: code,
                sessionCheck:sessionCheck,
            }).then((res) => {
                wx.hideLoading();
                if (res.code == 2||res.code==1) {
                    //注冊成功
                    wx.setStorageSync('token', res.businessObj.token);
                    wx.setStorageSync('userId',res.businessObj.userId);
                    this.sucessCb(res);
                    app.globalData.isLogin = true; //設置為登錄成功
                } else {
                    this.showToast(res.message);
                }
            });
        }
    },
    // 成功回調
    sucessCb(res) {
        wx.redirectTo({
            url: '/pages/index/index'
        })
    },
    onLoad: function () {
        this.getImgCode();
        var that=this;
        if(wx.getStorageSync('mobile')){
            that.setData({
                mobile: wx.getStorageSync('mobile'),
            })
        }
        if(this.data.mobile.length===11){
            this.setData({
                phoneAll: true
            });
        }

    },

})