<template>
    <div class="content">
        <van-nav-bar
                title="注册"
                left-text="返回"
                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="register.phone"
                    placeholder="请填写手机号"
                    :left-icon="icon_user"
                    @input="onInput"
                    :rules="[{ required: true, message: '请填写手机号' }]"
            />
            <van-field
                    ref="password"
                    v-model="register.password"
                    type="password"
                    :left-icon="icon_password"
                    placeholder="请填写密码"
                    @input="onInput"
                    :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
                    ref="password"
                    v-model="register.password2"
                    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="onRegister">注册
                </van-button>
            </div>
        </div>
        <!-- 右对齐 -->
        <van-row type="flex" justify="center">
            <van-col @click="onLogin">我有账户，直接登录</van-col>
        </van-row>
    </div>
</template>

<script>
    import {Register} from '@/api/user'
    import {Toast} from 'vant';
    import {Dialog} from 'vant';
    import core from '@/core'
    import md5 from 'js-md5';
    import {icon_password, icon_user} from '@/core/icons'

    function isEmpty(obj) {
        if (typeof obj == "undefined" || obj == null || obj == "") {
            return true;
        } else {
            return false;
        }
    }

    export default {
        name: "register",
        data() {
            return {
                icon_password: icon_password,
                icon_user: icon_user,
                disabled: true,
                app: {
                    logo: core.info.logo,
                    name: core.info.name,
                },
                register: {
                    phone: "",
                    password: "",
                    password2: ""
                }
            }
        }, methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
            onClickRight() {
            },
            onInput() {
                window.console.log(JSON.stringify(this.login));
                window.console.log(isEmpty(this.register.phone) + "/" + isEmpty(this.register.password) + "/" + this.disabled);
                if (isEmpty(this.register.phone) || isEmpty(this.register.password) || isEmpty(this.register.password2)) {
                    this.disabled = true;
                } else {
                    this.disabled = false;
                }
            },
            onRegister() {
                window.console.log('submit', JSON.stringify(this.register));
                if (this.register.password != this.register.password2) {
                    Toast.fail("两次密码不一致")
                    return
                }
                const params = {
                    'phone': this.register.phone,
                    'password': md5('sunaliyun_'+this.register.password),
                    'code': ''
                }
                window.console.log('submit', params);
                let _this = this;
                Register(params).then(response => {
                        Toast.fail("注册成功")
                        window.console.log(response)
                        this.$router.go(-1)
                    }
                ).catch(error => {
                    window.console.log(error.response.data)
                    const data = error.response.data
                    window.console.log(data.code)
                    if (data.code === 1001) {
                        Dialog.confirm({
                            message: '账户已注册，是否直接登录',
                        }).then(function () {
                            _this.$router.go(-1)
                        })
                    } else {
                        Toast.fail(data.message)
                    }
                });
            },
            onLogin() {
                this.$router.go(-1)
            }
        }, 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>
