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

export default class ArticleTemplate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: this.props.navigation.state.params.item.id,
      articleData: {
        paragraph: []
      }
    };
  }
  componentWillMount() {
    console.log("will  的ID",this.state.id)
    this.getArticles();
  }
  getArticles() {
    let that = this,
    id = this.state.id;
return fetch(`https://devpay.brae.co/test/insurance/topic/${id}`, {
  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({
        articleData: respJson.data.articleData
      })
      console.log("详情页的文章",respJson.data.articleData)
    }
  });
  }
  render() {
    const { articleData } = this.state;
    return (
      <View style={styles.container}>
        <ScrollView automaticallyAdjustContentInsets={false}>
          <View style={styles.headerContaier}>
            <Text style={styles.headerTitle}>{articleData.title}</Text>
            <View style={styles.infoWrapper}>
              <Text style={styles.time}>{articleData.time}</Text>
              <Text style={styles.author}>{articleData.author}</Text>
            </View>
          </View>
          <View style={styles.contentConatiner}>
            {articleData.paragraph.map((item, index) => {
              return (
                <View style={styles.paragraphContainer} key={index}>
                  {item.title ? (
                    <Text style={styles.paragraphTitle}>{item.title}</Text>
                  ) : null}
                  {item.image ? (
                    <Image style={styles.paragraphImage} resizeMode="contain" source={{uri: item.image}} />
                  ) : null}
                  <Text style={styles.paragraphContent}>{item.content}</Text>
                </View>
              );
            })}
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white"
  },
  headerContaier: {
    marginTop: 23,
    marginLeft: 15,
    marginRight: 15
  },
  headerTitle: {
    color: "#030303",
    fontSize: 24,
    lineHeight: 30
  },
  infoWrapper: {
    marginTop: 10,
    flexDirection: "row"
  },
  time: {
    fontSize: 15,
    color: "#999999",
    marginRight: 8
  },
  author: {
    fontSize: 15,
    color: "#999999"
  },
  contentConatiner: {
    marginTop: 20,
    marginLeft: 15,
    marginRight: 15
  },
  paragraphContainer: {
    marginTop: 20,
    marginBottom: 20
  },
  paragraphTitle: {
    alignSelf: "center",
    color: "#1B9341",
    fontSize: 15,
    marginBottom: 15,
    // backgroundColor: "red",
  },
  paragraphImage: {
    width: Dimensions.get("window").width - 30,
    height: 140,
    // backgroundColor: "blue",
    marginBottom: 20,
  },
  paragraphContent: {
    color: "#555555",
    fontSize: 15,
    lineHeight: 22,
    // backgroundColor: "yellow",
  }
});