<template>
    <view class="content">
        <uni-notice-bar text="手机号及验证码是必填的;为了防止机器恶意注册,获取手机短信前前您需要先进行人机验证。" />
        <view class="uni-common-mt uni-form">
            <form @submit="formSubmit" @reset="formReset">
                <view class="uni-form-item ">
                    <view class="title"><code>*</code>手机号</view>
                    <input class="uni-input" name="mobile" v-model="FormData.mobile" placeholder="您的手机号" type="text"
                        @blur="checkMobile" @input="checkMobile" />
                </view>

                <view class="uni-form-item ">
                    <uni-row class="demo-uni-row" width="100%">
                        <uni-col :span="6">
                            <view class="demo-uni-col dark">
                                <view @tap="captchaGet" class="captcha">{{captcha}}
                                </view>
                            </view>
                        </uni-col>
                        <uni-col :span="18">
                            <view class="demo-uni-col">
                                <input class="uni-col-input" @input="captchaInput" placeholder="人机验证,输入左侧数字" type="text"
                                    autocomplete="off" />
                            </view>
                        </uni-col>
                    </uni-row>
                </view>

                <uni-section title="短信验证码" type="circle" :subTitle="mobileErr">
                    <view class="example-body">
                        <uni-row v-show="FormData.mobile" class="demo-uni-row" width="100%">
                            <uni-col :span="14">
                                <view class="demo-uni-col">
                                    <view class="uni-form-item ">
                                        <input class="uni-col-input" placeholder="请输入验证码" v-model="FormData.vcode"
                                            name="vcode" type="text" />
                                    </view>
                                </view>
                            </uni-col>
                            <uni-col :span="10">
                                <view :class='"demo-uni-col vcode-button "+ (captchaPassed?"primary":"dark")'>
                                    <view @tap="getVcode" v-show="!vcode_again">获取验证码
                                    </view>
                                    <view v-show="vcode_again">重新获取 {{leftSecond}}</view>
                                </view>
                            </uni-col>
                        </uni-row>
                    </view>
                </uni-section>

                <view class="uni-form-item ">
                    <view class="title">持久登陆</view>
                    <view>
                        <switch name="isLong" :checked="isLong===1" />
                    </view>
                </view>
                <view class="uni-form-item">
                    <view class="help-block">
                        启用后，只有您主动点击退出按钮后，你的登陆状态才会被取消。
                    </view>
                </view>

                <view class="uni-button-group">
                    <uni-row class="demo-uni-row" width="100%">
                        <uni-col :span="12">
                            <button class="btn btn-success" form-type="submit">确认</button>
                        </uni-col>
                        <uni-col :span="12">
                            <button class="btn btn-default" type="default" form-type="reset">取消</button>
                        </uni-col>
                    </uni-row>
                </view>
            </form>
        </view>

        <uni-fab ref="fab" :pattern="fabs.pattern" :content="fabs.content" :horizontal="fabs.horizontal"
            :vertical="fabs.vertical" :direction="fabs.direction" @trigger="fabTrigger" @fabClick="fabClick" />
    </view>
</template>

<script>
    import graceChecker from "@/common/graceChecker.js";
    import config from "@/config/ctms.config.js";
    import utils from "@/utils/common.js";
    import ctms from '@/apis/ctms/index.js';
    import hi from "@/common/util.js";

    export default {
        data() {
            return {
                FormData: {
                    mobile: '',
                    vcode: ''
                },
                isLong: 1,
                vcode_again: false,
                vcode_time: 90,
                leftSecond: 90,
                captcha: '8888',
                captchaPassed: false,
                mobileErr: '填写手机号后获取验证码并输入',
                timer: null,

                //悬浮按钮
                fabs: {
                    horizontal: 'left',
                    vertical: 'bottom',
                    direction: 'horizontal', //horizontal水平展开；vertical垂直展开
                    pattern: {
                        color: '#7A7E83',
                        backgroundColor: '#fff',
                        selectedColor: '#007AFF',
                        buttonColor: '#fff',
                        iconColor: '#aaa'
                    },
                    content: [{
                            iconPath: '/static/fab/home.png',
                            selectedIconPath: '/static/fab/homeactive.png',
                            text: '首页',
                            active: false,
                            diyfn: 'home'
                        },
                        {
                            iconPath: '/static/fab/guanzhu.png',
                            selectedIconPath: '/static/fab/guanzhuactive.png',
                            text: '关注',
                            active: false,
                            diyfn: 'news'
                        },
                        {
                            iconPath: '/static/fab/me.png',
                            selectedIconPath: '/static/fab/meactive.png',
                            text: '用户',
                            active: false,
                            diyfn: 'user'
                        },

                        {
                            iconPath: '/static/fab/news.png',
                            selectedIconPath: '/static/fab/newsactive.png',
                            text: '公告',
                            active: false,
                            diyfn: 'notice'
                        }
                    ]
                }
            }
        },
        methods: {
            formSubmit: function(e) {
                var _that = this;
                //定义表单规则
                var rule = [{
                        name: "mobile",
                        checkType: "phoneno",
                        checkRule: "",
                        errorMsg: "手机号必填"
                    },
                    {
                        name: "vcode",
                        checkType: "notnull",
                        checkRule: "",
                        errorMsg: "验证码必填"
                    }
                ];
                //进行表单检查
                var formData = e.detail.value;
                var checkRes = graceChecker.check(formData, rule);
                if (!checkRes) {
                    uni.showToast({
                        title: graceChecker.error,
                        icon: "error"
                    });
                    return false;
                }

                //请求封装
                ctms.user.smsLogin(formData).then((res) => {
                    if (res) {
                        uni.showToast({
                            title: "登陆成功!",
                            icon: "success"
                        });
                        if (_that.uniIdRedirectUrl) {
                            uni.reLaunch({
                                url: _that.uniIdRedirectUrl
                            })
                        } else {
                            uni.navigateBack()
                        }
                    }
                });
            },
            formReset: function(e) {
                // utils.debug('清空登陆表单数据')
            },
            captchaGet: function() {
                var code = hi.captcha.get('login');
                this.captcha = code;
            },
            captchaInput: function(e) {
                if (e.detail.value === this.captcha) this.captchaPassed = true;
            },
            checkMobile: function() {
                var res = hi.isPhone(this.FormData.mobile);
                if (!res) {
                    this.mobileErr = '请输入正确的手机号码';
                } else {
                    this.FormData.mobile = res;
                    this.mobileErr = '您的手机号码是：' + res;
                }
            },
            getVcode: function() {
                if (!this.captchaPassed) {
                    uni.showToast({
                        title: "请先通过人机验证",
                        icon: "none"
                    })
                    return false;
                }
                let timer = setInterval(() => {
                    if (this.leftSecond === 0) {
                        clearInterval(this.timer)
                        this.leftSecond = this.vcode_time;
                        this.vcode_again = false;
                    } else {
                        this.leftSecond--;
                    }
                }, 1000);
                this.timer = timer;
                this.vcode_again = true;
                this.requestVcode();
            },
            requestVcode: function() {
                ctms.vcode.get('login', this.FormData.mobile).then(function(res) {
                    if (res) {
                        switch (res.errorcode) {
                            case 0:
                                utils.toast('短信已发送');
                                break;
                            default:
                                var msg = res.msg || '短信发送失败';
                                utils.toast(msg);
                                break;
                        }
                    }
                });
            },
            callMe: function(e) {
                var phone = config.kfPhone;
                uni.makePhoneCall({
                    phoneNumber: phone
                })
            },
            //浮窗按钮相关操作
            fabClick(e) {
                // utils.debug('点击了悬浮按钮')
            },
            fabTrigger(e) {
                var eindex = e.index;
                this.fabs.content[e.index].active = !e.item.active;

                if (!e.item.diyfn) {
                    //未设置这个difyfn字段的，无操作
                    return false;
                }
                var diyfn = e.item.diyfn,
                    dir = config.pageDir,
                    page;
                switch (diyfn) {
                    case 'home':
                        page = 'tabbar/index/index';
                        return uni.reLaunch({
                            url: dir + page
                        })
                        break;
                    case 'news':
                        page = 'news/list/list';
                        break;
                    case 'user':
                        page = 'me/index';
                        break;
                    case 'notice':
                        page = 'tabbar/notice/index';
                        return uni.reLaunch({
                            url: dir + page
                        })
                        break;
                }
                return uni.navigateTo({
                    url: dir + page
                })
            }
        },

        onShow: function() {
            var code = hi.captcha.get('login');
            this.captcha = code;
        },
        onLoad: function(o) {
            // 自动跳转到登录页面时会携带uniIdRedirectUrl参数
            if (o.uniIdRedirectUrl) {
                this.uniIdRedirectUrl = decodeURIComponent(o.uniIdRedirectUrl)
            }
        }
    }
</script>

<style>
    @import url("login.css");

    /* 以下是组合输入框 */
    .demo-uni-row {
        margin-bottom: 10px;

        /* 组件在小程序端display为inline */
        /* QQ、抖音小程序文档写有 :host，但实测不生效 */
        /* 百度小程序没有 :host */
        /* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
        display: block;
        /* #endif */
    }

    /* 支付宝小程序没有 demo-uni-row 层级 */
    /* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
    /* #ifdef MP-ALIPAY || MP-WEIXIN */
    ::v-deep .uni-row {
        margin-bottom: 10px;
    }

    /* #endif */

    .demo-uni-col {
        height: 36px;
        line-height: 36px;
        border-radius: 5px;
    }

    .uni-col-input {
        margin: 1rem 1rem;
        width: 100%;
    }

    .dark_deep {
        background-color: #99a9bf;
    }

    .dark {
        background-color: #d3dce6;
    }

    .primary {
        background-color: #0095F6;
        color: #fff;
    }

    .light {
        background-color: #e5e9f2;
    }

    .uni-section {
        padding-top: 1rem;
    }

    .example-body {
        /* #ifndef APP-NVUE */
        display: block;
        /* #endif */
        padding: 5rpx 10rpx 0;
        overflow: hidden;
    }

    .vcode-button {
        text-align: center;
    }

    /* 验证码区域 */
    .captcha {
        color: #fd8208;
        font-size: 1.5rem;
        font-weight: bolder;
        text-align: center;
        text-align-last: justify;
    }

    .captcha:after {
        content: '';
        display: inline-block;
        width: 100%;
    }
</style>
