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

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showDate: false,
      date: new Date()
    };
  }
  componentWillMount() {}

  componentDidMount() {}

  getListData() {
    let that = this;
    return fetch(`https://devpay.brae.co/test/insurance/topic`, {
      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.topic
          });
          console.log("首页列表", this.state.ListData);
        }
      });
  }

  render() {
    // console.log("首页的this.props", this);
    // console.log("render首页文章列表", this.state.ListData);
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <Text>健康问卷开始</Text>
        {this.state.showDate ? (
          <DatePickerIOS
            style={styles.dateWrapper}
            date={this.state.date}
            onDateChange={date => this.setState({ date })}
            mode="date"
          />
        ) : null}

        <TouchableOpacity
          onPress={() => {
            {
              /* alert(this.state.date); */
            }
            this.setState({
              showDate: !this.state.showDate
            });
          }}
        >
          <Text>打印时间</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#EFEFEF"
  },
  dateWrapper: {
    // position: "absolute",
    // bottom: 200,
    marginBottom: 50,
    width: 250
  }
});