import React, { Component } from "react";
import styles from "./index.less";
/**
 * 自定义表格
 */
class GridTable extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const {
      columns,
      dataSource,
      expandedRowRender,
      expandedOnRowsTop,
      className
    } = this.props;
    if (!columns || !dataSource) return null;
    // 拼装col,适配width属性
    const getColHtml = () => {
      return columns.map((col, index) => {
        if (col.width) {
          const style = {
            width: col.width,
            minWidth: col.width
          };
          return <col style={style} />;
        }
        return <col />;
      });
    };
    // 拼装列表表头信息
    const getTheadThHtml = () => {
      return columns.map((col, index) => {
        const thClass = col.className || "";
        const colKey = `th_${index}`;
        return (
          <th key={colKey} className={thClass}>
            <span>{col.title}</span>
          </th>
        );
      });
    };
    // 拼装列表表体行信息
    const getTbodyTrHtml = () => {
      const length = columns.length;
      // 封装行数据
      const rows = [];
      for (const index in dataSource) {
        if (dataSource[index].reqOrderPromRels && expandedOnRowsTop) {
          if (dataSource[index].reqOrderPromRels.length > 0) {
            const expandeRow = {
              key: `expandedRow_${dataSource[index].goodsId}`,
              expandedRow: true,
              record: dataSource[index]
            };
            rows.push(expandeRow);
          }
        }
        const row = {
          key: `${dataSource[index].goodsId}-${index}`,
          record: dataSource[index],
          index: index
        };
        rows.push(row);
      }
      // 根据rows, 拼接html
      return rows.map(row => {
        if (row.expandedRow) {
          return (
            <tr key={row.key} className={styles.gridExpandedRow}>
              <td colSpan={length}>{expandedRowRender(row.record)}</td>
            </tr>
          );
        } else {
          return (
            <tr key={row.key} className={styles.gridRow}>
              {getTbodyTdHtml(row.record, row.index)}
            </tr>
          );
        }
      });
    };
    // 拼装列表表体列信息
    const getTbodyTdHtml = (record, index) => {
      return columns.map(col => {
        const tdClass = col.className || "";
        const field = col.dataIndex;
        const fieldValue = record[field];
        if (col.render) {
          return (
            <td key={col.key} className={tdClass}>
              {col.render(fieldValue, record, index)}
            </td>
          );
        } else {
          return (
            <td key={col.key} className={tdClass}>
              <span>{fieldValue}</span>
            </td>
          );
        }
      });
    };
    return (
      <div className={className}>
        <div className={styles.userDefaultGrid}>
          <div className={styles.gridContent}>
            <table className={styles.gridTable}>
              <colgroup>{getColHtml()}</colgroup>
              <thead className={styles.gridThead}>
                <tr>{getTheadThHtml()}</tr>
              </thead>
              <tbody className={styles.gridBody}>{getTbodyTrHtml()}</tbody>
            </table>
          </div>
        </div>
      </div>
    );
  }
}
export default GridTable;
