import React from 'react';
import { DemoPanel } from '../../../external/demo/index';
import DataTable from '../lib/DataTable';
import TableSort from '../lib/TableSort';

export default class TableSortDemo extends React.Component {

  constructor(props) {
    super(props);
    this.sortData = this.sortData.bind(this);
    this.state = {
      sortTableData: [
        [1, 9, 5],
        [5, 1, 4],
        [4, 4, 2],
        [7, 8, 6],
        [2, 7, 9],
      ],
    };
    this.sortTableQuery = {
      sort: '',
      order: '',
    };
  }

  render() {
    return (
      <div>
        <DemoPanel title="排序">
          <DataTable
            cols={[
              {
                display: <TableSort
                  options={[
                    { display: 'A', key: 'a' },
                    { display: 'B', key: 'b' }
                  ]}
                  onChange={sort => {
                    this.setState({
                      sortTableData: this.sortData(sort)
                    });
                  }}
                  active={this.sortTableQuery.sort === 'a' || this.sortTableQuery.sort === 'b'}
                  dropdownWidth={200}
                />, width: 50
              },
              {
                display: <TableSort
                  options={[
                    { display: 'C', key: 'c' },
                  ]}
                  onChange={sort => {
                    this.setState({
                      sortTableData: this.sortData(sort)
                    });
                  }}
                  active={this.sortTableQuery.sort === 'c'}
                />, width: 50
              },
            ]}
            data={this.state.sortTableData.map(row => [
              `A=${row[0]} B=${row[1]}`,
              row[2]
            ])}
          />
          <p>对字段进行排序使用TableSort组件传入cols属性</p>
        </DemoPanel>
      </div>
    );
  }

  sortData(sort) {
    this.sortTableQuery.sort = sort.sort;
    let sortTableData = [...this.state.sortTableData];
    sortTableData.sort((x, y) => {
      if (sort.sort === 'a') {
        return [x[0] - y[0]] * sort.order;
      } else if (sort.sort === 'b') {
        return [x[1] - y[1]] * sort.order;
      } else if (sort.sort === 'c') {
        return [x[2] - y[2]] * sort.order;
      }
      return 0;
    });
    return sortTableData;
  }

}