import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  Image,
  ListView
} from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";

export default class InsuranceChurch extends Component {
  // static navigationOptions = {
  //   title: '保堂',
  // };
  constructor(props) {
    super(props);
    this.state = {
      ListData: []
    };
  }
  componentWillMount() {
    this.getListData();
  }

  getListData() {
    let that = this;
    return fetch(`https://devpay.brae.co/test/insurance/story`, {
      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.story
          });
          console.log("保堂列表", respJson.data.story);
        }
      });
  }

  render() {
    const { navigate } = this.props.navigation;
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    const dataSource = ds.cloneWithRows(this.state.ListData);
    return (
      <View style={styles.container}>
        <ListView
          style={styles.scrollViewContainer}
          dataSource={dataSource}
          enableEmptySections={true}
          renderRow={(item, index) => {
            return (
              <TouchableOpacity
                style={styles.itemContainer}
                key={index}
                onPress={() =>
                  navigate("ArticleTemplate", { item: item, model: "story" })}
              >
                <Image
                  style={styles.itemImgWrapper}
                  source={{ uri: 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>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#EFEFEF"
  },
  scrollViewContainer: {
    flex: 1
  },
  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
  }
});