import React, { PureComponent } from 'react';
import moment from 'moment';
import queryString from 'query-string';
import { Divider, Modal, Table, Icon, Badge } from 'antd';
import { statuses, Codes } from '../../../utils/config';

export default class TableList extends PureComponent {
  handleDeleteItem = (record) => {
    const { onDeleteItem } = this.props;
    Modal.confirm({
      title: `您确定要删除该课程?`,
      okText: '确定',
      cancelText: '取消',
      onOk: () => onDeleteItem({ id: record.id }),
    });
  }

  render() {
    const { onDeleteItem, onEditItem, pagination, ...tableProps } = this.props;

    const columns = [{
      title: '课程编号',
      dataIndex: 'code',
      key: 'code',
      width: '20%',
    },{
      title: '课程名称',
      dataIndex: 'name',
      key: 'name',
      width: '36%',
    },{
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (text, record) => {
        const statusMap = {[Codes.CODE_NORMAL]: 'success', [Codes.CODE_DELETE]: 'error'};
        return (<Badge status={statusMap[record.status]} text={statuses[record.status]} />);
      },
      width: '12%',
    },{
      title: '修改时间',
      dataIndex: 'gmtModified',
      key: 'gmtModified',
      render: (text, record) => (
        <div>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</div>
      ),
      width: '20%',
    },{
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      render: (text, record) => (
        <div>
          <a onClick={() => onEditItem(record)}>编辑</a>
          <Divider type="vertical" />
          <a onClick={() => this.handleDeleteItem(record)}>删除</a>
        </div>
      ),
      width: '12%',
    }];

    // 配置分页
    tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};

    return (
      <Table
        simple
        bordered
        { ...tableProps }
        columns={columns}
        rowKey={record => record.id}
      />
    );
  }
}