import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  Image,
  TextInput,
  KeyboardAvoidingView
} from "react-native";
import WebView from "../../Components/CommonWebView";

export default class Details extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.navigation.state.params.item,
      // 留言
      text: "",
      comments: []
    };
  }
  componentWillMount() {
    console.log("详情页", this);
    this.getComments();
  }
  componentDidMount() {
    // this.getComments();
  }

  render() {
    const { data, comments } = this.state;
    return (
      <View style={styles.container}>
        <KeyboardAvoidingView behavior="padding" style={styles.KAVContainer}>
          <ScrollView
            style={styles.scrollViewContainer}
            automaticallyAdjustContentInsets={false}
          >
            {/* 标题 */}
            <Text style={styles.titleText} numberOfLines={3}>
              {data.title}
            </Text>

            {/* 个人信息 */}
            <View style={styles.personContainer}>
              <Image
                style={styles.personImg}
                source={require("../../assets/Mine/iconpic1.png")}
              />
              <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}>
                  {/* ( {comments.length} ) */}
                </Text>
              </View>
              {this.state.comments.map((item, index) => {
                return (
                  <View style={styles.itemContainer} key={index}>
                    <Image
                      style={styles.itemIcon}
                      source={require("../../assets/Mine/iconpic1.png")}
                    />
                    <View style={styles.itemRightContainer}>
                      <View style={styles.itemRightTop}>
                        <View style={styles.itemRightTopLeft}>
                          <Text style={styles.itemReplyer}>{item.user}</Text>
                        </View>
                        <Text style={styles.itemTime}>{item.time}</Text>
                      </View>
                      <Text style={styles.itemRightBottom}>{item.content}</Text>
                    </View>
                  </View>
                );
              })}
            </View>
          </ScrollView>
          {/* 回复框 */}
          <View style={styles.sendMsgContaier}>
            <TextInput
              style={styles.msgInput}
              placeholder="留言"
              onChangeText={text => this.setState({ text })}
              value={this.state.text}
              autoCapitalize="none"
              selectionColor="#1B9341"
              clearTextOnFocus={true}
              numberOfLines={1}
              clearButtonMode="always"
              keyboardType="default"
              enablesReturnKeyAutomatically={true}
              returnKeyType="send"
            />
            <TouchableOpacity
              style={styles.sendButtonContaier}
              onPress={() => this.sendMsg()}
            >
              <Text style={styles.sendButton}>发送</Text>
            </TouchableOpacity>
          </View>
        </KeyboardAvoidingView>
      </View>
    );
  }

  getComments() {
    let that = this,
      articleID = this.state.data.id,
      formData = new FormData();
    formData.append("article", articleID);
    return fetch(`https://devpay.brae.co/test/insurance/comment/get`, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: formData
    })
      .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({
            comments: respJson.data.comment
          });
          console.log("comments", respJson.data.comment);
        }
      })
      .catch(err => console.error(err));
  }

  sendMsg() {
    var that = this,
        formData = new FormData();
    // 请求文章数据
    return fetch(`https://devpay.brae.co/test/insurance/comment/add`, {
      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({
            ListData: respJson.data.data
          });
          console.log("state.ListData", this.state.ListData);
        }
      })
      .catch(err => console.error(err));
    this.setState({
      text: ""
    });
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "white"
  },
  KAVContainer: {
    flex: 1,
    justifyContent: "center"
    // paddingHorizontal: 20,
    // paddingTop: 20,
  },
  scrollViewContainer: {
    flex: 1
  },
  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",
    height: 52,
    paddingLeft: 15,
    paddingRight: 15,
    borderStyle: "solid",
    borderColor: "#E8E8E8",
    borderTopWidth: 1,
    backgroundColor: "#E6E6E6"
  },
  msgInput: {
    flex: 1,
    fontSize: 15,
    borderWidth: 1,
    borderColor: "#DCDCDC",
    borderRadius: 4,
    paddingTop: 8,
    paddingBottom: 7,
    paddingLeft: 13,
    backgroundColor: "white"
  },
  sendButtonContaier: {
    // flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  sendButton: {
    fontSize: 15,
    marginLeft: 15,
    color: "#1B9341",
    borderColor: "#E6E6E6",
    borderStyle: "solid",
    borderLeftWidth: 0.5
  }
});