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

export default class Loginpage extends Component {
	componentDidMount() {
		this.timer = setTimeout(() => {
			// NavigationUtil.resetToHomePage(this.props)
		}, 5000)
	}
	componentWillMount() {
		this.timer && clearTimeout(this.timer)
	}
	render() {
		return (
			<View style={styles.container}>
				<Text style={styles.loginTitle}>账号密码登录</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={{ color: "#999999" }}
								style={styles.TextInput}
							/>
						</View>
					</View>
					<View style={styles.inputPass}>
						<View style={styles.inputLeft}>
							<EvilIcons
								name={"unlock"}
								size={38}
								style={{ color: "#333333" }}
							/>
						</View>
						<View>
							<TextInput
								placeholder="请输入密码"
								placeholderTextColor={{ color: "#999999" }}
								style={styles.TextInput}
							/>
						</View>
					</View>

				</View>
				<View style={styles.forgetPassArea}>
					<Text>手机号注册登录</Text>
					<Text>忘记密码</Text>
				</View>
				<View style={styles.loginBtnArea}>
					<MyButtom
						text={'登录'}
						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() + unitWidth * 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,
		height: unitHeight * 236,
		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
	},
	inputPass: {
		width: "100%",
		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
	},
	loginBtnArea: {
		width:"100%",
		marginTop:unitHeight * 98,
		height:unitHeight * 84,
		justifyContent:'center',
		alignItems:'center'
	}

})