import React from 'react';
import { Button, Upload } from 'antd';
import './index.less';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
import ActionLayout from '@src/layouts/ActionLayout';
import TableLayout from '@src/layouts/TableLayout';
import { asyncSMessage, asyncForm, asyncDelConfirm } from '@src/services/AsyncTools';
import { System } from '../../../stores/system';

export default class extends Page {
  constructor(props) {
    super(props);
    this.itemList = [{
      key: 'id',
      type: 'hidden',
    }, {
      key: 'totalScore',
      type: 'number',
      name: '总分',
    }, {
      key: 'totalRank',
      type: 'number',
      name: '总排名',
    }, {
      key: 'quantScore',
      type: 'number',
      name: 'Q分',
    }, {
      key: 'quantRank',
      type: 'number',
      name: 'Q排名',
    }, {
      key: 'verbalScore',
      type: 'number',
      name: 'V分',
    }, {
      key: 'verbalRank',
      type: 'number',
      name: 'V排名',
    }];

    this.columns = [{
      title: '总分',
      dataIndex: 'totalScore',
    }, {
      title: '总排名',
      dataIndex: 'totalRank',
    }, {
      title: 'Q分',
      dataIndex: 'quantScore',
    }, {
      title: 'Q排名',
      dataIndex: 'quantRank',
    }, {
      title: 'V分',
      dataIndex: 'verbalScore',
    }, {
      title: 'V排名',
      dataIndex: 'verbalRank',
    }];

    this.actionList = [{
      key: 'import',
      name: '批量导入',
      render: (item) => {
        return <Upload
          showUploadList={false}
          beforeUpload={(file) => System.importRank(file).then((result) => {
            asyncSMessage(result);
          })}
        >
          <Button>{item.name}</Button>
        </Upload>;
      },
    }, {
      key: 'del',
      name: '批量删除',
      type: 'danger',
      needSelect: 1,
    }];
  }

  initData() {
    System.listRank().then(result => {
      this.setState({ list: result });
    });
  }

  addAction() {
    asyncForm('新增', this.itemList, {}, data => {
      return System.addRank(data).then(() => {
        asyncSMessage('新增成功!');
        this.refresh();
      });
    });
  }

  editRow(row) {
    asyncForm('编辑', this.itemList, row, data => {
      return System.editRank(data).then(() => {
        asyncSMessage('编辑成功!');
        this.refresh();
      });
    });
  }

  delAction() {
    const { selectedKeys } = this.state;
    asyncDelConfirm('删除确认', '是否删除选中数据?', () => {
      return Promise.all(selectedKeys.map(row => System.delRank({ id: row })));
    }).then(() => {
      asyncSMessage('操作成功!');
      this.refresh();
    });
  }

  renderView() {
    return <Block flex>
      <ActionLayout
        itemList={this.actionList}
        selectedKeys={this.state.selectedKeys}
        onAction={key => this.onAction(key)}
      />
      <TableLayout
        columns={this.columns}
        list={this.state.list}
        pagination={false}
        loading={this.props.core.loading}
      />
    </Block>;
  }
}
