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 {
  // static navigationOptions = {
  //   title: '保圈',
  // };
  constructor(props) {
    super(props);
    this.state = {
      ListData: [
        // {
        //   title: "家庭经济越差越应该买保险，因为你病不起，输不起，也折腾不起…",
        //   content:
        //     "现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…",
        //   name: "嘿嘿嘿",
        //   identity: "保险代理人",
        //   image: require("../../assets/Mine/iconpic1.png"),
        //   num: "30",
        //   time: "2017-8-15",
        //   comments: [{
        //     replyer: "噢噢噢",
        //     replayicon: require("../../assets/Mine/iconpic1.png"),
        //     beenreplyer: "嘿嘿嘿",
        //     content: "生活就是如此矛是如此此生活就是如此矛盾现实生活就是如此矛盾现",
        //     time: "两小时前",
        //   },{
        //     replyer: "哦哦哦",
        //     replayicon: require("../../assets/Mine/iconpic1.png"),
        //     beenreplyer: "哈哈哈",
        //     content: "生活就是如此矛是如此此生活就是如此矛盾现实生活就是如此矛盾现",
        //     time: "两小时前",
        //   },{
        //     replyer: "洛洛洛",
        //     replayicon: require("../../assets/Mine/iconpic1.png"),
        //     beenreplyer: "额额额",
        //     content: "生活就是如此矛是如此此生活就是如此矛盾现实生活就是如此矛盾现",
        //     time: "两小时前",
        //   }],
        // },
        // {
        //   title: "家庭经济越差越应该买保险，因为你病不起，输不起，也折腾不起…",
        //   content:
        //     "现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…",
        //   name: "嘿嘿嘿",
        //   identity: "保险代理人",
        //   image: require("../../assets/circle/newspic.png"),
        //   num: "29",
        //   time: "2017-8-15",
        //   comments: []
        // },
        // {
        //   title: "因为你病不起，输不起，也折腾不起…",
        //   content:
        //     "现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…",
        //   name: "luosf",
        //   identity: "保险代理人",
        //   image: require("../../assets/circle/newspic.png"),
        //   num: "10",
        //   time: "2017-8-15",
        //   comments: []
        // }
      ],
      testData: null,
    };
  }

  componentDidMount() {
    var that = this;
    return fetch(`https://devpay.brae.co/test/insurance/article`,{
      method: "POST",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    })
      .then((resp) => {
        // console.log("测试接口",resp);
        // return false;
        if (resp.status === 200) {
          return resp.json();
        } else {
          console.error("something went wrong!");
        }
      })
      .then((respJson) => {
        if (respJson.enmsg != 'ok') {
          console.error(err);
          alert(respJson.cnmsg);
        } else {
          that.setState({
            ListData: respJson.data.data
          });
          console.log('state.testData',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
  }
});