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

export default class Details extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data,
      text: ""
    };
  }
  componentWillMount() {
    console.log("详情页", this);
  }

  render() {
    const { data } = this.state;
    return (
      <View style={styles.container}>
        <ScrollView
          style={styles.scrollViewContainer}
          automaticallyAdjustContentInsets={false}
        >
          <Text style={styles.titleText} numberOfLines={3}>
            {data.title}
          </Text>
          {/* 个人信息 */}
          <View style={styles.personContainer}>
            <Image style={styles.personImg} source={data.image} />
            <View style={styles.personRightContainer}>
              <View style={styles.personRTContainer}>
                <Text style={styles.personRTName}>{data.name}</Text>
                <Text style={styles.personRTIdentity}>{data.identity}</Text>
              </View>
              <Text style={styles.personRB}>{data.time}</Text>
            </View>
          </View>
          {/* 正文 */}
          <Text style={styles.content}>{data.content}</Text>
          <Text style={styles.copyright}>本文版权归 {data.name} 所有</Text>
          {/* 评论 */}
          <View style={styles.commentsContainer}>
            <View style={styles.commentsHeader}>
              <Text style={styles.commentsHeaderL}>评论</Text>
              <Text style={styles.commentsHeaderR}>
                ( {data.comments.length} )
              </Text>
            </View>
            {data.comments.map((item, index) => {
              return (
                <View style={styles.itemContainer} key={index}>
                  <Image style={styles.itemIcon} source={item.replayicon} />
                  <View style={styles.itemRightContainer}>
                    <View style={styles.itemRightTop}>
                      <View style={styles.itemRightTopLeft}>
                        <Text style={styles.itemReplyer}>{item.replyer}</Text>
                        <Text style={styles.itemWord}>回复</Text>
                        <Text style={styles.itemBeenreplyer}>
                          {item.beenreplyer}
                        </Text>
                        <Text style={styles.itemTime}>{item.time}</Text>
                      </View>
                      <Image
                        style={styles.itemRightTopRight}
                        source={require("../../assets/tabbar/ic_circle_n.png")}
                      />
                    </View>
                    <Text style={styles.itemRightBottom}>{item.content}</Text>
                  </View>
                </View>
              );
            })}
          </View>
          {/* 回复框 */}
          <View style={styles.sendMsgContaier}>
            <TextInput
              style={styles.msgInput}
              placeholder="回复 汉克斯"
              onChangeText={text => this.setState({ text })}
              value={this.state.text}
              selectionColor="#1B9341"
              clearTextOnFocus={true}
              numberOfLines={1}
              clearButtonMode="always"
              keyboardType="default"
            />
            <TouchableOpacity onPress={() => this.sendMsg()}>
              <Text style={styles.sendButton}>发送</Text>
            </TouchableOpacity>
          </View>
        </ScrollView>
      </View>
    );
  }

  sendMsg() {
    var that = this;
    this.setState({
      text: "",
      // data: that.state.data.comments.push(
      //   {
      //     replyer: "噢噢噢",
      //     replayicon: require("../../assets/Mine/iconpic1.png"),
      //     beenreplyer: "嘿嘿嘿",
      //     content: this.state.text,
      //     time: "刚刚",
      //   }
      // )
    });
  }
}

  

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "white",
    paddingTop: 64
  },
  scrollViewContainer: {
    // height: 300,
    marginBottom: 64,
  },
  titleText: {
    marginTop: 21,
    marginLeft: 20,
    marginRight: 20,
    fontSize: 24,
    lineHeight: 30
  },
  personContainer: {
    marginTop: 16,
    marginLeft: 20,
    marginRight: 20,
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center"
  },
  personImg: {
    width: 42,
    height: 42
  },
  personRightContainer: {
    marginLeft: 10
  },
  personRTContainer: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center"
  },
  personRTName: {
    fontSize: 16,
    color: "#242424"
  },
  personRTIdentity: {
    fontSize: 14,
    color: "#3F3F3F",
    marginLeft: 5
  },
  personRB: {
    fontSize: 13,
    color: "#999999"
  },
  content: {
    marginLeft: 25,
    marginRight: 25,
    marginTop: 35,
    marginBottom: 25,
    fontSize: 15,
    lineHeight: 22,
    color: "#555555"
  },
  copyright: {
    textAlign: "center",
    fontSize: 12,
    color: "#999999",
    marginBottom: 20
  },
  commentsContainer: {
    borderTopWidth: 10,
    borderColor: "#EFEFEF",
    borderStyle: "solid",
    paddingLeft: 13,
    paddingRight: 13
  },
  commentsHeader: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
    height: 45,
    marginBottom: 16
  },
  commentsHeaderL: {
    fontSize: 15,
    color: "#242424",
    marginRight: 5
  },
  commentsHeaderR: {
    fontSize: 15,
    color: "#242424"
  },
  itemContainer: {
    // paddingTop: 16,
    paddingBottom: 16,
    flexDirection: "row",
    justifyContent: "flex-start"
  },
  itemIcon: {
    width: 32,
    height: 32
  },
  itemRightContainer: {
    flex: 1,
    marginLeft: 10,
    paddingBottom: 16,
    borderStyle: "solid",
    borderBottomWidth: 1,
    borderColor: "#F3F3F3"
  },
  itemRightTop: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 7
  },
  itemRightTopLeft: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center"
  },
  itemReplyer: {
    fontSize: 16,
    color: "#1B9341"
  },
  itemWord: {
    fontSize: 16
  },
  itemBeenreplyer: {
    fontSize: 16,
    color: "#1B9341"
  },
  itemTime: {
    marginLeft: 6,
    fontSize: 13,
    color: "#999999"
  },
  itemRightTopRight: {
    width: 15,
    height: 15
  },
  itemRightBottom: {
    fontSize: 15,
    lineHeight: 21,
    color: "#242424"
  },
  sendMsgContaier: {
    flexDirection: "row",
    // justifyContent: "center",
    alignItems: "center",
    paddingLeft: 15,
    paddingRight: 15,
    // height: 48
    // position: "absolute",
    // bottom: 60,
    // right: 0,
    // backgroundColor: "white",
  },
  msgInput: {
    flex: 7,
    fontSize: 15
    // color: "#999999",
  },
  sendButton: {
    flex: 3,
    fontSize: 15,
    color: "#1B9341",
    borderColor: "#E6E6E6",
    
  }
});