import React, { Component } from "react"
import { StyleSheet, Text, View, TextInput } from "react-native"
import Ionicons from "react-native-vector-icons/Ionicons"
import { unitWidth, unitHeight, getStatusBarHeight } from "../utils/AdapterUtil";
import MyButtom from '../component/MyButton'

export default class Loginpage extends Component {
    state = {
        pageTitle: "手机号登录注册",
        btnText: "下一步"
    };
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.loginTitle}>{this.state.pageTitle}</Text>
                <View style={styles.inputArea}>
                    <View style={styles.inputPhone}>
                        <View style={styles.inputLeft}>
                            <Text style={styles.inputLeftText}>+86</Text>
                        </View>
                        <View style={styles.inputRight}>
                            <TextInput
                                placeholder="请输入手机号"
                                placeholderTextColor={"#999999"}
                                style={styles.TextInput}
                            />
                        </View>
                    </View>
                    <View style={styles.inputPass}>
                        <View style={styles.inputLeft}>
                            <Text style={styles.inputLeftText}>验证码</Text>
                        </View>
                        <View style={styles.TextInputRightArea2}>
                            <TextInput
                                placeholder="请输入验证码"
                                placeholderTextColor={"#999999"}
                                style={styles.TextInput2}
                            />
                        </View>
                        <View style={styles.verifyCodeArea}>
                            <Text>获取验证码</Text>
                        </View>
                    </View>
                </View>

                <View style={styles.agree}>
                    <Ionicons
                        name={"md-radio-button-on"}
                        size={20}
                        style={{ color: "#FA788A", marginRight: unitWidth * 20 }}
                    />
                    <Text style={{ fontSize: unitWidth * 24, color: "#999999", marginRight: unitWidth * 2 }}>下一步即同意</Text>
                    <Text style={{ fontSize: unitWidth * 24, color: "#FA788A" }}>用户协议</Text>
                </View>
                <View style={styles.bottomBtn}>
                    <MyButtom
                        text={this.state.btnText}
                        width={unitWidth * 502}
                        height={unitHeight * 84}
                        borderRadius={unitHeight * 84}
                        bgColor="#FA788A"
                        shadowBgc="rgba(250,120,138,1)"
                        style={{ fontSize: unitWidth * 32 }}
                    />
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: getStatusBarHeight() + unitHeight * 138,
        paddingLeft: unitWidth * 60,
        paddingRight: unitWidth * 60,
    },
    loginTitle: {
        fontSize: unitWidth * 38,
        fontWeight: "bold",
        color: "rgba(250,120,138,1)",
        marginBottom: unitWidth * 70
    },
    inputArea: {
        width: unitWidth * 628,
        justifyContent: "space-between"
    },
    inputPhone: {
        width: "100%",
        height: unitHeight * 98,
        borderRadius: unitWidth * 98,
        borderWidth: unitWidth * 1,
        borderColor: "#ccc",
        flexDirection: "row"
    },
    inputLeft: {
        marginTop: unitHeight * 9,
        width: unitWidth * 147,
        height: unitHeight * 80,
        borderRightWidth: unitWidth * 1,
        borderRightColor: "#ccc",
        justifyContent: "center",
        alignItems: "center"
    },
    inputRight: {
        width: unitWidth * 480,
        height: "100%"
    },
    TextInput: {
        width: "100%",
        height: "100%",
        paddingLeft: unitWidth * 26,
        fontSize: unitWidth * 28
    },
    TextInput2: {
        fontSize: unitWidth * 28
    },
    TextInputRightArea2: {
        flex: 3,
        height: "100%",
        paddingLeft: unitWidth * 26,
        fontSize: unitWidth * 28,
        justifyContent: "center"
    },
    verifyCodeArea: {
        flex: 2,
        height: "100%",
        justifyContent: "center",
        alignItems: "center"
    },
    verifyCode: {
        fontSize: unitWidth * 28,
        color: "#333333"
    },
    inputPass: {
        width: "100%",
        marginTop: unitHeight * 40,
        height: unitHeight * 98,
        borderRadius: unitWidth * 98,
        borderWidth: unitWidth * 1,
        borderColor: "#ccc",
        flexDirection: "row"
    },
    forgetPassArea: {
        flexDirection: "row",
        justifyContent: "space-between",
        width: "100%",
        fontSize: unitWidth * 28,
        color: "#333333",
        marginTop: unitHeight * 28
    },
    bottomBtn: {
        width: "100%",
        marginTop: unitHeight * 98,
        height: unitHeight * 84,
        justifyContent: 'center',
        alignItems: 'center'
    },
    agree: {
        width: "100%",
        height: unitHeight * 26,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        marginTop: unitHeight * 30
    }

})