import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ScrollView,
  ListView,
  Dimensions
} from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";
import post from "../../utils/fetch";

export default class Import extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentWillMount() {}

  componentDidMount() {
    console.log("导入客户", this.props.navigation.state.params);
  }

  getListData() {
    post("/test/insurance/article", {}, res => {}, err => {});
  }

  render() {
    const { navigate } = this.props.navigation;
    const customersList = this.props.navigation.state.params.customersList;
    return (
      <View style={styles.container}>
        {/* <Text>导入客户</Text> */}
        <ScrollView style={styles.mainSvcContainer}>
          {customersList.map((item, index) => {
            return (
              <TouchableOpacity key={index} style={styles.CustomerItemContaier}>
                <View style={styles.itemSelectIconContainer}>
                  <Image style={styles.itemSelectIcon} source={require("../../assets/customer/ic1_n.png")} />
                </View>
                <Text style={styles.CustomerItemText}>{item.name}</Text>
              </TouchableOpacity>
            );
          })}
        </ScrollView>
        <View style={styles.selectBtnContaier}>
          <View style={styles.selectBtnContaierLeft}>
            <TouchableOpacity style={styles.selectAllContainer}>
              <View style={styles.selectAllIcon} />
              <Text style={styles.selectAllText}>全选</Text>
            </TouchableOpacity>
            <View style={styles.selectedTextContaier}>
              <Text>已选中</Text>
              <Text>0</Text>
              <Text>项</Text>
            </View>
          </View>
          <TouchableOpacity style={styles.importBtnContaier}>
            <Text style={styles.importBtnText}>导入</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "white"
  },
  mainSvcContainer: {
    marginBottom: 50,
    flex: 1
  },
  CustomerItemContaier: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
    backgroundColor: "white",
    paddingVertical: 12,
    marginLeft: 16,
    marginRight: 10,
    borderStyle: "solid",
    borderColor: "#F2F2F2",
    borderBottomWidth: 1
  },
  itemSelectIconContainer: {
    justifyContent: "center",
    alignItems: "center",
    marginRight: 10,
  },
  itemSelectIcon: {
    width: 15,
    height: 15,
  },
  CustomerItemText: {
    fontSize: 16,
    color: "#202020"
  },
  selectBtnContaier: {
    position: "absolute",
    bottom: 0,
    backgroundColor: "white",
    height: 49,
    width: Dimensions.get("window").width,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    flex: 1,
    borderColor: "#E4E4E4",
    borderStyle: "solid",
    borderTopWidth: 1
  },
  selectBtnContaierLeft: {
    flexDirection: "row",
  },
  selectAllContainer: {
    marginLeft: 20,
  },
  selectAllText: {},
  selectedTextContaier: {
    flexDirection: "row",
    marginLeft: 20,
  },
  importBtnContaier: {
    width: 100,
    height: 49,
    backgroundColor: "#1B9341",
    justifyContent: "center",
    alignItems: "center",
  },
  importBtnText: {
    color: "white",
    fontSize: 16,
  }
});