import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
  Alert,
  AlertIOS,
  AsyncStorage,
  Button,
  ScrollView
} from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";

export default class Mine extends Component {
  constructor(props) {
    super(props);
    this.state = {
      IS_LOGIN: "",
      USER_ID: "",
      NICKNAME: "",
      PROFESSION: "",
      PHONT: "",
      COMPONY: ""
    };
    this.saveResponse1 = this.saveResponse1.bind(this);
    this.saveResponse2 = this.saveResponse2.bind(this);
  }
  componentWillMount() {
    var _that = this;
    AsyncStorage.multiGet(
      ["IS_LOGIN", "USER_ID", "NICKNAME", "PROFESSION"],
      (err, result) => {
        if (err) {
          console.error(err);
        }
        console.log("最初始的四个个值", result);
        _that.setState({
          IS_LOGIN: result[0][1],
          USER_ID: result[1][1] != null ? result[1][1].toString() : "",
          NICKNAME: result[2][1] != null ? result[2][1].toString() : "",
          PROFESSION: result[3][1] != null ? result[3][1].toString() : ""
        });
      }
    );
  }
  componentDidMount() {
    // console.log("hello,AsyncStorage");
  }
  signOut() {
    var _that = this;
    AsyncStorage.multiSet(
      [
        ["IS_LOGIN", "no"],
        ["USER_ID", ""],
        ["NICKNAME", ""],
        ["PROFESSION", ""]
      ],
      function(err) {
        if (err) {
          console.log("存储出错", err);
          return false;
        }
        _that.setState({
          IS_LOGIN: "no",
          USER_ID: "",
          NICKNAME: "",
          PROFESSION: ""
        });
        console.log("退出登录后的值", _that.state);
      }
    );
  }
  saveResponse1(d) {
    let that = this,
      formData = new FormData();
    if (that.state.IS_LOGIN != "yes") {
      Alert.alert("请先登录账号");
      return false;
    }
    formData.append("user", this.state.USER_ID);
    formData.append("profession", "");
    formData.append("nickname", d);
    return fetch(`https://devpay.brae.co/test/insurance/change`, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: formData
    })
      .then(resp => {
        if (resp.status === 200) {
          return resp.json();
        } else {
          console.error("something went wrong!");
        }
      })
      .then(respJson => {
        if (respJson.enmsg != "ok") {
          alert(respJson.cnmsg);
        } else {
          AsyncStorage.setItem("NICKNAME", d).then(() => {
            console.log("保存修改成功");
            that.setState({ NICKNAME: d });
          });
        }
      })
      .catch(err => console.error(err));
  }
  saveResponse2(d) {
    let that = this,
      formData = new FormData();
    if (that.state.IS_LOGIN != "yes") {
      Alert.alert("请先登录账号");
      return false;
    }
    formData.append("user", this.state.USER_ID);
    formData.append("profession", d);
    formData.append("nickname", "");
    return fetch(`https://devpay.brae.co/test/insurance/change`, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: formData
    })
      .then(resp => {
        if (resp.status === 200) {
          return resp.json();
        } else {
          console.error("something went wrong!");
        }
      })
      .then(respJson => {
        if (respJson.enmsg != "ok") {
          Alert.alert(respJson.cnmsg);
        } else {
          AsyncStorage.setItem("PROFESSION", d).then(() => {
            console.log("保存修改成功");
            that.setState({ PROFESSION: d });
          });
        }
      })
      .catch(err => console.error(err));
  }

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <ScrollView>
          {/* 头部头像 */}
          <View style={styles.header}>
            {this.state.IS_LOGIN == "yes" ? (
              <Image
                source={require("../../assets/Mine/iconpic1.png")}
                style={styles.mineIcon}
              />
            ) : (
              <Image
                source={require("../../assets/Mine/iconpic_gray.png")}
                style={styles.mineIcon}
              />
            )}
            {this.state.IS_LOGIN == "yes" ? null : (
              <Text style={styles.headerText}>登录可享更多特权</Text>
            )}
          </View>

          {/* 设置昵称和职业 */}
          {this.state.IS_LOGIN == "yes" ? (
            <View style={styles.midContainer}>
              {/* 更改昵称 */}
              <TouchableOpacity
                style={styles.itemContainer}
                onPress={() => {
                  if (this.state.IS_LOGIN == "yes") {
                    AlertIOS.prompt("更改昵称", null, this.saveResponse1);
                  } else {
                    Alert.alert("请先登录账号");
                  }
                }}
              >
                <View style={styles.itemLeft}>
                  <Text style={styles.leftTitle}>昵称</Text>
                </View>
                <View style={styles.itemRight}>
                  {this.state.IS_LOGIN === "yes" ? (
                    <Text style={styles.itemRightContent}>
                      {this.state.NICKNAME}
                    </Text>
                  ) : null}
                  <Image
                    style={styles.itemRightImg}
                    source={require("../../assets/Mine/rightArrow_gray.png")}
                  />
                </View>
              </TouchableOpacity>
              {/* 更改职业 */}
              <TouchableOpacity
                style={styles.itemContainer}
                onPress={() => {
                  if (this.state.IS_LOGIN == "yes") {
                    AlertIOS.prompt("更改职业", null, this.saveResponse2);
                  } else {
                    Alert.alert("请先登录账号");
                  }
                }}
              >
                <View style={styles.itemLeft}>
                  <Text style={styles.leftTitle}>职业</Text>
                </View>
                <View style={styles.itemRight}>
                  {this.state.IS_LOGIN === "yes" ? (
                    <Text style={styles.itemRightContent}>
                      {this.state.PROFESSION}
                    </Text>
                  ) : null}
                  <Image
                    style={styles.itemRightImg}
                    source={require("../../assets/Mine/rightArrow_gray.png")}
                  />
                </View>
              </TouchableOpacity>
              {/* 公司 */}
              <TouchableOpacity
                style={styles.itemContainer}
                onPress={() => {
                  if (this.state.IS_LOGIN == "yes") {
                    AlertIOS.prompt("更改手机", null, this.saveResponse2);
                  } else {
                    Alert.alert("请先登录账号");
                  }
                }}
              >
                <View style={styles.itemLeft}>
                  <Text style={styles.leftTitle}>手机</Text>
                </View>
                <View style={styles.itemRight}>
                  {this.state.IS_LOGIN === "yes" ? (
                    <Text style={styles.itemRightContent}>
                      {this.state.PHONT}
                    </Text>
                  ) : null}
                  <Image
                    style={styles.itemRightImg}
                    source={require("../../assets/Mine/rightArrow_gray.png")}
                  />
                </View>
              </TouchableOpacity>
              {/* 手机 */}
              <TouchableOpacity
                style={styles.itemContainer}
                onPress={() => {
                  if (this.state.IS_LOGIN == "yes") {
                    AlertIOS.prompt("更改公司", null, this.saveResponse2);
                  } else {
                    Alert.alert("请先登录账号");
                  }
                }}
              >
                <View style={styles.itemLeft}>
                  <Text style={styles.leftTitle}>公司</Text>
                </View>
                <View style={styles.itemRight}>
                  {this.state.IS_LOGIN === "yes" ? (
                    <Text style={styles.itemRightContent}>
                      {this.state.COMPONY}
                    </Text>
                  ) : null}
                  <Image
                    style={styles.itemRightImg}
                    source={require("../../assets/Mine/rightArrow_gray.png")}
                  />
                </View>
              </TouchableOpacity>
            </View>
          ) : null}

          <View style={styles.midContainer}>
            <TouchableOpacity style={styles.itemContainer}>
              <View style={styles.itemLeft}>
                <Text style={styles.leftTitle}>评价我们</Text>
              </View>
              <View style={styles.itemRight}>
                <Image
                  style={styles.itemRightImg}
                  source={require("../../assets/Mine/rightArrow_gray.png")}
                />
              </View>
            </TouchableOpacity>
            <TouchableOpacity style={styles.itemContainer}>
              <View style={styles.itemLeft}>
                <Text style={styles.leftTitle}>客服电话</Text>
              </View>
              <View style={styles.itemRight}>
                <Text style={styles.itemRightContent}>4001-608876</Text>
                <Image
                  style={styles.itemRightImg}
                  source={require("../../assets/Mine/rightArrow_gray.png")}
                />
              </View>
            </TouchableOpacity>
          </View>

          <View style={styles.midContainer}>
            <TouchableOpacity style={styles.itemContainer}>
              <View style={styles.itemLeft}>
                <Text style={styles.leftTitle}>当前版本</Text>
              </View>
              <View style={styles.itemRight}>
                <Text style={styles.itemRightContent}>
                  V1.0.0
                </Text>
              </View>
            </TouchableOpacity>
          </View>

          {/* 登录 */}
          <TouchableOpacity
            style={styles.loginOut}
            onLogin={this.props.onLogin}
            onPress={() => {
              this.state.IS_LOGIN == "yes"
                ? this.signOut()
                : navigate("Login", {
                    refreshCallback: data => {
                      console.log("refreshCallback参数", data);
                      this.setState({
                        IS_LOGIN: data.IS_LOGIN,
                        USER_ID: data.USER_ID,
                        NICKNAME: data.NICKNAME,
                        PROFESSION: data.PROFESSION
                      });
                    }
                  });
            }}
          >
            <Text style={styles.loginOutText}>
              {this.state.IS_LOGIN == "yes" ? "退出登录" : "登录"}
            </Text>
          </TouchableOpacity>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#EFEFEF"
  },
  header: {
    backgroundColor: "#1B9341",
    height: 154,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 10
  },
  headerText: {
    fontSize: 15,
    color: "#fff",
    marginLeft: 22
  },
  mineIcon: {
    width: 86,
    height: 86
  },
  mineName: {
    fontSize: 16,
    lineHeight: 22,
    color: "#fff"
  },
  headerRight: {
    width: 14,
    height: 14
  },
  midContainer: {
    marginBottom: 10
  },
  itemContainer: {
    height: 46,
    paddingLeft: 16,
    paddingRight: 16,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: "#fff",
    borderStyle: "solid",
    borderColor: "#F0F0F0",
    borderBottomWidth: 1
  },
  itemLeft: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center"
  },
  leftTitle: {
    fontSize: 15,
    color: "#242424"
  },
  itemRight: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center"
  },
  itemRightContent: {
    marginRight: 5,
    color: "#7A7A7A"
  },
  itemRightImg: {
    width: 14,
    height: 14
  },
  loginOut: {
    marginBottom: 10,
    height: 46,
    backgroundColor: "#fff",
    justifyContent: "center"
  },
  loginOutText: {
    textAlign: "center",
    fontSize: 15
  }
});