import React from 'react';
import { DemoPanel } from '../../../external/demo/index';
import AutoTable from '../lib/AutoTable';
import Button from '../../button';
import { mockCGI } from './util';

export default class AutoTableDemo extends React.Component {

  state = {
    newPage: 0,
    prevPage: 0,
  }

  fetch = (query) => {
    return new Promise((resolve) => {
      mockCGI(query).then(json => {
        let rows = json.data;
        let total = json.total;
        resolve({
          rows,
          total,
        });
      });
    });
  }

  errorFetch = () => {
    return new Promise((_, reject) => {
      window.setTimeout(() => {
        reject(
          <div>
            服务器发生错误
            <Button size="s" onClick={() => {
              this.autoErrorTable.reset();
            }}>重试</Button>
          </div>
        );
      }, 1000);
    });
  }

  translateRow = (rowData) => {
    return [
      rowData.A,
      rowData.B,
      // owner
      `${rowData.C}-${rowData.D}`,
    ];
  }

  onPageChange = (newPage, prevPage) => {
    this.setState({
      newPage,
      prevPage,
    });
  }

  render() {
    const { newPage, prevPage } = this.state;
    return (
      <div>
        <DemoPanel title="AutoTableDemo">
          <AutoTable
            maxRow={5}
            cols={[
              { display: 'A', width: 10 },
              { sort: [{ display: 'B', key: 'B', value: -1 }], width: 15 },
              { sort: [{ display: 'C', key: 'C', value: 1 }, { display: 'D', key: 'D' }], width: 8 },
            ]}
            fetch={this.fetch}
            translateRow={this.translateRow}
          />
        </DemoPanel>
        <DemoPanel title="AutoTable 持久化">
          <AutoTable
            maxRow={5}
            cols={[
              { display: 'A', width: 10 },
              { sort: [{ display: 'B', key: 'B', value: -1 }], width: 15 },
              { sort: [{ display: 'C', key: 'C', value: 1 }, { display: 'D', key: 'D' }], width: 8 },
            ]}
            fetch={this.fetch}
            translateRow={this.translateRow}
            persistence={{
              get: () => {
                return JSON.parse(window.localStorage.getItem('AutoTable-persistence'));
              },
              set: (state) => {
                window.localStorage.setItem('AutoTable-persistence', JSON.stringify(state));
              },
            }}
          />
          <p>AutoTable的state被持久化到了localStorage，先切换下页面，重新刷新页面可以看到这个AutoTable还是之前的样子</p>
        </DemoPanel>
        <DemoPanel title="AutoTable goPage showPage reset">
          <AutoTable
            ref={t => this.autoTable = t}
            maxRow={5}
            cols={[
              { display: 'A', width: 10 },
              { sort: [{ display: 'B', key: 'B', value: -1 }], width: 15 },
              { sort: [{ display: 'C', key: 'C', value: 1 }, { display: 'D', key: 'D' }], width: 8 },
            ]}
            fetch={this.fetch}
            translateRow={this.translateRow}
            onPageChange={this.onPageChange}
          />
          <Button onClick={() => {
            let page = Math.floor(Math.random() * 20);
            this.autoTable.goPage(page, false);
          }}>goPage</Button>
          <Button onClick={() => {
            let page = Math.floor(Math.random() * 20);
            this.autoTable.showPage(page, false);
          }}>showPage</Button>
          <Button onClick={() => {
            this.autoTable.reset([]);
          }}>reset</Button>
          <p>从第<b>{prevPage}</b>页跳转到了第<b>{newPage}</b>页（从0开始计数）</p>
          <br />
          <p>跳转到第page页,如果没有第page页的数据会回调fetch去加载更多的数据,从0开始计数</p>
          <p>跳转到第page页,如果没有第page页的数据 不会 回调fetch去加载更多的数据,业务侧自己保证第page页有数据</p>
          <p>每当表单的查询条件发生改变时请调reset方法重置AutoTable</p>
        </DemoPanel>
        <DemoPanel title="错误重试">
          <AutoTable
            ref={t => this.autoErrorTable = t}
            maxRow={5}
            cols={[
              { display: 'A', width: 10 },
              { sort: [{ display: 'B', key: 'B', value: -1 }], width: 15 },
              { sort: [{ display: 'C', key: 'C', value: 1 }, { display: 'D', key: 'D' }], width: 8 },
            ]}
            fetch={this.errorFetch}
            translateRow={this.translateRow}
          />
        </DemoPanel>
      </div>
    );
  }
}