import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ScrollView,
  FlatList,
  Dimensions
} 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: "重疾、大病和防癌险，傻傻分不清？",
          key: 1,
          context: "重疾险、大病保险和防癌险，这几大险种你能分得清吗？",
          // context: "重疾险、大病保险和防癌险，这几大险...",
          url: "http://mp.weixin.qq.com/s/vSz_WuGpPYNMNpGQv-zxAQ",
          imgurl: require("../../assets/home/Headlines_重疾险.png")
        },
        {
          title: "想为家里老人买份保险，怎么选？",
          key: 2,
          context: "在如今的商业保险中，老年人的保险成为了很多人比较纠结的问题。",
          // context: "在如今的商业保险中，老年人的保险成...",
          url: "http://mp.weixin.qq.com/s/R_KuAzEVQCVKj7FUOzuHJw",
          imgurl: require("../../assets/home/Headlines_中老年医疗险.png")
        },
        {
          title: "驾车远行需要做哪些保险准备？",
          key: 3,
          context: "出行前我们需要做哪些准备工作，才能避免发生事故后的束手无策？",
          // context: "出行前我们需要做哪些准备工作，才能...",
          url: "http://mp.weixin.qq.com/s/Tkm4TrBEXqXJzC4FQdW2MQ",
          imgurl: require("../../assets/home/Headlines_出驾远行.png")
        },
        {
          title: "选购儿童险，这几大原则也应注意！",
          key: 4,
          context: "认真对待关于孩子的保险问题，还需要注意投保时候的一些原则。",
          // context: "认真对待关于孩子的保险问题，还需...",
          url: "http://mp.weixin.qq.com/s/iUEiBMik_3WMuxnAPFDXXQ",
          imgurl: require("../../assets/home/Headlines_儿童险.png")
        },
        {
          title: "重疾险这几个关键问题也需了解！",
          key: 5,
          context: "作为咨询热度较高的险种，很多人对重疾险有着不同的疑问。",
          // 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/"
        }
      ],
      swiperShow:false,
    };
  }
  componentDidMount() {
    console.log("thisprops", this.props);
    setTimeout(()=>{
        this.setState({
            swiperShow:true
        });
    },0)
  }
  _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 })}
        >
          <View style={styles.itemImgWrapper}>
            <Image source={item.imgurl} style={{ width: 74, height: 74 }} />
          </View>
          <View style={styles.itemRightWrapper}>
            <Text style={styles.itemTextTop} numberOfLines={1}>
              {item.title}
            </Text>
            <Text style={styles.itemTextBottom} numberOfLines={1}>
              {item.context}
            </Text>
          </View>
        </TouchableOpacity>
      );
    });
  }
  _swiper() {
    const { navigate } = this.props.navigation;
    const {height, width} = Dimensions.get('window');
    const imgHeight = width * 140 / 375;
    if(this.state.swiperShow){
      return (
        <View style={{ height: imgHeight }}>
          <Swiper
            style={styles.swiperWrapper}
            autoplay={true}
            autoplayTimeout={6}
            height={imgHeight}
            dotStyle={{
              width: 6,
              height: 6,
            }}
            activeDotStyle={{
              width: 6,
              height: 6
            }}
          >
            {this.state.swiperImgList.map((item, index) => {
              {
                /* console.log("图片item",item.img); */
              }
              return (
                <TouchableOpacity style={styles.slide} key={index}>
                  <Image
                    style={styles.slideImg}
                    source={item.img}
                    width={Dimensions.get('window').width}
                    resizeMode="stretch"
                  />
                </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.state.ListData.map((item, index) => {
            return (
              <TouchableOpacity
                style={styles.itemContainer}
                key={index}
                onPress={() => navigate("CommonWebView", { item: item })}
              >
                <View style={styles.itemImgWrapper}>
                  <Image
                    source={item.imgurl}
                    style={{ width: 74, height: 74 }}
                  />
                </View>
                <View style={styles.itemRightWrapper}>
                    <Text style={styles.itemTextTop} numberOfLines={1}>
                      {item.title}
                    </Text>
                    <Text style={styles.itemTextBottom} numberOfLines={1}>
                      {item.context}
                    </Text>
                </View>
              </TouchableOpacity>
            );
          })}
          <Text style={styles.scrollViewText}>没有更多了</Text>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#EFEFEF"
  },
  swiperWrapper: {},
  slide: {
    height: Dimensions.get('window').width*140/375,
    width: Dimensions.get('window').width,
    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,
    marginRight: 12
  },
  itemRightWrapper: {
    // flex: 1,
    width: Dimensions.get("window").width - 74 - 26,
    justifyContent: "center"
    // paddingRight: 50
  },
  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
  }
});