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

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      gridData: {
        title: ["角色", "建议产品", "建议保额", "保险年限", "缴费期限", "年缴保费"],
        actor: "父亲",
        age: "42岁",
        products: [
          {
            name: "成人意外险",
            price: "50W",
            long: "1年",
            year: "20年",
            eachyear: "150元"
          },
          {
            name: "成人意外险",
            price: "50W",
            long: "1年",
            year: "20年",
            eachyear: "150元"
          },
          {
            name: "成人意外险",
            price: "50W",
            long: "1年",
            year: "20年",
            eachyear: "150元"
          }
        ],
        count: "1200"
      }
    };
  }
  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);
        }
      });
  }

  submit() {
    this.props.navigation.dispatch(NavigationActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({
          routeName: "MainTabBar"
        })
      ]
    }))
  }

  render() {
    console.log("solution", this.props.navigation);
    const { navigate } = this.props.navigation;
    const { gridData } = this.state;
    return (
      <View style={styles.container}>
        <View style={styles.ownContaier}>
          <View style={styles.headerContainer}>
            <View style={styles.titleWrapper}>
              <Text style={styles.headerTitle}>关于自己的保险方案</Text>
            </View>
          </View>
          <View style={styles.infoContainer}>
            <View style={styles.leftInfoContaier}>
              <View style={styles.TInfoContaier}>
                <Text>年龄：</Text>
                <Text>16岁</Text>
              </View>
              <View style={styles.BInfoContaier}>
                <Text>个人年收入：</Text>
                <Text>10万</Text>
              </View>
            </View>
            <View style={styles.rightInfoContaier}>
              <View style={styles.TInfoContaier}>
                <Text>社保：</Text>
                <Text>有社保</Text>
              </View>
              <View style={styles.BInfoContaier}>
                <Text>负责：</Text>
                <Text>XXX贷款</Text>
              </View>
            </View>
          </View>
          <View style={styles.adviceContainer}>
            <Text style={styles.adviceText}>
              作为家庭的经济支柱，压力和责任重大，应优先进行保险配置，且应占家庭保险的中支出和总保额的大比重，建议依次配置以下产品，以保障家庭持续、高品质的运营
            </Text>
          </View>
        </View>

        <View style={styles.configureContaier}>
          <View style={styles.headerContainer}>
            <View style={styles.titleWrapper}>
              <Text style={styles.headerTitle}>保险配置方案</Text>
            </View>
          </View>
          <ScrollView style={styles.tableContainer}>
            <Grid>
              <Row>
                {/* {gridData.title.map((item,index) => {
                  return (
                    <Col key={index} style={styles.gridtitleContaier}><Text style={styles.gridheaderText}>{item}</Text></Col>
                  )
                })} */}
                <Col size={1} style={styles.gridtitleContaier}>
                  <Text style={styles.gridheaderText}>角色</Text>
                </Col>
                <Col size={1.5} style={styles.gridtitleContaier}>
                  <Text style={styles.gridheaderText}>建议产品</Text>
                </Col>
                <Col size={1} style={styles.gridtitleContaier}>
                  <Text style={styles.gridheaderText}>建议保额</Text>
                </Col>
                <Col size={1} style={styles.gridtitleContaier}>
                  <Text style={styles.gridheaderText}>保险年限</Text>
                </Col>
                <Col size={1} style={styles.gridtitleContaier}>
                  <Text style={styles.gridheaderText}>缴费期限</Text>
                </Col>
                <Col size={1} style={styles.gridtitleContaier}>
                  <Text style={styles.gridheaderText}>年缴保费</Text>
                </Col>
              </Row>
              <Row>
                <Col style={styles.actor} size={1}>
                  <Text style={styles.contentText}>父亲</Text>
                  <Text style={styles.contentText}>42岁</Text>
                </Col>
                <Col size={5.5}>
                  {gridData.products.map((item, index) => {
                    return (
                      <Row key={index}>
                        <Col size={1.5} style={styles.contentCol}>
                          <Text style={styles.contentText}>{item.name}</Text>
                        </Col>
                        <Col size={1} style={styles.contentCol}>
                          <Text style={styles.contentText}>{item.price}</Text>
                        </Col>
                        <Col size={1} style={styles.contentCol}>
                          <Text style={styles.contentText}>{item.long}</Text>
                        </Col>
                        <Col size={1} style={styles.contentCol}>
                          <Text style={styles.contentText}>{item.year}</Text>
                        </Col>
                        <Col size={1} style={styles.contentCol}>
                          <Text style={styles.contentText}>
                            {item.eachyear}
                          </Text>
                        </Col>
                      </Row>
                    );
                  })}
                  <Row style={styles.countContainer}>
                    <Text style={styles.countText}>{gridData.count}</Text>
                    <Text style={styles.contentText}>元/年</Text>
                  </Row>
                </Col>
              </Row>
            </Grid>
          </ScrollView>
          <View style={styles.tipsContainer}>
            <Image
              style={{ width: 16, height: 16 }}
              source={require("../../../assets/home/ic_notice.png")}
            />
            <Text style={styles.tipsText}>保险配置预算仅供参考，实际缴费金额与投保时内容有关。</Text>
          </View>
        </View>

        <TouchableOpacity
          onPress={() => {
            this.submit();
          }}
          style={styles.confirmBtn}
        >
          <Text style={styles.confirmBtnText}>完成</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#F0F0F0"
  },
  ownContaier: {
    backgroundColor: "white",
    marginTop: 10
  },
  headerContainer: {
    marginLeft: 10,
    height: 45,
    justifyContent: "center",
    alignItems: "flex-start"
  },
  titleWrapper: {
    borderStyle: "solid",
    borderColor: "#009B3A",
    borderLeftWidth: 2,
    paddingLeft: 7
  },
  headerTitle: {
    fontSize: 16,
    fontWeight: "bold"
  },
  infoContainer: {
    marginLeft: 18,
    borderStyle: "solid",
    borderColor: "#E8E8E8",
    borderTopWidth: 0.5,
    flexDirection: "row",
    paddingVertical: 12
  },
  leftInfoContaier: {
    flex: 1,
    justifyContent: "center",
    alignItems: "flex-start"
  },
  rightInfoContaier: {
    flex: 1,
    justifyContent: "center",
    alignItems: "flex-start"
  },
  TInfoContaier: {
    flexDirection: "row",
    marginBottom: 12
  },
  BInfoContaier: {
    flexDirection: "row"
  },
  adviceContainer: {
    marginLeft: 18,
    paddingRight: 18,
    borderStyle: "solid",
    borderColor: "#E8E8E8",
    borderTopWidth: 0.5,
    paddingVertical: 12
  },
  adviceText: {
    fontSize: 13,
    lineHeight: 20,
    color: "#242424"
  },
  configureContaier: {
    backgroundColor: "white",
    marginTop: 10
  },
  tableContainer: {
    marginLeft: 18,
    paddingRight: 18,
    borderStyle: "solid",
    borderColor: "#E8E8E8",
    borderTopWidth: 1,
    paddingVertical: 12
  },
  gridtitleContaier: {
    justifyContent: "center",
    alignItems: "center",
    paddingVertical: 8,
    backgroundColor: "#1B9341",
    borderColor: "#E8E8E8",
    borderStyle: "solid",
    borderLeftWidth: 0.5
  },
  gridheaderText: {
    fontSize: 11,
    color: "white"
  },
  actor: {
    justifyContent: "center",
    alignItems: "center",
    borderColor: "#ccc",
    borderStyle: "solid",
    borderWidth: 0.5
  },
  contentCol: {
    justifyContent: "center",
    alignItems: "center",
    paddingVertical: 8,
    borderColor: "#ccc",
    borderStyle: "solid",
    borderBottomWidth: 0.5,
    borderRightWidth: 0.5
  },
  contentText: {
    fontSize: 12,
    lineHeight: 17
  },
  countContainer: {
    justifyContent: "center",
    alignItems: "center",
    paddingVertical: 8,
    borderColor: "#ccc",
    borderStyle: "solid",
    borderBottomWidth: 0.5,
    borderRightWidth: 0.5
  },
  countText: {
    fontSize: 18,
    color: "#1B9341"
  },
  tipsContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginHorizontal: 24,
    marginBottom: 10
  },
  tipsText: {
    fontSize: 12,
    color: "#7A7A7A",
    lineHeight: 17,
    marginLeft: 5
  },
  confirmBtn: {
    marginVertical: 20,
    marginHorizontal: 40,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#1B9341",
    height: 45,
    borderRadius: 5
  },
  confirmBtnText: {
    fontSize: 16,
    color: "white"
  },
});