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

export default class ProductTemplate extends Component {
  static navigationOptions = {
    title: "产品详情"
  };
  constructor(props) {
    super(props);
    this.state = {
      id: this.props.navigation.state.params.id,
      productDetais: {}
    };
  }
  componentWillMount() {
    this.getDetails();
  }
  getDetails() {
    const id = this.state.id;
    const that = this;
    return fetch(`https://devpay.brae.co/test/insurance/product/${id}`, {
      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({
            productDetais: respJson.data.product
          });
          console.log("产品详情", respJson.data.product);
        }
      });
  }
  render() {
    const index = this.props.navigation.state.params.index;
    const item = this.state.productDetais;
    return (
      <View style={styles.container}>
        <ScrollView style={styles.scrollViewContainer}>
          <View style={styles.headerContainer}>
            {/* 顶部图片 */}
            <Image
              style={styles.headerImage}
              resizeMode="contain"
              source={{ uri: 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}
            onPress={() => {
              Alert.alert("您好，网站正在备案中，暂时无法投保。")
            }}
          >
            <Text style={styles.button}>立即投保</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    backgroundColor: "#EFEFEF"
  },
  scrollViewContainer: {
    marginBottom: 49,
  },
  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
  }
});