<template>
    <view>
        <view class="pass">
            <form @submit="formSubmit">
                <view class="favourCont-label">
                    <view class="favourCont-name">手机号：</view>
                    <input type="number" placeholder="请输入手机号" v-model="mobileNo" />
                    <button @tap="sendOut" class="obtain" :disabled="senddisabled" hover-class="none">{{ codename }}</button>
                </view>
                <view class="favourCont-label">
                    <view class="favourCont-name">验证码</view>
                    <input type="number" name="code" placeholder="请输入验证码" />
                </view>
                <view class="favourCont-label">
                    <view class="favourCont-name">新密码：</view>
                    <input type="number" password name="password" placeholder="请输入新的支付密码" />
                </view>
                <view class="favourCont-label">
                    <view class="favourCont-name">确认密码：</view>
                    <input type="number" password name="confirmation" placeholder="请再次输入支付密码" />
                </view>
                <view class="favourCont-btn">
                    <button formType="submit" :disabled="disabled">确认设置</button>
                </view>
            </form>
        </view>
    </view>
</template>

<script>
    import { send } from '@/apis/interfaces/user'
    export default {
        data() {
            return {
                mobileNo    : '', // 手机号
                codename    : '获取验证码',
                senddisabled: false, // 获取验证码-按钮提交状态
                disabled    : false // 按钮提交状态
            }
        },
        // 生命周期函数--监听页面加载
        onLoad(options) {},
    
        // 生命周期函数--监听页面显示
        onShow() {},
        methods: {
            // 发送短信
            sendOut(e) {
                var _this = this
                send({
                    mobile: this.mobileNo,
                    channel: 'PAYPASS'
                }).then(res=>{
                    uni.showToast({
                        title   : '发送成功',
                        icon    : 'success',
                        duration: 2000
                    })
                    var num = 61;
                        var timer = setInterval(function () {
                            num--;
                        if (num <= 0) {
                            clearInterval(timer);
                            _this.codename     = '重新发送'
                            _this.senddisabled = false
                
                        } else {
                           _this.codename     = num + "s后重新获取"
                           _this.senddisabled = true
                        }
                        }, 1000)
                }).catch(err=>{}) 
            }
        }
    }
</script>

<style lang="scss" scoped>
    .favourCont-label {
        background-color: #fff;
        height: 120rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
        display: flex;
        position: relative;
        input {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100rpx;
            line-height: 100rpx;
            font-size: 30rpx;
            padding-left: 220rpx;
            box-sizing: border-box;
        }
    }
    
    .favourCont-name {
        line-height: 100rpx;
    }
    
    .favourCont-btn {
        width: 100%;
        padding: 0 30rpx;
        box-sizing: border-box;
        margin-top: 50rpx;
        button {
            background-color: #3a3b3e;
            color: #fff;
            width: 100% !important;
            height: 90rpx;
            line-height: 90rpx;
            font-size: 32rpx;
        }
        
    }
    
    .forget {
        text-align: center;
        line-height: 90rpx;
        font-size: 30rpx;
    }
    
    .obtain {
        color: #d6571f;
        background: none;
        border: none;
        font-size: 30rpx;
        position: absolute;
        width: auto !important;
        text-align: right;
        line-height: 100rpx;
        z-index: 9;
        padding: 0;
        margin: 0;
        right: 20rpx;
        top: 0;
    }
</style>
