import React, { useState, useRef } from "react";
import { Button, Row, Col } from "antd";
import CheckTable from "../CheckTable";
import { doFetch } from "@/utils/doFetch";
import { ArrowRightOutlined, ArrowLeftOutlined } from "@ant-design/icons";
const TableTransfer = (props) => {
  const {
    leftColumns = [],
    rightColumns = [],
    leftPath,
    rightPath,
    toLeft,
    toRight,
    leftCol,
    rightCol,
    leftDataSource,
    rightDataSource,
    leftEditTable,
    leftExtraparams,
    rightExtraparams,
    leftRowKey = "id",
    rightRowKey = "id",
    leftRowName,
    rightRowName,
    leftPagination,
    rightPagination,
    pageSize,
    leftClickParams,
    rightClickParams,
    leftTitle = "",
    rightTitle = "",
    rightSelectRowKey,
    leftSelectRowKey,
  } = props;
  const getCol = (itemcol) => {
      if (itemcol) {
        return itemcol;
      } else {
        return { xs: 24, sm: 24, md: 24, lg: 10, xl: 10, xxl: 10 };
      }
    },
    actionRef = useRef(),
    actionRefs = useRef(),
    [leftValues, clf] = useState([]),
    [rightValues, clr] = useState([]);
  function reload() {
    actionRef.current.reload();
    actionRefs.current.reload();
    clf([]);
    clr([]);
  }
  return (
    <Row gutter={[12, 12]}>
      <Col {...getCol(leftCol)}>
        <div style={{ marginBottom: 15 }}>{leftTitle}</div>
        <CheckTable
          columns={leftColumns}
          extraparams={leftExtraparams}
          path={leftPath}
          editable={leftEditTable}
          dataSource={leftDataSource}
          rowKey={leftRowKey}
          rowName={leftRowName}
          pagination={leftPagination}
          pageSize={pageSize}
          actionRef={actionRef}
          onChange={(val) => {
            clf(val);
          }}
          value={leftValues}
        ></CheckTable>
      </Col>
      <Col span={1}>
        <div
          style={{
            height: "100%",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <Button
            disabled={rightValues.length == 0}
            onClick={() => {
              doFetch({
                url: toLeft,
                params: {
                  ...rightClickParams,
                  [rightSelectRowKey]: rightValues,
                },
              }).then((res) => {
                if (res.code == "0000") {
                  reload();
                }
              });
            }}
            type="primary"
            icon={<ArrowLeftOutlined style={{ fontSize: 18 }} />}
            style={{ marginBottom: 15 }}
          ></Button>
          <Button
            disabled={leftValues.length == 0}
            onClick={() => {
              doFetch({
                url: toRight,
                params: { ...leftClickParams, [leftSelectRowKey]: leftValues },
              }).then((res) => {
                if (res.code == "0000") {
                  reload();
                }
              });
            }}
            type="primary"
            icon={<ArrowRightOutlined style={{ fontSize: 18 }} />}
          ></Button>
        </div>
      </Col>
      <Col {...getCol(rightCol)}>
        <div style={{ marginBottom: 15 }}>{rightTitle}</div>
        <CheckTable
          columns={rightColumns}
          extraparams={rightExtraparams}
          path={rightPath}
          dataSource={rightDataSource}
          rowKey={rightRowKey}
          rowName={rightRowName}
          pagination={rightPagination}
          pageSize={pageSize}
          actionRef={actionRefs}
          onChange={(val) => {
            clr(val);
          }}
          value={rightValues}
        ></CheckTable>
      </Col>
    </Row>
  );
};

export default TableTransfer;