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";

export default class InsuranceChurch extends Component {
  // static navigationOptions = {
  //   title: '保堂',
  // };
  constructor(props) {
    super(props);
    // this._renderMap = this._renderMap.bind(this);
    this.state = {
      ListData: [
        {
          title: "凶猛台风来袭！与伤亡相关的保险知识你需要了解！",
          time: "刚刚",
          url: "http://mp.weixin.qq.com/s/_lGAz9sSxuulbdPGZ020cQ",
          imgurl: require("../../assets/church/1.png")
        },
        {
          title: "17世纪伦敦火灾频发，牛掰的保险公司有高招！",
          time: "3小时前",
          url: "http://mp.weixin.qq.com/s/cJ7oHQ__GBiBxBGZ1SCgDg",
          imgurl: require("../../assets/church/2.png")
        },
        {
          title: "这两个国家为何会有这些天气保险呢？原来是这样.....",
          time: "昨天",
          url: "http://mp.weixin.qq.com/s/EimQbKC0ziqN0o8_S1ACFQ",
          imgurl: require("../../assets/church/3.png")
        },
        {
          title: "车险小白必须知道的不计免赔险",
          time: "9月10日",
          url: "http://mp.weixin.qq.com/s/W9uR5G6ZlTb7HLLX-DZzSQ",
          imgurl: require("../../assets/church/4.png")
        },
        {
          title: "“五险一金”进了嘻哈歌词，有关社保和商业保险的知识你了解吗？",
          time: "9月9日",
          url: "http://mp.weixin.qq.com/s/0I7p2vaM23CsDiI41hHNOQ",
          imgurl: require("../../assets/church/5.png")
        },
      ]
    };
  }

  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("CommonWebView", { item: item })}
              >
                <Image style={styles.itemImgWrapper} source={item.imgurl} />
                <View style={styles.itemRightWrapper}>
                  <Text style={styles.itemTextTop} numberOfLines={2}>
                    {item.title}
                  </Text>
                  <Text style={styles.itemTextBottom}>{item.time}</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: {
    height: 102,
    backgroundColor: "#fff",
    flexDirection: "row",
    alignItems: "center",
    borderTopWidth: 1,
    borderTopColor: "#EEEEEE",
    borderStyle: "solid",
    paddingLeft: 13,
    paddingRight: 13
  },
  itemImgWrapper: {
    width: 88,
    height: 78,
    // backgroundColor: "#ccc",
    marginRight: 12
  },
  itemRightWrapper: {
    justifyContent: "center",
    height: 66,
    flex: 1
    // marginRight: 13
  },
  itemTextTop: {
    fontSize: 16,
    color: "#202020",
    lineHeight: 21
  },
  itemTextBottom: {
    fontSize: 13,
    color: "#7A7A7A",
    lineHeight: 18
  }
});