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

export default class InsuranceCircle extends Component {
  static navigationOptions = ({ navigation }) => {
    const { state, setParams, navigate } = navigation;
    return {
      headerRight: (
        <TouchableOpacity
          style={{ marginRight: 13 }}
          onPress={() => state.params.testLoginAndGo()}
        >
          <Image
            source={require("../../assets/circle/ic_announce.png")}
            style={{ width: 19, height: 19 }}
          />
        </TouchableOpacity>
      )
    };
  };
  constructor(props) {
    super(props);
    this.state = {
      ListData: [],
      IS_LOGIN: "",
      USER_ID: "",
      NICKNAME: "",
      PROFESSION: ""
    };
  }
  componentWillMount() {
    // this.getAsyncStorage();
    this.getArticles();
  }
  componentDidMount() {
    this.props.navigation.setParams({
      testLoginAndGo: this.testLoginAndGo.bind(this)
    });
  }
  testLoginAndGo() {
    const that = this;
    const { navigate } = this.props.navigation;
    console.log("为何是underfined?",this);
    // this.getAsyncStorage();
    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] : ""
        },() => {
          if (this.state.IS_LOGIN == 'yes') {
            navigate("Release");
          } else {
            Alert.alert("请先登录账号");
          }
        });
      }
    );
    // if (this.state.IS_LOGIN == 'yes') {
    //   navigate("Release");
    // } else {
    //   Alert.alert("请先登录账号");
    // }
  }

  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] : ""
        });
      }
    );
  }

  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
          });
          console.log("state.ListData", this.state.ListData);
        }
      })
      .catch(err => console.error(err));
  }

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <ScrollView
          style={styles.scrollViewContainer}
          automaticallyAdjustContentInsets={false}
        >
          {this.state.ListData.map((item, index) => {
            return (
              <TouchableOpacity
                style={styles.itemContainer}
                key={index}
                onPress={() => navigate("Details", { item: item })}
              >
                <Text style={styles.itemTitle} numberOfLines={2}>
                  {item.title}
                </Text>
                <Text style={styles.itemContent} numberOfLines={3}>
                  {item.content}
                </Text>
                <View style={styles.itemInfoWrapper}>
                  <View style={styles.itemInfoLeft}>
                    <Image
                      source={require("../../assets/Mine/iconpic1.png")}
                      style={[styles.itemInfoIcon, { width: 26, height: 26 }]}
                    />
                    <Text style={styles.itemInfoName}>{item.name}</Text>
                  </View>
                  <Text style={styles.itemInfoRight}>{item.num} 评论</Text>
                </View>
              </TouchableOpacity>
            );
          })}
          <Text style={styles.scrollViewText}>没有更多了</Text>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#EFEFEF"
  },
  scrollViewContainer: {
    // height: 300
    flex: 1
    // marginBottom: 49,
  },
  scrollViewText: {
    color: "#7A7A7A",
    fontSize: 13,
    marginTop: 10,
    marginBottom: 10,
    textAlign: "center"
  },
  itemContainer: {
    backgroundColor: "#fff",
    marginBottom: 10,
    // height: 180,
    paddingLeft: 13,
    paddingRight: 13,
    paddingTop: 19,
    paddingBottom: 12
  },
  itemTitle: {
    fontSize: 17,
    color: "#242424",
    lineHeight: 24
  },
  itemContent: {
    marginTop: 5,
    fontSize: 14,
    color: "#7A7A7A",
    lineHeight: 20
  },
  itemInfoWrapper: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: 11
  },
  itemInfoLeft: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center"
  },
  itemInfoIcon: {
    marginRight: 10
  },
  itemInfoName: {
    fontSize: 13,
    color: "#242424",
    lineHeight: 18
  },
  itemInfoRight: {
    fontSize: 13,
    color: "#999999",
    lineHeight: 18
  }
});