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: "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")
        }
      ],
      swiperImgList: [
        {
          img: require("../../assets/WechatIMG10.png"),
          url: "https://www.baidu.com/"
        },
        {
          img: require("../../assets/WechatIMG10.png"),
          url: "https://www.baidu.com/"
        },
        {
          img: require("../../assets/WechatIMG10.png"),
          url: "https://www.baidu.com/"
        },
        {
          img: require("../../assets/WechatIMG10.png"),
          url: "https://www.baidu.com/"
        },
        {
          img: require("../../assets/WechatIMG10.png"),
          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}
                onPress={() => navigate("CommonWebView", { item: item })}
              >
                <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: 120,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#92BBD9"
  },
  slideImg: {
    flex: 1,
    height: 120
  },
  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
    // 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
  }
});