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

export default class InsuranceCircle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ListData: [
        {
          title: "家庭经济越差越应该买保险，因为你病不起，输不起，也折腾不起…",
          content:
            "现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…",
          name: "jack",
          image: require("../../assets/circle/newspic.png"),
          num: "30",
          comments: []
        },
        {
          title: "家庭经济越差越应该买保险，因为你病不起，输不起，也折腾不起…",
          content:
            "现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…",
          name: "mike",
          image: require("../../assets/circle/newspic.png"),
          num: "29",
          comments: []
        },
        {
          title: "因为你病不起，输不起，也折腾不起…",
          content:
            "现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…",
          name: "luosf",
          image: require("../../assets/circle/newspic.png"),
          num: "10",
          comments: []
        }
      ]
    };
  }

  render() {
    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={() => {
                  this.props.navigator.push({
                    component: Details,
                    passProps: {}
                  });
                }}
              >
                <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={item.image}
                      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",
    paddingTop: 74
  },
  scrollViewContainer: {
    height: 300
  },
  scrollViewText: {
    color: "#7A7A7A",
    fontSize: 13,
    marginTop: 10,
    textAlign: "center"
  },
  itemContainer: {
    backgroundColor: "#fff",
    marginBottom: 10,
    height: 180,
    paddingLeft: 13,
    paddingRight: 13,
    paddingTop: 19
  },
  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
  }
});