/*
 * @Author: yuananting
 * @Date: 2021-02-25 11:23:47
 * @LastEditors: yuananting
 * @LastEditTime: 2021-03-04 16:55:55
 * @Description: 助学工具-题库-题目管理主页面列表数据
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
import React, { Component } from "react";
import { Table, Switch, ConfigProvider, Empty } from "antd";
import { PageControl } from "@/components";

import "./QuestionManageList.less";

class QuestionManageList extends Component {
  // 表头设置
  parseColumns = () => {
    const columns = [
      {
        title: "题目",
        key: "questionName",
        dataIndex: "questionName",
        width: 300,
        render: (val, record) => {
          return <div className="record-name">{val}</div>;
        },
      },
      {
        title: "题型",
        key: "questionType",
        dataIndex: "questionType",
      },
      {
        title: "正确率",
        key: "accuracy",
        dataIndex: "accuracy",
        sorter: true,
      },
      {
        title: "更新时间",
        key: "updated",
        dataIndex: "updated",
        sorter: true,
        render: (val) => {
          return formatDate("YYYY-MM-DD H:i:s", val);
        },
      },
      {
        title: "操作",
        key: "operate",
        dataIndex: "operate",
        fixed: "right",
        render: (val, record) => {
          return (
            <div className="record-operate">
              <div
                className="operate__item"
                onClick={() => console.log("预览")}
              >
                预览
              </div>
              <span className="operate__item split"> | </span>
              <div
                className="operate__item"
                onClick={() => console.log("编辑")}
              >
                编辑
              </div>
              <span className="operate__item split"> | </span>
              <div
                className="operate__item"
                onClick={() => console.log("删除")}
              >
                删除
              </div>
            </div>
          );
        },
      },
    ];
    return columns;
  };

  // 自定义表格空状态
  customizeRenderEmpty = () => {
    return (
      <Empty
        image="https://image.xiaomaiketang.com/xm/emptyTable.png"
        imageStyle={{
          height: 100,
        }}
        description={
          <div>
            还没有题目，快去
            <span
              className="empty-list-tip"
              onClick={() => {
                window.RCHistory.push({
                  pathname: "/create-question-bank",
                });
              }}
            >
              新建一个
            </span>
            吧！
          </div>
        }
      ></Empty>
    );
  };

  onShowSizeChange = (current, size) => {
    if (current == size) {
      return;
    }
    let _query = this.props.query;
    _query.size = size;
    this.props.onChange(_query);
  };

  render() {
    const { dataSource = [], totalCount, query } = this.props;
    const { current, size } = query;
    return (
      <div className="question-manage-list">
        <ConfigProvider renderEmpty={this.customizeRenderEmpty}>
          <Table
            rowKey={(record) => record.id}
            dataSource={dataSource}
            columns={this.parseColumns()}
            onChange={this.handleChangeTable}
            pagination={false}
            bordered
          />
        </ConfigProvider>
        {totalCount > 0 && (
          <div className="box-footer">
            <PageControl
              current={current - 1}
              pageSize={size}
              total={totalCount}
              toPage={(page) => {
                const _query = { ...query, current: page + 1 };
                this.props.onChange(_query);
              }}
              onShowSizeChange={this.onShowSizeChange}
            />
          </div>
        )}
      </div>
    );
  }
}

export default QuestionManageList;
