import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ScrollView,
  TextInput
} from "react-native";

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      phone: "",
      password: ""
    };
  }
  componentDidMount() {
    console.log("thisprops", this.props);
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.appName}>保护神</Text>
        <View style={styles.inputField}>
          <Image
            style={styles.icon}
            source={require("../assets/login/ic_phone.png")}
          />
          <TextInput
            style={styles.textInput}
            placeholder="请输入手机号"
            value={this.state.phone}
            onChangeText={phone => this.setState({ phone })}
            autoFocus={true}
            selectionColor="#1B9341"
            clearTextOnFocus={true}
            numberOfLines={1}
            clearButtonMode="always"
            keyboardType="default"
          />
        </View>
        <View style={styles.inputField}>
          <Image
            style={styles.icon}
            source={require("../assets/login/ic_password2.png")}
          />
          <TextInput
            style={styles.textInput}
            placeholder="请输入密码"
            secureTextEntry={true}
            value={this.state.password}
            onChangeText={password => this.setState({ password })}
            selectionColor="#1B9341"
            clearTextOnFocus={true}
            numberOfLines={1}
            clearButtonMode="always"
            keyboardType="default"
          />
        </View>
        {/* <TouchableOpacity style={styles.helpContaier}>
          <Text style={styles.forgetPassword}>忘记密码？</Text>
        </TouchableOpacity> */}
        <TouchableOpacity style={styles.confirmBtn} onPress={() => {this.loginRequest()}}>
          <Text style={styles.login}>登录</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.registerContaier}>
          <Text style={styles.register}>注册账号</Text>
        </TouchableOpacity>
      </View>
    );
  }

  loginRequest() {
    if(this.props.loginSuccess) return;
    let phone = this.state.phone,
        password = this.state.password;
    if (!(/^1(3|4|5|7|8)\d{9}$/.test(phone))) {
      alert("请正确输入手机号码");
      return;
    }
    // } else if (phone != 13000000000 && phone != 18888888888) {
    //   console.log("手机号和密码",phone,password)
    //   alert("登录账号错误");
    //   return;
    // }
    if (password === "") {
      alert("请输入密码");
      return;
    } else if (password !== "000000") {
      alert("账号密码有误");
      return;
    }
    this.props.onLogin(true);
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 125,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#F5FCFF",
    paddingLeft: 38,
    paddingRight: 38
  },
  appName: {
    fontSize: 26,
    color: "#030303",
    alignSelf: "center",
    marginBottom: 77
  },
  inputField: {
    flexDirection: "row",
    alignItems: "center",
    borderStyle: "solid",
    borderBottomWidth: 1,
    borderColor: "#E6E6E6",
    height: 51
  },
  icon: {
    width: 11,
    height: 15,
    marginRight: 10
  },
  textInput: {
    flex: 1
  },
  helpContaier: {
    flexDirection: "row",
    justifyContent: "flex-end",
    marginTop: 10,
  },
  forgetPassword: {
    color: "#999999",
    fontSize: 14,
  },
  confirmBtn: {
    marginTop: 30,
    width: 299,
    height: 45,
    backgroundColor: "#1B9341",
    borderRadius: 5,
    alignItems: "center",
    justifyContent: "center",
  },
  login: {
    color: "#fff",
    fontSize: 16,
  },
  registerContaier: {
    alignItems: "center",
    justifyContent: "center",
  },
  register: {
    marginTop: 24,
    color: "#1B9341",
  }
});