import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ScrollView
} from "react-native";
import Carousel from "../../Components/Carousel";
import AllProduct from "./allProduct";
import CommonWebView from "../../Components/CommonWebView";

export default class Home extends Component {
  constructor(props) {
    super(props);
    this._renderMap = this._renderMap.bind(this);
    this.state = {
      ListData: [
        {
          title: "平安保险第一个",
          context: "600万医疗报废，自费药，进口药，器材费",
          url: "http://m.people.cn/n4/2017/0907/c190-9825877.html?admincptm=1504789835057",
          imgurl: require("../../assets/circle/newspic.png")
        },
        {
          title: "平安保险第二个",
          context: "600万医疗报废，自费药，进口药，器材费",
          url: "https://mmbiz.qpic.cn/mmbiz_jpg/cdwcq52BJlibS0nnF7IFq72VPba2ZEEOPVbMX370LHt8gW5nEicvQ4zpyX626y4hYPdk7CUUrHwCOVc2nMicY0xcw/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1",
          imgurl: require("../../assets/circle/newspic.png")
        },
        {
          title: "平安保险第三个",
          context: "600万医疗报废，自费药，进口药，器材费",
          url: "http://m.people.cn/n4/2017/0907/c190-9825877.html?admincptm=1504789835057",
          imgurl: require("../../assets/circle/newspic.png")
        },
        {
          title: "平安保险第四个",
          context: "600万医疗报废，自费药，进口药，器材费",
          url: "https://www.baidu.com",
          imgurl: require("../../assets/circle/newspic.png")
        }
      ]
    };
  }
  componentDidMount() {
    console.log("thisprops", this.props);
  }
  _renderMap() {
    return this.state.ListData.map((item, index) => {
      return (
        <TouchableOpacity
          style={styles.itemContainer}
          key={index}
          onPress={() => {
            this._jumpToWebView(item);
          }}
        >
          <Image style={styles.itemImgWrapper} source={item.imgurl} />
          <View style={styles.itemRightWrapper}>
            <Text style={styles.itemTextTop}>{item.title}</Text>
            <Text style={styles.itemTextBottom}>{item.context}</Text>
          </View>
        </TouchableOpacity>
      );
    });
  }
  _jumpToWebView(item) {
    this.props.navigator.push({
      component: CommonWebView,
      passProps: {
        url: item.url
      }
    });
  }
  gotoAllProduct() {
    this.props.navigator.push({
      component: AllProduct,
      title: "全部产品"
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <Carousel />
        <TouchableOpacity
          style={styles.midContainer}
          onPress={() => {
            this.gotoAllProduct();
          }}
        >
          <Image
            source={require("../../assets/home/pic.png")}
            style={{ width: 72, height: 18 }}
          />
          <Text style={styles.midText}>平安保险2017版</Text>
          <Image source={require("../../assets/Mine/rightArrow_gray.png")} style={styles.midArrow}/>
        </TouchableOpacity>
        <View style={styles.textContainer}>
          <Text style={styles.minText}>保险头条</Text>
        </View>
        <ScrollView
          style={styles.listContainer}
          automaticallyAdjustContentInsets={false}
        >
          {this._renderMap()}
          <Text style={styles.scrollViewText}>没有更多了</Text>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 64,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#EFEFEF"
  },
  midContainer: {
    height: 45,
    // width: 200,
    // alignSelf: 'center',
    backgroundColor: "#fff",
    alignItems: "center",
    flexDirection: "row",
    paddingLeft: 13
  },
  midText: {
    fontSize: 15,
    paddingLeft: 9,
    // fontFamily: PingFang-SC-Medium,
    color: "#202020"
  },
  midArrow: {
    width: 14,
    height: 14,
    position: "absolute",
    right: 15,
  },
  textContainer: {
    backgroundColor: "#fff",
    marginTop: 10,
    height: 45,
    justifyContent: "center",
    paddingLeft: 13
    // fontSize: 15,
    // color: "#202020",
  },
  listContainer: {
    // height: 150
    flex: 1,
    // paddingBottom: 64,
    marginBottom: 49,
  },
  itemContainer: {
    height: 90,
    backgroundColor: "#fff",
    flexDirection: "row",
    alignItems: "center",
    borderTopWidth: 1,
    borderTopColor: "#EEEEEE",
    borderStyle: "solid",
    paddingLeft: 13,
    paddingRight: 13
  },
  itemImgWrapper: {
    width: 74,
    height: 66,
    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
  },
  scrollViewText: {
    color: "#7A7A7A",
    fontSize: 13,
    marginTop: 10,
    textAlign: "center",
    marginBottom: 10
  },
});