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

export default class InsuranceCircle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ListData: [],
    };
  }

  componentDidMount() {
    this.getArticles();
  }

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