<template>
    <Form class="login_form" ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
        <FormItem prop="phone">
            <Input v-model="form.phone" :maxlength="11" placeholder="手机号"></Input>
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model="form.password" placeholder="请输入密码"></Input>
        </FormItem>
        <div class="submit_btn">
            <Button @click="handleSubmit" :disabled="loginDisable" long size="large" :loading="loading">登录</Button>
        </div>
    </Form>
</template>

<script>
import { isEmptyStr, checkPhone } from '@/utils'

export default {
    name: 'PasswordLogin',
    data () {
        const handleValidatePhone = (rule, value, callback) => {
            if (!value || isEmptyStr(value)) {
                callback(new Error('请输入手机号'))
            } else if (!checkPhone(value)) {
                callback(new Error('请输入正确的手机号'))
            } else {
                callback()
            }
        }
        return {
            loading: false,
            form: {
                clientType: 0,
                password: '',
                phone: '',
            },
            rules: {
                phone: [
                { required: true, validator: handleValidatePhone, trigger: 'blur' }
                ],
                password: [
                { required: true, message: '请输入密码', trigger: 'blur' }
                ]
            },
            readonly: true,
        }
    },
    computed: {
        // 控制注册按钮是否可用
        loginDisable () {
            return Object.keys(this.form).some((key) => {
                if (key === 'verifyCodeSession') {
                    return false
                }
                return isEmptyStr(this.form[key])
            })
        }
    },
    created () {
    },
    methods: {
        handleSubmit () {
            this.$refs['loginForm'].validate((valid) => {
                if (valid) {
                    this.loading = true
                    this.$http.post(`/call/api/user/p/phonePswLogin`, this.form).then((response) => {
                        let { code, data, msg: desc } = response
                        if (code === 1) {
                            this.$emit('login-success', data)
                        } else {
                            this.$Notice.error({
                                title: '登录失败',
                                desc
                            })
                        }
                    }).finally(() => {
                        this.loading = false
                    })
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
.login_form{
    width: 340px;
    margin-top: 32px;
    /deep/.ivu-form-item{
        margin-bottom: 32px;
        .ivu-form-item-content {
            line-height: inherit;
        }
    }
    /deep/.ivu-input{
        height: 36px;
        border: none;
        padding: 0px;
        color: #222222;
        border-bottom: 1px solid #CCD6E6;
        border-radius: 0;
    }
    /deep/.ivu-form-item-error-tip{
        font-weight: 400;
        font-size: 12px;
        color: #FF4E4E;
        padding-top: 8px;
    }
    /deep/.ivu-input:hover,
    /deep/.ivu-input:focus{
        border: none;
        border-bottom: 1px solid #CCD6E6;
        box-shadow:inherit !important;
        border-color: #CCD6E6 !important;
        border-radius: 0;
    }
    .submit_btn {
        padding-top: 28px;
        .ivu-btn{
            width: 340px;
            height: 48px;
            background: #35E89A;
            border-radius: 10px;
            font-weight: bold;
            color: #FFFFFF;
            font-size: 16px;
            border: none;
        }
        .ivu-btn[disabled],
        .ivu-btn[disabled]:hover {
            opacity: 0.2;
        }

    }
}

</style>
