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

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      QuesList: [
        {
          title: "1.我该称呼您先生还是女士呢？",
          type: "select",
          answers: ["先生", "女士"]
        },
        {
          title: "2.请问您是否有家庭负债？",
          type: "select",
          answers: ["有贷款", "无贷款"]
        },
        {
          title: "3.您要为哪些家人投保呢？",
          type: "select",
          answers: ["先生", "配偶", "儿子", "女儿", "母亲", "父亲"]
        },
        {
          title: "4.选择出生日期",
          type: "date",
          answers: "1994.06.06"
        }
      ],
      answerList: []
    };
  }
  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);
        }
      });
  }

  _renderQuestion() {
    return this.state.QuesList.map((item, index) => {
      return (
        <View style={styles.itemQuesContainer} key={index}>
          <View style={styles.titleContaier}>
            <Text style={styles.title}>{item.title}</Text>
          </View>
          <View style={styles.answerContainer}>
            {item.type == "select" ? (
              item.answers.map((x, index2) => {
                return (
                  <TouchableOpacity key={index2} style={styles.answerWrapper}>
                    <Text style={styles.answer}>{x}</Text>
                  </TouchableOpacity>
                );
              })
            ) : (
              <TouchableOpacity>
                <Text>{item.answers}</Text>
              </TouchableOpacity>
            )}
          </View>
        </View>
      );
    });
  }

  render() {
    const { navigate } = this.props.navigation;
    return <View style={styles.container}>{this._renderQuestion()}</View>;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#F0F0F0",
    paddingHorizontal: 12,
    paddingTop: 12
  },
  itemQuesContainer: {
    backgroundColor: "white",
    marginBottom: 12,
    borderRadius: 4
  },
  titleContaier: {
    paddingHorizontal: 14,
    paddingVertical: 17
  },
  answerContainer: {
    borderStyle: "solid",
    borderColor: "#E6E6E6",
    borderTopWidth: 0.5,
    paddingHorizontal: 14,
    paddingBottom: 17,
    flexDirection: "row",
    flexWrap: "wrap"
  },
  answerWrapper: {
    marginRight: 18,
    marginTop: 17,
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderStyle: "solid",
    borderColor: "#ccc",
    borderWidth: 0.5,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 3
  },
  answer: {
    fontSize: 15,
  }
});