<template>
    <ul class="wrapper">
        <li class="wrapper_item">
            <img src="http://www.dell-lee.com/imgs/vue3/user.png" alt="" class="wrapper_img">
        </li>
        <li class="wrapper_input">
            <input type="text" placeholder="用户名" class="wrapper_input_content" v-model='data.username'>
        </li>
        <li class="wrapper_input">
            <input type="password" placeholder="请输入手机号" class="wrapper_input_content" v-model='data.password'>
        </li>
        <li class="wrapper_button" @click="handlelogin">
            登陆
        </li>
        <li @click="handleRegisterClick">
            立即注册

        </li>
        <Toast v-if="data.showToast" :message='toastData.ToastMessage' />

    </ul>


</template>
<script>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { post } from '../../utils/request';
import Toast from '../../components/Toast.vue'

const userToastEffect = () => {
    const toastData = reactive({
        showToast: false,
        ToastMessage: ''
    })
    const changeToast = (Message) => {
        toastData.showToast = true;
        toastData.ToastMessage = Message
        setTimeout(() => {
            toastData.showToast = false;
            toastData.ToastMessage = ''
        }, 2000);
    }
    return {
        toastData, changeToast
    }
}

export default {
    name: 'Login',
    components: {
        Toast
    },
    setup() {
        const router = useRouter();
        const data = reactive({
            username: '',
            password: '',

        })
        const { toastData, changeToast } = userToastEffect();
        const handlelogin = async () => {
            try {
                const result = await post('1111/api/user/login', {
                    username: data.username,
                    password: data.password
                })
                if (result?.errno === 0) {
                    localStorage.isLogin = true;
                    router.push({ name: 'home' })
                } else {
                    changeToast('登陆失败')
                    console.log('00');
                    // data.showToast = true;
                    // data.ToastMessage = '登陆失败'
                }
             
            } catch (e) {
                changeToast('请求失败')
               
                // data.showToast = true;
                // data.ToastMessage = '请求失败'
            }


            // .then((result) => {
            //     localStorage.isLogin = true;
            // router.push({name:'home'})
            // }).catch((err) => {
            //     alert('000')
            // });


        }
        const handleRegisterClick = () => {
            // console.log(1212);
            router.push({ name: 'Register' })
        }
        return { handlelogin, handleRegisterClick, data, toastData }
    }

}
</script>

<style lang="scss" scoped>
.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-59%);
    margin: auto 0;

    &_item {
        margin-bottom: 4rem
            /* 40/10 */
        ;
    }

    &_img {
        width: 6.6rem
            /* 66/10 */
        ;
        height: 6.6rem
            /* 66/10 */
        ;
    }

    &_button {
        width: 29.5rem
            /* 295/10 */
        ;
        height: 4.8rem
            /* 48/10 */
        ;
        background: #0091FF;
        box-shadow: 0 4px 8px 0 rgba(0, 145, 255, 0.32);
        border-radius: 4px;
        color: white;
        text-align: center;
        line-height: 4.8rem
            /* 48/10 */
        ;
        font-size: 1.6rem
            /* 16/10 */
        ;
    }
}

.wrapper_input {
    width: 29.5rem
        /* 295/10 */
    ;
    height: 4.8rem
        /* 48/10 */
    ;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 6px;
    margin: 0 4rem
        /* 40/10 */
        1.6rem
        /* 16/10 */
    ;
    padding: 0 1.6rem
        /* 16/10 */
    ;
    background: #F9F9F9;

}

.wrapper li:nth-child(4) {
    margin-bottom: 1.6rem
        /* 16/10 */
    ;

}

.wrapper li span {
    margin-right: 1.2rem
        /* 12/10 */
    ;
    color: rgba(0, 0, 0, 0.50);

}



.wrapper_input_content {
    width: 100%;
    height: 100%;
    background: none;

}
</style>