<template>
    <view>
        <view @click="homeUrl" class="skip" v-if="type != 'forgetType'">
            跳过，暂不设置
        </view>
        <view class="login">
            <view class="header">
                <view class="header-btn" @click="loginBack">
                    <uni-icons type="closeempty" size="28" color="#666"></uni-icons>
                </view>
            </view>
            <view class="title">
                设置登录密码
            </view>
            <view class="form">
                <view class="inputs">
                    <input type="number" v-model="password" password placeholder="输入登录密码" />
                </view>
                <view class="inputs">
                    <input type="number" v-model="confirmation" password placeholder="再次输入登录密码" />
                </view>
                <button
                    type="default"
                    class="button"
                    @click="setupGo"
                >确定</button>
            </view>
        </view>
    </view>
</template>

<script>
	import { passSetup } from '@/apis/interfaces/auth'
	export default {
		data() {
			return {
				password    : '', // 设置密码
                confirmation: '', // 确认密码
                type        : ''  // 类型
			};
		},
		onLoad(e){
            this.type = e.type
		},
		methods:{
            // 设置登录密码
            setupGo() {
                passSetup({
                	password: this.password,
                	password_confirmation: this.confirmation
                }).then(res=>{
                	uni.switchTab({
                	    url: '/pages/index/index'
                	})
                }).catch(err => {
                	uni.showToast({
                		icon: 'none',
                		title: err.message
                	})
                })
            },
            
            // 跳转首页
            homeUrl() {
                uni.switchTab({
                    url: '/pages/index/index'
                })
            }
		}
	}
</script>
<style>
	page{
		background-color: #f0f0f0;
	}
</style>
<style lang="scss" scoped>
    .loginBack {
        position: fixed;
        width: 100vw;
        height: 100vh;
        left: 0;
        top: 0;
    }
    
	.login{
        width: 100%;
        z-index: 2;
		padding: var(--status-bar-height) 20rpx * 4 0;
        box-sizing: border-box;
        position: fixed;
        top: 100rpx;
        left: 0;
		.header{
			padding: (20rpx * 2) 0 (20rpx * 5);
			.header-btn{
				display: none;
				height: 90rpx;
				width: 90rpx;
				line-height: 90rpx;
				text-align: center;
				margin-left: -30rpx;
			}
		}
		.title {
			margin-bottom: 20rpx * 5;
			font-size: 40rpx;
			font-weight: bold;
			color: #000;
		}
		// 表单
		.form{
			.inputs{
                background-color: #FFFFFF;
				margin-bottom: 20rpx * 2;
                border-radius: 10rpx;
                padding: 0 30rpx;
                box-sizing: border-box;
				height: 90rpx;
				line-height: 90rpx;
				display: flex;
				input {
					flex: 1;
					height: 90rpx;
					font-size: 30rpx;
				}
				button{
					font-size: 30rpx;
					height: 90rpx;
					line-height: 90rpx;
					background: white;
					color: #188600;
					margin-left: 20rpx;
                    background: transparent;
					padding: 0;
					&:after{
						border: none;
					}
					&[disabled]{
						color: #C8C7CC;
					}
				}
			}
			.button{
				margin-top: 20rpx * 4;
				background: #d82d36;
				color: white;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 10rpx;
				font-size: 32rpx;
				font-weight: bold;
				border: none;
			}
		}
	}
    
    // 跳过
    .skip {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        text-align: right;
        padding: 30rpx;
        font-size: 28rpx;
        box-sizing: border-box;
        z-index: 99;
        color: #7b7b7b;
    }
</style>