customer / shanghai-railway-rnapp

/**
 * Created by mac on 2017/5/14.
 */
import React, {Component} from "react";
import {DeviceEventEmitter, Image, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import {width} from "../../utils/getSize";
import {xnToast} from "../../utils/utils";
import AppService from "../../service/AppService";

import {observer} from "mobx-react/native";
import {observable} from "mobx";
import {loadData} from "../../utils/excer";

const zan_no = require("../../img/zan-02.png");
const zan_select = require("../../img/zan-01.png");

@observer
export default class CommentBlock extends Component {
  @observable
  isLike = false;
  @observable
  likeCount = 0;

  // 显示子评论
  renderLine = (count, v, i) => {
    if (i <= 4) {
      return (
        <View style={styles.line} key={i}>
          <Text style={styles.font12}>{v.userName?v.userName:"未知"}：</Text>
          <Text style={styles.font13}>{v.content}</Text>
        </View>
      )
    }
    else {
      if (this.state.commentVisible) {
        if (i+1 == count){
          return (
              <View>
                <View style={styles.line} key={i}>
                  <Text style={styles.font12}>{v.userName?v.userName:"未知"}：</Text>
                  <Text style={styles.font13}>{v.content}</Text>
                </View>
                <TouchableOpacity style={[styles.line, {marginBottom: 10}]}
                                  onPress={() => this.setState({commentVisible: false})} key={i+1}>
                  <Text style={styles.font12}>收起所有回复</Text>
                </TouchableOpacity>
              </View>
          )
        }else {
          return (
              <View style={styles.line} key={i}>
                <Text style={styles.font12}>{v.userName?v.userName:"未知"}：</Text>
                <Text style={styles.font13}>{v.content}</Text>
              </View>
          )
        }

      } else {
        if (i==5 && count > 5) {
          return (
            <TouchableOpacity style={[styles.line, {marginBottom: 10}]}
                              onPress={() => this.setState({commentVisible: true})} key={i}>
              <Text style={styles.font12}>查看所有{count}条评论</Text>
            </TouchableOpacity>
          )
        }
      }
    }
  };

  constructor(props) {
    super(props);
    this.state = {
      commentVisible: false
    }
  }

  // 点赞&取消点赞
  clickLike(commentId) {
    let that = this;
    if (that.isLike) {
      // 取消点赞cancelCommentRecordLike
      AppService.cancelCommentRecordLike({commentId:commentId}).then((data) => {
        if (data.message) {
          xnToast(data.message);
          return;
        }
        if (data.errors.length > 0) {
          xnToast(data.errors[0].message);
        } else {
          that.likeCount--;
          that.isLike = false;
          that.props.data.isLike = that.isLike;
          that.props.data.likeCount = that.likeCount;
          xnToast("取消点赞成功");
        }
      }).catch(error => {
        xnToast(error);
      });

      // let cancelRequest = new CommentRecordCancelLikeRequest();
      // cancelRequest.setCommentId(commentId);
      // post(cancelRequest).then(data => {
      //   if (!!data.errors === true && !!data.errors.length > 0) {
      //     Toast.show(data.errors[0].message);
      //   } else {
      //     that.likeCount--;
      //     that.isLike = false;
      //     that.props.data.isLike = that.isLike;
      //     that.props.data.likeCount = that.likeCount;
      //     Toast.show("取消点赞成功");
      //   }
      // })
    } else {
      // 点赞commentRecordLikeRequest
      AppService.commentRecordLikeRequest({commentId:commentId}).then((data) => {
        if (data.message) {
          xnToast(data.message);
          return;
        }
        if (data.errors.length > 0) {
          xnToast(data.errors[0].message);
        } else {
          that.likeCount++;
          that.isLike = true;
          that.props.data.isLike = that.isLike;
          that.props.data.likeCount = that.likeCount;
          xnToast("点赞成功");
        }
      }).catch(error => {
        xnToast(error);
      });

      // let likeRequest = new CommentRecordLikeRequest();
      // likeRequest.setCommentId(commentId);
      // post(likeRequest).then(data => {
      //   if (!!data.errors === true && !!data.errors.length > 0) {
      //     Toast.show(data.errors[0].message);
      //   } else {
      //     that.likeCount++;
      //     that.isLike = true;
      //     that.props.data.isLike = that.isLike;
      //     that.props.data.likeCount = that.likeCount;
      //     Toast.show("点赞成功");
      //   }
      // })
    }
  }

  // 回复评论
  reply(comment) {
    DeviceEventEmitter.emit('eventReplyComment', comment);
  }

  componentWillMount() {
    this.likeCount = this.props.data.likeCount;
    this.isLike = this.props.data.isLike;
  }

  render() {
    return (
      <View style={styles.commentBlock}>
        <View style={styles.leftBlock}>
          <View style={styles.avatar}>
            <Image
              source={{uri: this.props.data.userAvatar}}
              resizeMode="cover"
              style={styles.imgAvatar}
            />
          </View>
        </View>

        <TouchableOpacity style={styles.middleBlock} onPress={() => this.reply(this.props.data)}>
          <View>
            <View style={styles.titleBar}>
              <View style={styles.title}>
                {this.props.data.userName && <Text style={styles.font1}>{this.props.data.userName}</Text>}
                {!this.props.data.userName && <Text style={styles.font1}>用户已注销</Text>}
                <Text style={styles.font2}>({this.props.data.levelName})</Text>
              </View>

            </View>
            <Text style={styles.font5}>{this.props.data.content}</Text>
            <View style={styles.info}>
              <Text style={styles.font4}>{this.props.data.showTime}</Text>
              {this.props.data.childList && <View style={styles.tag}>
                <Text style={styles.font3}>{this.props.data.childList.length}回复</Text>
              </View>}
            </View>
            {this.props.data.childList && <View style={styles.message}>
              {
                this.props.data.childList.map((v, i) => this.renderLine(this.props.data.childList.length, v, i))
              }

            </View>}
          </View>
        </TouchableOpacity>

        <View style={styles.rightBarBlock}>
          <TouchableOpacity onPress={() => this.clickLike(this.props.data.id)}>
            <Image
                source={this.isLike ? zan_select : zan_no}
                resizeMode="contain"
                style={styles.zanIcon}
            />
          </TouchableOpacity>
          <Text style={styles.fontR1} includeFontPadding={false}>{String(this.likeCount)}</Text>
        </View>

      </View>
    )
  }
}
const styles = StyleSheet.create({
  commentBlock: {
    width: width - 30,
    backgroundColor: 'white',
    paddingTop: 15,
    flexDirection: 'row',
    borderTopWidth: 0,
    borderBottomWidth: 1,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderColor: '#dddddd'
  },
  leftBlock: {
    marginRight: 10
  },
  avatar: {
    width: 36,
    height: 36,
    borderRadius: 18,
  },
  imgAvatar: {
    width: 34,
    height: 34,
    borderRadius: 17.5
  },
  middleBlock: {
    flex: 1,
    marginBottom: 10
  },
  title: {
    height: 20,
    flexDirection: 'row',
    alignItems: 'flex-end'
  },
  font1: {
    fontSize: 14,
    color: "#007aff",
    marginRight: 10
  },
  font2: {
    fontSize: 10,
    color: "#333"
  },
  info: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  tag: {
    width: 60,
    height: 25,
    backgroundColor: 'rgb(241,245,245)',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 12
  },
  font3: {
    fontSize: 12,
    color: "#333"
  },
  font4: {
    fontSize: 10,
    color: '#999999',
    marginRight: 10
  },
  font5: {
    marginTop: 10,
    marginBottom: 10
  },
  rightBlock: {
    width: 120,
    paddingRight: 20,
    flexDirection: "row",
    justifyContent: "center"
  },
  zanIcon: {
    width: 12,
    height: 12,
    marginRight: 5,

  },
  fontR1: {
    fontSize: 16,
    color: "#999999"
  },
  titleBar: {
    flexDirection: 'row',
    justifyContent: 'space-between',

  },
  rightBarBlock: {
    flexDirection: 'row',
    alignItems: 'center',

  },
  message: {
    backgroundColor: "rgb(241,245,245)",
    marginTop: 10,
    paddingLeft: 10,
  },
  line: {
    flexDirection: 'row',
    marginTop: 10,
    alignItems: 'center'
  },
  font12: {
    color: "#007aff",
    fontSize: 14,

  },
  font13: {}
});