<template>
    <view class="main">
        <view class="welcomeText">{{ i18n.welcomeText }}</view>
        <view class="signInText">{{ i18n.signInText }}</view>
        <u--form class="form" :model="userInfo" :rules="rules" ref="form1" errorType="toast">
            <u-form-item class="input-item" prop="email" ref="item1">
                <u-icon class="icon"
                    :name="userInfo.email ? '../../static/login/email_pr.png' : '../../static/login/email_de.png'"
                    size="48rpx" width="48rpx"></u-icon>
                <u-input class="input" v-model="userInfo.email" color="#fff" fontSize="32rpx" border="none"
                    :placeholder="i18n.emailInputText">
                </u-input>
            </u-form-item>
            <u-form-item class="input-item" prop="password" ref="item1">
                <u-icon class="icon"
                    :name="userInfo.password ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'"
                    size="48rpx" width="48rpx"></u-icon>
                <u-input class="input" v-model="userInfo.password" color="#fff" fontSize="32rpx" border="none"
                    :placeholder="i18n.passwordInputText">
                </u-input>
            </u-form-item>
        </u--form>
        <navigator class="forget" url="./forget">{{ i18n.forgotText }}</navigator>
        <u-button class="button" color="#00E8A2">{{ i18n.Login }}</u-button>
        <view class="signUp">{{ i18n.notAccountText }}<navigator class="navigator" url="./register">{{ i18n.SignUp }}</navigator></view>

    </view>
</template>

<script>
export default {
    name: 'login',
    data() {
        return {
            userInfo: {
                name: '',
                password: '',
            },
            rules: {
                email: {
                    type: 'string',
                    required: true,
                    message: this.$t('login.emailInputMessage'),
                    trigger: ['blur', 'change'],
                },
                password: {
                    type: 'string',
                    required: true,
                    message: this.$t('login.passwordInputMessage'),
                    trigger: ['blur', 'change']
                },
            },
        }
    },
    computed: {
        i18n() {
            return this.$t('login')
        },
    },
    onLoad() {
        // console.log(this.$t('login.emailInputMessage'));
    },
    onShow() { },
    methods: {


    },
}
</script>

<style lang="scss">
.main {
    padding: 0 64rpx;
    overflow: hidden;

    .welcomeText {
        margin-top: 240rpx;
        font-size: 48rpx;
        font-weight: 800;
        text-align: center;
    }

    .signInText {
        font-size: 32rpx;
        text-align: center;
        color: #A2A0A8;
    }

    .form {
        font-size: 32rpx;
        margin-top: 48rpx;

        .input-item {
            height: 112rpx;
            line-height: 112rpx;
            background: #211F32;
            margin-bottom: 48rpx;
            border-radius: 32rpx;

            &:nth-child(2) {
                margin-bottom: 38rpx;
            }

            .icon {
                margin: 0 24rpx;
            }

            /deep/.u-form-item__body {
                padding: 0;
            }

            .input {
                height: 112rpx;
            }
        }
    }

    .forget {
        font-size: 32rpx;
        text-align: right;
        color: #00E8A2;
        cursor: pointer;
    }

    .button {
        margin-top: 64rpx;
        height: 112rpx;
        line-height: 112rpx;
        border-radius: 32rpx;
        font-size: 32rpx;
        color:#15141F !important;
    }

    .signUp {
        margin: 48rpx 0;
        text-align: center;
        font-size: 32rpx;

        navigator {
            display: inline;
            color: #00E8A2;
            padding: 0 10rpx;
        }
    }
}
</style>
