<template>
    <div class="content">
        <van-nav-bar
                title="登录"
                left-arrow
                @click-left="onClickLeft"
                @click-right="onClickRight"
        />
        <div class="login_top">
            <van-image class="user_av"
                       width="60px"
                       height="60px"
                       :src=app.logo>
                <template v-slot:loading>
                    <van-loading type="spinner" size="20"/>
                </template>
            </van-image>
            <div class="van-ellipsis">{{app.name}}</div>
        </div>

        <div class="login_form">
            <van-field
                    ref="username"
                    v-model="login.phone"
                    placeholder="请填写手机号"
                    :left-icon="icon_user"
                    @input="onInput"
                    :rules="[{ required: true, message: '请填写手机号' }]"
            />
            <van-field
                    ref="password"
                    v-model="login.password"
                    type="password"
                    :left-icon="icon_password"
                    placeholder="请填写密码"
                    @input="onInput"
                    :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px;">
                <van-button  :disabled="disabled" redround block type="info" @click="onLogin">登录
                </van-button>
            </div>
        </div>
        <!-- 右对齐 -->
        <van-row class="login_register" type="flex">
            <van-col @click="goRegister">无登录账号?快速注册</van-col>
        </van-row>
    </div>
</template>

<script>
    import {Login} from '@/api/user'
    import {Toast} from 'vant';
    import core from '@/core'
    import {isEmpty} from '@/utils/common'
    import md5 from 'js-md5';
    import {icon_password, icon_user} from '@/core/icons'


    export default {
        name: "Login",
        data() {
            return {
                icon_password: icon_password,
                icon_user: icon_user,
                disabled: true,
                app: {
                    logo: core.info.logo,
                    name: core.info.name,
                },
                login: {
                    phone: "",
                    password: "",
                    password1: "",
                }
            }
        },
        mounted() {
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
            onClickRight() {
            },
            onInput() {
                if (isEmpty(this.login.phone) || isEmpty(this.login.password)) {
                    this.disabled = true;
                } else {
                    this.disabled = false;
                }
            },
            onLogin() {
                window.console.log(JSON.stringify(this.login));
                const params = {
                    'phone': this.login.phone,
                    'password': md5('sunaliyun_'+this.login.password),
                }
                window.console.log(JSON.stringify(params));

                Login(params).then(response => {
                        window.console.log(response)
                        window.console.log(response.data)
                        window.console.log(response.data.token)

                        Toast.fail("登录成功")
                        window.console.log(response)
                        localStorage.setItem('UserInfo', JSON.stringify(response.data))
                        localStorage.setItem('ACCESS_TOKEN', response.data.token)
                        this.$router.back();
                    }
                )
            },
            goRegister() {
                this.$router.push('register');
            }
        }, setup() {
        }
    }
</script>

<style scoped>
    body {
        height: 100%;
        padding: 0;
        margin: 0;
    }

    .content {
        background: white;
        height: 100%;
    }

    .login_top {
        height: 140px;
        padding: 10px;
        background: white;
        text-align: center;
    }

    .user_av {
        display: inline-block;
        margin-top: 30px;
    }

    .login_form {
        margin-left: 20px;
        margin-right: 20px;
    }

    .login_register {
        margin-right: 40px;
        float: right;
    }


</style>
