import React, { useEffect } from "react";
import * as commonBusiness from "@/components/Common/commonBusiness";
import StaticEditTable from "@/components/Common/CommonTable";
import CommonOperationBarComponent from "@/mes/common/commonOperationBarComponent";

import { Button } from "antd";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";

import styles from "./index.less";
import { cloneDeep } from "lodash";
import { InputNumber } from "antd";

const useChoosePalletComponent = props => {
  const { formData } = props;
  const [config] = formData;
  const tableName = config.sGrd;

  const addState = {
    config,
    tableName,
    sTabName: config.showName,
    sTabName1: config.showName.replace("待", "已")
  };

  const handleDataMove = bReportStatus => {
    const {
      [`${tableName}Data`]: tableData = [],
      [`${tableName}SelectedRowKeys`]: selectedRowKeys = []
    } = props;

    const tableDataNew = cloneDeep(tableData);
    tableDataNew.forEach(item => {
      if (selectedRowKeys.includes(item.sId)) {
        item.bReport = bReportStatus;
      }
    });

    props.onSaveState({
      [`${tableName}Data`]: tableDataNew,
      [`${tableName}SelectedRowKeys`]: []
    });
  };

  const handleShortcutClick = () => {
    const { startPallet, endPallet } = props;

    const { [`${tableName}Data`]: tableData = [] } = props;

    const tableDataNew = cloneDeep(tableData);
    const filterData = tableDataNew.filter(item => {
      return (
        !item.bReport &&
        item.sBoardNo &&
        Number(item.sBoardNo) >= startPallet &&
        Number(item.sBoardNo) <= endPallet
      );
    });

    const selectedRowKeys = filterData.map(item => item.sId);

    props.onSaveState({
      [`${tableName}SelectedRowKeys`]: selectedRowKeys
    });
  };

  return {
    ...props,
    ...addState,
    onDataMove: handleDataMove,
    onShortcutClick: handleShortcutClick
  };
};

const ChoosePalletComponent = baseProps => {
  const props = useChoosePalletComponent(baseProps);

  const { sTabName, sTabName1 } = props;

  return (
    <div className={styles.choosePallet}>
      <div className="leftPart">
        <div className="tabTitle">{sTabName}</div>
        <div className="choosePalletShortcut">
          <InputNumber
            placeholder="开始托盘"
            onChange={value => {
              props.onSaveState({
                startPallet: value
              });
            }}
          />
          <InputNumber
            placeholder="结束托盘"
            onChange={value => {
              props.onSaveState({
                endPallet: value
              });
            }}
          />
          <Button type="primary" size="large" onClick={props.onShortcutClick}>
            选择
          </Button>
        </div>
        <div className="choosePalletTable">
          <CommonTableComponent {...props} />
        </div>
      </div>
      <div className="midPart">
        <Button
          type="primary"
          size="large"
          icon={<RightOutlined />}
          onClick={props.onDataMove.bind(this, true)}
        />
        <Button
          size="large"
          icon={<LeftOutlined />}
          style={{ background: "#EEE" }}
          onClick={props.onDataMove.bind(this, false)}
        />
      </div>
      <div className="rightPart">
        <div className="tabTitle">{sTabName1}</div>
        <div className="choosePalletTable">
          <CommonTableComponent {...props} bFilterTable={true} />
        </div>
      </div>
    </div>
  );
};

// 表格组件
const CommonTableComponent = props => {
  const { tableName, bFilterTable } = props;

  const baseProps = commonBusiness.getTableTypes(tableName, props);

  const tableProps = {
    ...baseProps,
    data: cloneDeep(baseProps.data)
      .filter(item => item.bReport === !!bFilterTable)
      .map((item, index) => ({ ...item, iRowNum: index + 1 })),
    tableProps: {
      onChange: () => {}
    }
  };

  const operationBarProps = {
    ...props,
    sName: tableName
  };

  return (
    <>
      <StaticEditTable {...tableProps} />
      <CommonOperationBarComponent {...operationBarProps} />
    </>
  );
};

export default ChoosePalletComponent;