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

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "",
      content: "",
      IS_LOGIN: "",
      USER_ID: "",
      NICKNAME: "",
      PROFESSION: "",
      listData: []
    };
  }
  componentWillMount() {
    this.getAsyncStorage();
  }

  componentDidMount() {}

  getAsyncStorage() {
    const 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] : "",
          NICKNAME: result[2][1] != null ? result[2][1] : "",
          PROFESSION: result[3][1] != null ? result[3][1] : ""
        });
      }
    );
  }
  addArticle() {
    let that = this,
      id = this.state.USER_ID,
      content = this.state.content,
      title = this.state.title,
      formData = new FormData();
    formData.append("userid", id);
    formData.append("title", title);
    formData.append("content", content);
    return fetch(`https://devpay.brae.co/test/insurance/article/add`, {
      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 {
          that.getArticles();
          setTimeout(function() {
            that.props.navigation.goBack();
          }, 1000);
        }
      });
  }
  getArticles() {
    var that = this;
    // 请求文章数据
    return fetch(`https://devpay.brae.co/test/insurance/article`, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      }
    })
      .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 {
          that.setState({
            listData: respJson.data.data
          },() => {
            that.props.navigation.state.params.refreshCallback(that.state.listData)
            console.log("fanhuide",that.state.listData)
          })
        }
      })
      .catch(err => console.error(err));
  }
  submit() {
    if (!this.state.title) {
      Alert.alert("请填写标题");
      return false;
    }
    if (!this.state.content) {
      Alert.alert("请填写内容");
      return false;
    }
    this.addArticle();
  }

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <View style={styles.inputContaier}>
          <TextInput
            style={styles.titleInput}
            placeholder="文章标题"
            onChangeText={title => this.setState({ title })}
            value={this.state.title}
            autoCapitalize="none"
            selectionColor="#1B9341"
            numberOfLines={1}
            clearButtonMode="always"
            keyboardType="default"
            enablesReturnKeyAutomatically={true}
            returnKeyType="send"
            onSubmitEditing={() => {
              Keyboard.dismiss();
            }}
          />
        </View>
        <View style={styles.inputContaier}>
          <TextInput
            style={styles.contentInput}
            placeholder="填写发布内容"
            onChangeText={content => this.setState({ content })}
            value={this.state.content}
            autoCapitalize="none"
            multiline={true}
            selectionColor="#1B9341"
            clearButtonMode="always"
            keyboardType="default"
            enablesReturnKeyAutomatically={true}
            returnKeyType="send"
            onSubmitEditing={() => {
              Keyboard.dismiss();
            }}
          />
        </View>
        <TouchableOpacity
          onPress={() => {
            this.submit();
          }}
          style={styles.confirmBtn}
        >
          <Text style={styles.confirmBtnText}>发布</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#EFEFEF"
  },
  inputContaier: {
    backgroundColor: "white",
    paddingHorizontal: 15,
    paddingVertical: 10,
    borderStyle: "solid",
    borderColor: "#EFEFEF",
    borderTopWidth: 1
  },
  titleInput: {
    fontSize: 15,
    paddingTop: 8,
    paddingBottom: 7
  },
  contentInput: {
    fontSize: 15,
    paddingTop: 8,
    paddingBottom: 7,
    height: 200
  },
  confirmBtn: {
    marginVertical: 20,
    marginHorizontal: 40,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#1B9341",
    height: 45,
    borderRadius: 5
  },
  confirmBtnText: {
    fontSize: 16,
    color: "white"
  }
});