import './index.less';
import {Component} from "react";
import {Head} from "@inertiajs/react";
import {show_message} from "@/js/utils/tdesign";
import {Form, Button} from 'tdesign-react';
import {DesktopIcon, LockOnIcon} from 'tdesign-icons-react';
import CustomInput from '@/js/components/Input';
import {useLogin} from '@/js/utils/api/auth';
import Cookies from "js-cookie";

const {FormItem} = Form;
export default class Login extends Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: '',
            code: ''
        }
    }

    async login() {
        try {
            let params = {
                username: this.state.username,
                password: this.state.password,
                code: this.state.code,
            };
            const res: any = await useLogin(params)
            if (res.code == 0) {
                show_message('登录成功', 'success');
                Cookies.set('token', res.data.access_token);
                window.location.replace('/');
            }
        } catch (e) {
            console.log(e)
        }

    }


    onSubmit = (e) => {
        const {username, password, code} = this.state;
        if (!username || !password || !code) {
            show_message('请填写完整表单', 'error');
            return;
        }
        // 可以提交
        this.login();
    };

    onReset = (e) => {
        console.log(e);
        show_message('重置成功', 'success');
    };

    inputChange = (value: string, name: string) => {
        this.setState({
            [name]: value
        })
    }

    render() {
        return (
            <div>
                <Head title={this.props.info.title}></Head>
                <div className='login-page'>
                    <div className='label'>登录</div>
                    <div style={
                        {
                            width: '80vw'
                        }
                    }>
                        <Form statusIcon={true} onSubmit={this.onSubmit} onReset={this.onReset} colon={true}
                              labelWidth={0}>
                            <FormItem name="account">
                                <CustomInput name='username' value={this.state.username} clearable={false}
                                             prefixIcon={<DesktopIcon/>}
                                             placeholder="请输入账户名" onChange={this.inputChange}></CustomInput>
                            </FormItem>
                            <FormItem name="password">
                                <CustomInput name='password' value={this.state.password} type="password"
                                             prefixIcon={<LockOnIcon/>}
                                             clearable={false}
                                             placeholder="请输入密码" onChange={this.inputChange}></CustomInput>
                            </FormItem>
                            <FormItem name="code">
                                <CustomInput name='code' value={this.state.code} clearable={false}
                                             prefixIcon={<DesktopIcon/>}
                                             placeholder="请输入验证码" onChange={this.inputChange}></CustomInput>
                            </FormItem>
                            <FormItem>
                                <Button className={"login-form-submit-btn"} theme="primary" type="submit" block>
                                    登录
                                </Button>
                            </FormItem>
                        </Form>
                    </div>
                </div>
            </div>
        );
    }
}
