import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  Image
} from 'react-native';

export default class InsuranceCircle extends Component {
  render() {
    return (
      <View style={styles.container}>
        <NewsList />
      </View>
    );
  }
}

class NewsList extends Component {
  render() {
    return (
      <ScrollView style={styles.scrollViewContainer} automaticallyAdjustContentInsets={false}>
        <ListItem 
          title={"家庭经济越差越应该买保险，因为你病不起，输不起，也折腾不起…"}
          content={"现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…"}
          name={"汉克斯"}
          num={"30"}
        />
        <ListItem 
          title={"家庭经济越差越应该买保险，因为你病不起，输不起，也折腾不起…"}
          content={"现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…"}
          name={"汉克斯"}
          num={"30"}
        />
        <Text style={styles.scrollViewText}>没有更多了</Text>
      </ScrollView>
    )
  }
}

class ListItem extends Component {
  render() {
    return (
      <TouchableOpacity style={styles.itemContainer}>
        <Text style={styles.itemTitle} numberOfLines={2}>{this.props.title}</Text>
        <Text style={styles.itemContent} numberOfLines={3}>{this.props.content}</Text>
        <View style={styles.itemInfoWrapper}>
          <View style={styles.itemInfoLeft}>
            {/* <Image style={styles.itemInfoIcon} /> */}
            <View style={styles.itemInfoIcon}></View>
            <Text style={styles.itemInfoName}>{this.props.name}</Text>
          </View>
          <Text style={styles.itemInfoRight}>{this.props.num} 评论</Text>
        </View>
      </TouchableOpacity>
    )
  }
}

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: {
    width: 26,
    height: 26,
    backgroundColor: "#ccc",
    marginRight: 10,
    borderRadius: 26,
  },
  itemInfoName: {
    fontSize: 13,
    color: "#242424",
    lineHeight: 18,
  },
  itemInfoRight: {
    fontSize: 13,
    color: "#999999",
    lineHeight: 18,
  },
})