<template>
    <view>
        <view class="pass">
            <form @submit="formSubmit">
                <view class="favourCont-label" v-if="passType">
                    <view class="favourCont-name">旧密码：</view>
                    <input type="number" password name="oldPassword" placeholder="请输入旧密码" />
                </view>
                <view class="favourCont-label">
                    <view class="favourCont-name">{{ passType ? '新密码' : '输入密码' }}：</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>
                    <navigator hover-class="none" url="/pages/payPassword/forget" class="forget" v-if="passType">忘记密码， 立即找回？</navigator>
                </view>
            </form>
        </view>
    </view>
</template>

<script>
    import { setPassword, changePassword } from '@/apis/interfaces/user'
    export default {
        data() {
            return {
                passSource  : '',    // 设置密码跳转来源favourUrl为转账跳转
                passType    : '',    // 是否是首次设置密码
                disabled    : false, // 设置支付密码
                password    : '',    // 支付密码
                confirmation: ''     // 确认密码
            }
        },
        // 生命周期函数--监听页面加载
        onLoad(options) {
            // 检查用户登录状态
            const Paypass = uni.getStorageSync("hasPaypass")
    
            this.passType  = Paypass
            this.passSource= options.source
        },
    
        // 生命周期函数--监听页面显示
        onShow() {},
        methods: {
            // 设置密码
            formSubmit(e) {
                let newoldPassword= e.detail.value.oldPassword,
                    newPassword   = e.detail.value.password,
                    newFormSubmit = e.detail.value.confirmation
        
                let newUrl = '' //定义接口来源名称
        
                if(this.passType == false) newUrl = setPassword({password: newPassword, password_confirmation: newFormSubmit})
                if(this.passType == true) newUrl = changePassword({old_password: newoldPassword, password: newPassword, password_confirmation: newFormSubmit})
        
                newUrl.then(res=>{
                    // 已设置密码缓存
                    uni.setStorage({
                        key     : 'hasPaypass',
                        data    : true
                    })
                    this.disabled = true
                    uni.showToast({
                        title: '设置成功',
                    })
        
                    // 只有从转账页面跳转才回到上一页
                    if(this.passSource == "favourUrl") {
                        setTimeout(()=>{
                            uni.navigateBack({delta: 1})
                        },2000)
        
                        return
                    }
        
                    // 其他跳转回到用户中心
                    setTimeout(()=>{
                        uni.switchTab({
                            url: '/pages/user/index'
                        })
                    },2000)
                }).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;
        color: #d6571f;
        font-weight: 600;
    }
</style>
