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

import {createAction, ScreenUtil} from '../../utils'

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

    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.dispatch({
                    type: 'auth/fetchRNInfo',
                });
                //获取权限
                this.props.dispatch({
                    type: 'auth/fetchrnPermissions',
                });
                console.log(3333333333)
                this.props.navigation.navigate("SalesHome",)
            },
            unLogin: (msg) => {
                if (msg) {
                    Toast.info(msg)
                }
            }
        });
    }

    render() {
        const {
            fetching,
        } = 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={fetching} onPress={this.onLogin}
                            style={styles.button}
                            type="primary">登录</Button>
                    <Text style={styles.tabText}
                          onPress={() => this.props.navigation.navigate('settingURL')}>设置登录地址</Text>
                </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
