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排名',
    }, {
      key: 'irScore',
      type: 'number',
      name: 'IR分',
    }, {
      key: 'irRank',
      type: 'number',
      name: 'IR排名',
    }];

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

    this.actionList = [{
      key: 'import',
      name: '批量导入',
      render: (item) => {
        return <Upload
          showUploadList={false}
          beforeUpload={(file) => System.importRank({ file }).then((result) => {
            asyncSMessage(`导入: ${result}条数据，数据正在更新中，请勿重新提交`);
            this.refresh();
            return Promise.reject();
          }).catch(e => {
            asyncSMessage(e.message, 'error');
            return Promise.reject();
          })}
        >
          <Button>{item.name}</Button>
        </Upload>;
      },
    }, {
      key: 'del',
      name: '批量删除',
      type: 'danger',
      needSelect: 1,
    }];
  }

  initData() {
    System.listRank(this.state.search).then(result => {
      this.setTableData(result.list, result.total);
    });
  }

  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.tableSort(this.columns)}
        list={this.state.list}
        pagination={this.state.page}
        loading={this.props.core.loading}
        onChange={(pagination, filters, sorter) => this.tableChange(pagination, filters, sorter)}
      />
    </Block>;
  }
}