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

export default class InsuranceCircle extends Component {
  static navigationOptions = {
    // headerRight: this._rightBtn()
  }

  constructor(props) {
    super(props);
    this.state = {
      ListData: [],
      IS_LOGIN: "",
      USER_ID: "",
      NICKNAME: "",
      PROFESSION: "",
    };
  }

  componentWillMount() {
    this.getAsyncStorage();
    this.getArticles();
  }

  _rightBtn() {
    return (
      <TouchableOpacity style={{marginRight: 13}} onPress={() => {}}>
        <Image source={require("../../assets/circle/ic_announce.png")} style={{width: 19,height: 19}} />
      </TouchableOpacity>
    )
  }

  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
  }
});