import React, { Component } from 'react';
import './index.less';
import Icon from '../Icon';

export default class OtherAnswer extends Component {
  constructor(props) {
    super(props);
    this.Text = null;
    this.state = { show: false, more: false };
    this.checkHeight();
  }

  checkHeight() {
    if (this.Text != null) {
      if (this.Text.offsetHeight > 80) {
        this.setState({ more: true });
      }
    } else {
      setTimeout(() => {
        this.checkHeight();
      }, 1);
    }
  }

  render() {
    const { data } = this.props;
    const { show, more } = this.state;
    return (
      <div className={`other-answer ${more ? 'more' : ''} ${!show ? 'hide' : ''}`}>
        <div className="small-tag">提问</div>
        <div className="title">{data.content}</div>
        <div className="small-tag">回答</div>
        <div
          ref={ref => {
            this.Text = ref;
          }}
          className="desc"
          dangerouslySetInnerHTML={{ __html: data.answer }}
        />
        {more && show && <Icon name="up" onClick={() => this.setState({ show: false })} />}
        {more && !show && <Icon name="down" onClick={() => this.setState({ show: true })} />}
      </div>
    );
  }
}