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

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      phone: "",
      password: "",
      nickname: "",
      // 处于登录还是注册页面
      isRegister: false,
      testData: null,
    };
  }
  componentDidMount() {
    console.log("thisprops", this.props);
  }
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <KeyboardAvoidingView behavior="padding" style={styles.KAVContainer}>
          <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>
          {/* 昵称 */}
          {/* <View style={styles.inputField}>
            <Image
              style={styles.icon}
              source={require("../assets/login/ic_password2.png")}
            />
            <TextInput
              style={styles.textInput}
              placeholder="请输入昵称"
              value={this.state.nickname}
              onChangeText={nickname => this.setState({ nickname })}
              selectionColor="#1B9341"
              clearTextOnFocus={true}
              numberOfLines={1}
              clearButtonMode="always"
              keyboardType="default"
            />
          </View> */}
          {/* 登录/注册 按钮 */}
          {!this.state.isRegister ? (
            <TouchableOpacity
              style={styles.confirmBtnLogin}
              onPress={() => {
                this.loginRequest();
              }}
            >
              <Text style={styles.confirmText}>登录</Text>
            </TouchableOpacity>
          ) : (
            <TouchableOpacity
              style={styles.confirmBtnRegister}
              onPress={() => {
                this.loginRequest();
              }}
            >
              <Text style={styles.confirmText}>注册</Text>
            </TouchableOpacity>
          )}

          {/* 点击切换  不用管这里 */}
          {!this.state.isRegister ? (
            <TouchableOpacity
              style={styles.registerContaier}
              onPress={() => this.setState({ isRegister: !this.state.isRegister })}
            >
              <Text style={styles.register}>注册账号</Text>
            </TouchableOpacity>
          ) : (
            <TouchableOpacity
              style={styles.registerContaier}
              onPress={() => this.setState({ isRegister: !this.state.isRegister })}
            >
              <Text style={styles.register}>登录</Text>
            </TouchableOpacity>
          )}
        </KeyboardAvoidingView>
      </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;
    // }
    // if (password === "") {
    //   alert("请输入密码");
    //   return;
    // }
    // this.props.onLogin(true);
    let that = this;
    let formData = new FormData();  
    formData.append("phone",phone);  
    formData.append("password",password); 
    
    return fetch(`https://devpay.brae.co/test/insurance/login`,{
      method: "POST",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: formData,
    })
      .then((resp) => {
        console.log("测试接口",resp);
        // return false;
        if (resp.status === 200) {
          return resp.json();
        } else {
          console.error("something went wrong!");
        }
      })
      .then((respJson) => {
        // if (respJson.enmsg != 'ok') {
        //   console.error(err);
        //   alert(respJson.cnmsg);
        // } else {
          that.setState({
            testData: respJson.data
          });
          console.log('看看登录能获得啥数据',that.state.testData);
        // }
      })
      .catch((err) => console.error(err))
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 125,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#F5FCFF",
    paddingLeft: 38,
    paddingRight: 38
  },
  KAVContainer: {
    flex: 1
    // justifyContent: "center"
  },
  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
  },
  confirmBtnLogin: {
    marginTop: 30,
    width: 299,
    height: 45,
    backgroundColor: "#1B9341",
    borderRadius: 5,
    alignItems: "center",
    justifyContent: "center"
  },
  confirmBtnRegister: {
    marginTop: 30,
    width: 299,
    height: 45,
    backgroundColor: "#BBBBBB",
    borderRadius: 5,
    alignItems: "center",
    justifyContent: "center"
  },
  confirmText: {
    color: "#fff",
    fontSize: 16
  },
  registerContaier: {
    alignItems: "center",
    justifyContent: "center"
  },
  register: {
    marginTop: 24,
    color: "#1B9341"
  }
});