/**
 * @description table表格
 *
 * @date 创建时间 2022-10-18 15:49
 * @author 开发人员
 */

import React from "react";
import Table from "@components/Table";
import type { TableProps, ColumnProps } from "@components/Table";
import { features, useTablePipeline } from "ali-react-table";
import styled from "styled-components";

const BasicCustomBaseTable = styled(Table)`
  &,
  .even > .art-table-cell {
    background: transparent;
  }

  .art-table .art-table-header-row > .first,
  .art-table .art-table-row > .first {
    padding-left: 16px;
  }

  .art-table .art-table-header-row > .last,
  .art-table .art-table-row > .last {
    padding-right: 16px;
  }
  .art-table-header-cell {
    font-weight: 500;
  }
  .art-table-header-cell svg {
    width: 12px;
    height: 12px;
  }
`;

const BasicCustomTable: React.FC<TableProps & { currentSymbol: string }> = props => {
  const { currentSymbol, columns, dataSource } = props;

  const pipeline = useTablePipeline()
    .input({ columns, dataSource })
    .use(features.sort({ mode: "single" }));

  // 选中 row
  pipeline.appendRowPropsGetter((row, rowIndex) => {
    const activeColor = row.symbol === currentSymbol ? "rgba(116, 116, 128, 0.08)" : "";
    // const activeColor = row.like ? "var(--table-hover-bgcolor)" : ""
    // "--bgcolor": activeColor,
    return {
      style: { "background-color": activeColor } as React.CSSProperties
      // onClick() {
      //   console.log(row.close, row.like, rowIndex)
      // }
    };
  });

  return (
    <BasicCustomBaseTable
      {...pipeline.getProps()}
      useVirtual={{
        vertical: true
      }}
      style={{
        "--header-row-height": "39px",
        "--header-cell-border": "transparent",
        "--header-bgcolor": "#fff",
        "--row-height": "40px",
        "--font-size": "12px",
        "--cell-border": "none",
        "--bgcolor": "transparent",
        "--hover-bgcolor": "rgba(116, 116, 128, 0.08)",
        maxHeight: "320px",
        overflowX: "hidden",
        overflowY: "overlay"
      }}
    />
  );
};

export { ColumnProps };

export default BasicCustomTable;