import React, { Component } from 'react';
import DeleteConfirmModal from '../../../components/DeleteConfirmModal';
import { connect } from 'react-redux';
import EasyvTable from 'components/EasyvTable';

import styles from './UserListTable.less';

interface IProps {
  deadline: Date | string;
  page: number;
  pageSize: number;
  list: any[];
  total: number;
  onResetPassword: (id) => void;
  onDelete: (id) => void;
  onPageChange: (page: number, pageSize?: number) => void;
}

class UserListTable extends Component<IProps> {
  tableColumns: (
    | { title: string; dataIndex: string; key: string; width: string; render: (name: any) => JSX.Element }
    | { title: string; key: string; width: number; render: (text: any, { id }: { id: any }) => JSX.Element; dataIndex?: undefined }
  )[];
  constructor(props) {
    super(props);
    this.tableColumns = [
      {
        title: '账户',
        dataIndex: 'name',
        key: 'name',
        width: '30%',
        render: (name) => <span>{name}</span>
      },
      {
        title: '创建时间',
        dataIndex: 'createdAt',
        key: 'createdAt',
        width: '30%',
        render: (time) => <span>{time}</span>
      },
      {
        title: '操作',
        key: 'action',
        width: 200,
        render: (_text, { id }) => {
          return (
            <span>
              <a className="click" onClick={() => this.props.onResetPassword(id)}>
                重置密码
              </a>
              <DeleteConfirmModal
                tip="此操作执行后不可逆，是否确认将对应账户删除?"
                onOk={() => {
                  this.props.onDelete(id);
                }}>
                <a className="click" style={{ marginLeft: 8 }}>
                  移除
                </a>
              </DeleteConfirmModal>
            </span>
          );
        }
      }
    ];
  }

  render() {
    const { list, deadline } = this.props;

    return (
      <div className={styles.container}>
        <EasyvTable
          columns={this.tableColumns}
          dataSource={list.filter((d) => d.id !== 1)}
          rowKey={(record) => record.id}
          scroll={deadline ? { y: 'calc(100vh - 298px)' } : { y: 'calc(100vh - 250px)' }}
          openSelect={false}
        />
      </div>
    );
  }
}

function mapStateToProps({ transfer }) {
  const { deadline } = transfer;

  return {
    deadline
  };
}

export default connect(mapStateToProps)(UserListTable);
