import React, { Component } from 'react';
import { Checkbox, Tooltip } from 'antd';
import styles from '../../index.less';

class ShowTableCellComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value || false,
      dataIndex: this.props.dataIndex || '',
      content: '',
      width: props.width,
    };
  }

  componentWillMount() {
    const { dataIndex, value, width } = this.state;
    const firstDataIndex = dataIndex.substring(0, 1);
    let content = <Tooltip title={value} mouseLeaveDelay={0} placement="topLeft"><span style={{ width: width - 5 }}>{value}</span></Tooltip>;
    if (firstDataIndex === 'b') {
      content = <Checkbox checked={value} />;
    }
    this.setState({ content });
  }

  render() {
    const { content } = this.state;
    return (
      <div className={styles.editSpan}>{content}</div>
    );
  }
}

export default ShowTableCellComponent;