import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
} from 'react-native';



export default class Mine extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.header}>
          <View style={styles.headerLeft}>
            <Image source={require("../../assets/Mine/iconpic1.png")} style={styles.mineIcon} />
            <Text style={styles.mineName}>汉克斯</Text>
          </View>
          <Image source={require("../../assets/Mine/rightArrow_white.png")} style={styles.headerRight}/>
        </TouchableOpacity>
        <BarList style={styles.midContainer} />
        <TouchableOpacity style={styles.loginOut}>
          <Text style={styles.loginOutText}>退出登录</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

class BarList extends Component {
  render() {
    return (
      <View>
        <ListItem title={"消息通知"} num={"11"} />
        <ListItem title={"我的提问"} />
      </View>
    )
  }
}

class ListItem extends Component {
  render() {
    return (
      <TouchableOpacity style={styles.itemContainer}>
        <View style={styles.itemLeft}>
          <Image style={styles.leftIcon} source={require("../../assets/tabbar/ic_circle_s.png")} />
          {/* <Image style={styles.leftIcon} source={require("../../assets/Mine/iconpic1.png")} /> */}
          <Text style={styles.leftTitle}>{this.props.title}</Text>
          {this.props.num?<Text style={styles.leftNum}> ({this.props.num})</Text>:null}
        </View>
        <Image style={styles.itemRight} source={require("../../assets/Mine/rightArrow_gray.png")} />
      </TouchableOpacity>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#EFEFEF",
    paddingTop: 64,
  },
  header: {
    backgroundColor: "#1B9341",
    height: 78,
    flexDirection: "row",
    justifyContent: "space-between",
    paddingLeft: 13,
    paddingRight: 13,
    alignItems: "center",
    marginBottom: 10,
  },
  headerLeft: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
  },
  mineIcon: {
    width: 46,
    height: 46,
    marginRight: 14
  },
  mineName: {
    fontSize: 16,
    lineHeight: 22,
    color: "#fff"
  },
  headerRight: {
    width: 14,
    height: 14,
  },
  midContainer: {
    // marginTop: 10,
    // marginBottom: 10,
    // height: 92,
  },
  itemContainer: {
    height: 46,
    paddingLeft: 16,
    paddingRight: 16,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: "#fff",
    borderStyle: "solid",
    borderColor: "#F0F0F0",
    borderBottomWidth: 1,
  },
  itemLeft: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
  },
  leftIcon: {
    marginRight: 11,
    width: 16,
    height: 16,
  },
  leftTitle: {
    fontSize: 15,
    color: "#242424"
  },
  leftNum: {
    fontSize: 15,
    color: "#EE6723"
  },
  itemRight: {
    width: 14,
    height: 14,
  },
  loginOut: {
    marginTop: 10,
    height: 46,
    backgroundColor: "#fff",
    justifyContent: "center",
  },
  loginOutText: {
    textAlign: "center",
    fontSize: 15,
  },
});