import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ScrollView,
  FlatList,
  ListView,
  Dimensions
} from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";
import Swiper from "react-native-swiper";

export default class Home extends Component {
  constructor(props) {
    super(props);
    this._swiper = this._swiper.bind(this);
    this.state = {
      ListData: [],
      swiperImgList: [
        {
          img: require("../../assets/home/slider_2.jpeg")
        },
        {
          img: require("../../assets/home/slider_3.jpeg")
        }
      ]
    };
  }
  componentWillMount() {
    this.getListData();
  }

  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);
        }
      });
  }

  getBannar() {
    let that = this;
    return fetch(`https://devpay.brae.co/test/insurance/banner`, {
      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({
            swiperImgList: respJson.data.banner
          });
          console.log("bannar图", respJson.data.banner);
        }
      });
  }

  _swiper() {
    const { navigate } = this.props.navigation;
    const { height, width } = Dimensions.get("window");
    const imgHeight = width * 140 / 375;
    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) => {
            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);
    // console.log("render首页文章列表", this.state.ListData);
    const { navigate } = this.props.navigation;
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    const dataSource = ds.cloneWithRows(this.state.ListData);
    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.AIAndHealthContainer}>
          <TouchableOpacity style={styles.AHContainer}>
            <Image style={styles.AHIcon} />
            <Text style={styles.AHText}>智能方案</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.AHContainer}>
            <Image style={styles.AHIcon} />
            <Text style={styles.AHText}>健康问卷</Text>
          </TouchableOpacity>
        </View>

        <View style={styles.textContainer}>
          <Text style={styles.minText}>保险头条</Text>
        </View>

        {/* 保险头条列表 */}
        <ListView
          dataSource={dataSource}
          enableEmptySections={true}
          renderRow={(item, index) => {
            return (
              <TouchableOpacity
                style={styles.itemContainer}
                onPress={() =>
                  navigate("ArticleTemplate", { item: item, model: "topic" })}
              >
                <View style={styles.itemImgWrapper}>
                  <Image
                    source={{ uri: item.image }}
                    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.summary}
                  </Text>
                </View>
              </TouchableOpacity>
            );
          }}
        />
      </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
  },
  AIAndHealthContainer: {
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    marginTop: 10,
    // marginBottom: 10,
    backgroundColor: "white",
  },
  AHContainer: {},
  AHIcon: {},
  AHText: {},
  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
  }
});