/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @description 简单的登录页面（UI布局）
 */

import React, {Component} from 'react';
//组件的引入
import {StyleSheet, Text, View, Switch, Button} from 'react-native';


type Props = {};
export default class App extends Component<Props> {

    //参数的设置
    constructor(props) {
        super(props);
        this.params = {
            userId: '',
            password: '',
            keepPwd: 'no',
            autoLogin: 'no'
        }
        this.state = {
            userId: '',
            password: '',
            keepPwd: false,
            autoLogin: false,
            loginText: '登录'
        }
    }


    //在这里写入所有的组件
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>Welcome to React Native!</Text>
                <Text style={styles.instructions}>To get started, edit App.js</Text>

                <View style={styles.switches}>
                    <View style={styles.switch}>
                        <Switch
                            value={this.state.keepPwd}
                            onValueChange={(value) => {
                                this.setState({
                                    keepPwd: value
                                })
                                if (value) {
                                    this.params.keepPwd = 'yes';
                                } else {
                                    this.params.keepPwd = 'no';
                                }
                            }}>
                        </Switch>
                        <Text style={styles.switchText}>记住密码</Text>
                    </View>

                    <View style={styles.switch}>
                        <Switch
                            value={this.state.autoLogin}
                            onValueChange={(value) => {
                                this.setState({
                                    autoLogin: value
                                })
                                if (value) {
                                    this.params.autoLogin = 'yes';
                                } else {
                                    this.params.autoLogin = 'no';
                                }
                            }}></Switch>
                        <Text style={styles.switchText}>自动登录</Text>
                    </View>

                </View>
                <View style={styles.loginBtn}>
                    <Button title='登录' color="#808080"/>
                </View>
            </View>
        );
    }


}

//设置需要的样式
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 30,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        fontSize: 10,
        marginBottom: 5,
    },

    switches: {
        width: '80%',
        marginTop: 10,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },

    switch: {
        flexDirection: 'row',
        alignItems: 'center',
    },

    switchText: {
        marginLeft: 5,
    },

    loginBtn: {
        width: '80%',
        height: 40,
        marginLeft: 35,
        marginRight: 35,
        borderRadius: 100,
        marginTop: 20,
    },

});