import React, { Component } from "react";
import {
  StyleSheet,
  WebView,
  View,
  Image,
  Dimensions,
  ScrollView,
  Text,
  TouchableOpacity,
} from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";

export default class ProductTemplate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [
        {
          headerImage: require("../assets/home/product_header_1.jpg"),
          title: "平安e生保2017版-100万（有社保含新农合）",
          subscribe: "200万医疗险/续保至99岁免审核",
          price: "￥174.00",
          detailImage: "",
        },
        {
          headerImage: require("../assets/home/product_header_2.jpg"),
          title: "泰康在线“住院宝”必备版（0-49周岁）",
          subscribe: "承保疾病，意外伤害，性价比高，住院有补贴，30-49岁一家三口可买",
          price: "￥249.00",
          detailImage: "",
        }
      ]
    };
  }
  render() {
    console.log("Image  index", this.props.navigation.state.params.index);
    const index = this.props.navigation.state.params.index;
    const item = this.state.products[index];
    return (
      <View style={styles.container}>
        <ScrollView style={styles.scrollViewContainer}>
          <View style={styles.headerContainer}>
            {/* 顶部图片 */}
            <Image
              style={styles.headerImage}
              resizeMode="contain"
              source={item.headerImage}
            />
            {/* 标题 */}
            <View style={styles.titleContainer}>
              <Text style={styles.title}>{item.title}</Text>
              <Text style={styles.subscribe}>{item.subscribe}</Text>
            </View>
          </View>
          {/* 产品特色 */}
          <View style={styles.midContaier}>
            <Image source={require("../assets/home/ic_feature.png")} style={{width: 16, height: 17,}} />
            <Text style={styles.midText}>产品特色</Text>
          </View>
          {/* 图片详情 */}
          {index == 0 ? (
            <Image
              style={styles.imgOne}
              resizeMode="contain"
              source={require("../assets/home/product_long_1.jpg")}
            />
          ) : (
          <Image
            style={styles.imgTwo}
            resizeMode="contain"
            source={require("../assets/home/product_long_2.jpg")}
          />
          )}
        </ScrollView>
        {/* 悬浮按钮 */}
        <View style={styles.footer}>
          <View style={styles.footerLeft}>
            <Text style={styles.price}>{item.price}</Text>
          </View>
          <TouchableOpacity style={styles.footerRight}>
            <Text style={styles.button}>立即投保</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    backgroundColor: "#EFEFEF"
  },
  scrollViewContainer: {},
  headerContainer: {},
  headerImage: {
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").width * 300 / 750
  },
  titleContainer: {
    backgroundColor: "white",
    paddingLeft: 15,
    paddingRight: 15,
    paddingTop: 10,
    paddingBottom: 10,
  },
  title: {
    fontSize: 16,
    color: "#242424",
    lineHeight: 22
  },
  subscribe: {
    fontSize: 13,
    color: "#7A7A7A",
    lineHeight: 15
  },
  midContaier: {
    marginTop: 10,
    height: 45,
    backgroundColor: "white",
    flexDirection: "row",
    paddingLeft: 13,
    alignItems: "center",
    marginBottom: 1,
  },
  midText: {
    marginLeft: 10,
    fontSize: 15,
    color: "#242424",
  },
  imgOne: {
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").width * 3118 / 640
  },
  imgTwo: {
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").width * 1651 / 690
  },
  footer: {
    position: "absolute",
    bottom: 0,
    backgroundColor: "white",
    height: 49,
    width: Dimensions.get("window").width,
    flexDirection: "row",
    flex: 1,
    borderColor: "#E4E4E4",
    borderStyle: "solid",
    borderTopWidth: 1,
  },
  footerLeft: {
    flex: 1,
    justifyContent: "center",
    alignItems: "flex-start",
    paddingLeft: 15,
  },
  price: {
    color: "#1B9341",
    fontSize: 18,
  },
  footerRight: {
    backgroundColor: "#1B9341",
    width: 144,
    justifyContent: "center",
    alignItems: "center",
  },
  button: {
    color: "white",
    fontSize: 16,
  },
});