import React, {Component} from 'react';
import {StyleSheet, View, Image, StatusBar} from 'react-native';
import {connect} from 'react-redux';
import {Button, InputItem, List, Toast, Provider} from '@ant-design/react-native';

import {createAction, ScreenUtil} from '../../utils';
import {NavigationActions} from 'react-navigation';

@connect(auth => ({...auth}))
class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: '',
        };
    }

    static navigationOptions = {
        headerShown: false,  //隐藏顶部导航栏
    };

    componentDidMount() {

    }

    onLogin = () => {
        console.log('===>', this.state.username, this.state.password);
        if (!this.state.username || !this.state.password) {
            Toast.info('请输入用户名密码', 1);
            return;
        }
        this.props.dispatch({
            type: 'auth/login',
            payload: this.state,
            callback: () => {
                this.props.navigation.navigate('SalesHome');
            },
            unLogin: (msg) => {
                if (msg) {
                    Toast.info(msg);
                }
            },
        });
    };

    render() {
        const {loading} = this.props.auth;
        return (
            <View style={styles.container}>
                <StatusBar backgroundColor={'#fff'} barStyle='dark-content'/>
                <Provider>
                    <View style={styles.logoContainer}>
                        <Image source={require('../../../assets/images/logo.png')} style={styles.logo}/>
                    </View>
                    <List style={styles.list}>
                        <InputItem
                            clear
                            placeholder={'请输入用户名'}
                            value={this.state.username}
                            onChange={value => {
                                this.setState({
                                    username: value,
                                });
                            }}
                        >用户名:</InputItem>
                        <InputItem
                            clear
                            placeholder={'请输入密码'}
                            type="password"
                            value={this.state.password}
                            onChange={value => {
                                this.setState({
                                    password: value,
                                });
                            }}
                        >密码:</InputItem>
                    </List>
                    <Button loading={loading} disabled={loading} onPress={this.onLogin}
                            style={styles.button}
                            type="primary">登录</Button>
                </Provider>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    tabText: {
        textAlign: 'center',
        paddingTop: 10,
        color: '#03C762',
    },
    button: {
        borderRadius: 10,
        margin: 10,
        borderWidth: 0,
        backgroundColor: '#2b90ea',
    },
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    logoContainer: {
        alignItems: 'center',
        marginVertical: 60,
    },
    logo: {
        width: ScreenUtil.scaleSize(80),
        height: ScreenUtil.scaleSize(80),
    },
    list: {
        marginTop: 10,
    },
});


export default Login;