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

export default class AnswerTable extends Component {
  constructor(props) {
    super(props);
    this.state = { data: this.props.data, index: -1 };
  }

  componentWillMount() { }

  componentWillUnmount() { }

  resort(index) {
    const { data } = this.state;
    let number = true;
    const ii = data.map((row, i) => {
      if (`${Number(row[index])}` !== row[index]) number = false;
      return { value: row[index], index: i };
    }).sort((x, y) => {
      if (x.value === y.value) return 0;
      return number ? Number(x.value) - Number(y.value) : x.value > y.value ? 1 : -1;
    });
    this.setState({
      index,
      data: ii.map((row) => {
        return data[row.index];
      }),
    });
  }

  render() {
    const { columns = [], list = [] } = this.props;
    const { data = [], index } = this.state;
    return (
      <div className="answer-table">
        <div className="select-line">
          <Select size="basic" theme="default" value={index} list={list} onChange={(item) => {
            this.resort(item.key);
          }} />
        </div>
        <table border="1" bordercolor="#d8d8d8">
          <thead>
            <tr className="bg">
              {columns.map(item => {
                return <th>{item.title}</th>;
              })}
            </tr>
          </thead>
          <tbody>
            {data.map(row => {
              return (
                <tr>
                  {columns.map(item => {
                    return <td>{row[item.key]}</td>;
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }
}