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

export default class Home extends Component {
  // static navigationOptions = {
  //   title: "首页"
  // };
  constructor(props) {
    super(props);
    this._renderMap = this._renderMap.bind(this);
    this._swiper = this._swiper.bind(this);
    this.state = {
      ListData: [
        {
          title: "重疾、大病和防癌险，傻傻分不清？",
          context: "重疾险、大病保险和防癌险，这几大险种你能分得清吗？",
          url:
            "http://mp.weixin.qq.com/s/vSz_WuGpPYNMNpGQv-zxAQ",
          imgurl: require("../../assets/home/Headlines_重疾险.png")
        },
        {
          title: "想为家里老人买份保险，怎么选？",
          context: "在如今的商业保险中，老年人的保险成为了很多人比较纠结的问题。",
          url:
            "http://mp.weixin.qq.com/s/R_KuAzEVQCVKj7FUOzuHJw",
          imgurl: require("../../assets/home/Headlines_中老年医疗险.png")
        },
        {
          title: "驾车远行需要做哪些保险准备？",
          context: "出行前我们需要做哪些准备工作，才能避免发生事故后的束手无策？",
          url:
            "http://mp.weixin.qq.com/s/Tkm4TrBEXqXJzC4FQdW2MQ",
          imgurl: require("../../assets/home/Headlines_出驾远行.png")
        },
        {
          title: "选购儿童险，这几大原则也应注意！",
          context: "认真对待关于孩子的保险问题，还需要注意投保时候的一些原则。",
          url: "http://mp.weixin.qq.com/s/iUEiBMik_3WMuxnAPFDXXQ",
          imgurl: require("../../assets/home/Headlines_儿童险.png")
        },
        {
          title: "关于重疾险，这几个关键问题也需了解！",
          context: "作为咨询热度较高的险种，很多人对重疾险有着不同的疑问。",
          url: "http://mp.weixin.qq.com/s/VP-0BcBTvipbuq9bgOZ0NQ",
          imgurl: require("../../assets/home/Headlines_意外险.png")
        }
      ],
      swiperImgList: [
        {
          img: require("../../assets/home/slider_1.jpeg"),
          // url: "https://www.baidu.com/"
        },
        {
          img: require("../../assets/home/slider_2.jpeg"),
          // url: "https://www.baidu.com/"
        },
        {
          img: require("../../assets/home/slider_3.jpeg"),
          // url: "https://www.baidu.com/"
        },
      ]
    };
  }
  componentDidMount() {
    console.log("thisprops", this.props);
  }
  _renderMap() {
    const { navigate } = this.props.navigation;
    return this.state.ListData.map((item, index) => {
      return (
        <TouchableOpacity
          style={styles.itemContainer}
          key={index}
          onPress={() => navigate("CommonWebView", { item: 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>
      );
    });
  }
  _swiper() {
    const { navigate } = this.props.navigation;
    return (
      <View style={{ height: 120 }}>
        <Swiper
          style={styles.swiperWrapper}
          autoplay={true}
          autoplayTimeout={6}
          height={120}
          dotStyle={{
            width: 6,
            height: 6
          }}
          activeDotStyle={{
            width: 6,
            height: 6
          }}
        >
          {this.state.swiperImgList.map((item, index) => {
            {
              /* console.log("图片item",item); */
            }
            return (
              <TouchableOpacity
                style={styles.slide}
                key={index}
              >
                <Image
                  style={styles.slideImg}
                  source={item.img}
                  resizeMode="contain"
                />
              </TouchableOpacity>
            );
          })}
        </Swiper>
      </View>
    );
  }
  render() {
    console.log("首页的this.props", this);
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        {this._swiper()}
        <TouchableOpacity
          style={styles.midContainer}
          onPress={() => 
            navigate("AllProduct")
          }
        >
          <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"
  },
  swiperWrapper: {},
  slide: {
    height: 140,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#92BBD9"
  },
  slideImg: {
    flex: 1,
    height: 140
  },
  midContainer: {
    height: 45,
    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: {
    flex: 1
  },
  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
  },
  itemTextTop: {
    fontSize: 16,
    color: "#202020",
    lineHeight: 21
  },
  itemTextBottom: {
    marginTop: 7,
    fontSize: 13,
    color: "#7A7A7A",
    lineHeight: 18
  },
  scrollViewText: {
    color: "#7A7A7A",
    fontSize: 13,
    marginTop: 10,
    textAlign: "center",
    marginBottom: 10
  }
});