import ButtonConfirm from '@/components/ButtomConfirm';
import { RESPONSE_CODE } from '@/constants/enum';
import {
  postServiceOrderOrderCancel,
  postServiceOrderQueryServiceOrder,
} from '@/services';
import { orderExport } from '@/services/order';
import { enumValueToLabel, formatDateTime } from '@/utils';
import {
  ClockCircleTwoTone,
  ContainerTwoTone,
  CopyTwoTone,
  DownOutlined,
  EditTwoTone,
  EllipsisOutlined,
} from '@ant-design/icons';
import {
  PageContainer,
  ProColumns,
  ProTable,
} from '@ant-design/pro-components';
import { history } from '@umijs/max';
import {
  Avatar,
  Button,
  Checkbox,
  Divider,
  Dropdown,
  Flex,
  MenuProps,
  Space,
  Tag,
  message,
} from 'antd';
import { cloneDeep } from 'lodash';
import { Key, useRef, useState } from 'react';
import OrderPrintModal from '../OrderPrint/OrderPrintModal';
import AttachmentModal from './components/AttachmentModal';
import CheckModal from './components/CheckModal';
import ConfirmReceiptModal from './components/ConfirmReceiptModal';
import DeliverInfoDrawer from './components/DeliverInfoDrawer';
import DeliverModal from './components/DeliverModal';
import FinancialDrawer from './components/FinancialDrawer';
import HistoryModal from './components/HistoryModal';
import ImportModal from './components/ImportModal';
import OrderDrawer from './components/OrderDrawer';
import OrderNotesEditModal from './components/OrderNotesEditModal';
import SubOrderComfirmReceiptImagesModal from './components/SubOrderComfirmReceiptImagesModal';
import {
  MAIN_ORDER_COLUMNS,
  ORDER_STATUS_OPTIONS,
  PAYMENT_CHANNEL_OPTIONS,
  PAYMENT_METHOD_OPTIONS,
  PRODUCT_BELONG_DEPARTMENT_OPTIONS,
  TAGS_COLOR,
  getInvoicingType,
  getNeedInvoicing,
} from './constant';
import './index.less';
import { OrderListItemType, OrderType } from './type.d';

const OrderPage = () => {
  const [orderDrawerVisible, setOrderDrawerVisible] = useState<boolean>(false);
  const [checkVisible, setCheckVisible] = useState<boolean>(false);
  const [orderPrintVisible, setOrderPrintVisible] = useState<boolean>(false);
  const [
    subOrderConfirmReceiptImagesVisible,
    setSubOrderConfirmReceiptImagesVisible,
  ] = useState<boolean>(false);
  const [notesEditVisible, setNotesEditVisible] = useState<boolean>(false);
  const [attachmentModalVisible, setAttachmentModalVisible] =
    useState<boolean>(false);
  const [financialVisible, setFinancialVisible] = useState<boolean>(false);
  const [historyModalVisible, setHistoryModalVisible] =
    useState<boolean>(false);
  const [isRePrintOrder, setIsRePrintOrder] = useState<boolean>(false);
  const [isSendProduct, setIsSendProduct] = useState<boolean>(false);
  const [isMainOrder, setIsMainOrder] = useState<boolean>(false);
  const [importModalVisible, setImportModalVisible] = useState<boolean>(false);
  const [confirmReceiptVisible, setConfirmReceiptVisible] =
    useState<boolean>(false);
  const [deliverVisible, setDeliverVisible] = useState<boolean>(false);
  const [deliverInfoDrawerVisible, setDeliverInfoDrawerVisible] =
    useState<boolean>(false);
  const [orderOptType, setOrderOptType] = useState<string>('');
  const [isFinalcialEdit, setIsFinalcialEdit] = useState<boolean>(false);
  const [expandedRowKeys, setExpandedRowKeys] = useState<Key[]>([]);
  const [orderRow, setOrderRow] = useState<Partial<OrderType>>({});
  const [mainOrderAllItemKeys, setMainOrderAllItemKeys] = useState([]);
  const [rolePath, setRolePath] = useState([]); //当前角色权限（新增跟打印按钮）
  const userInfo = JSON.parse(localStorage.getItem('userInfo'));
  // const [tableHeight, setTableHeight] = useState(200);
  const [selectedRows, setSelectedRows] = useState({});
  const [selectedRowObj, setSelectedRowObj] = useState({});
  const [selectedItems, setSelectedItems] = useState([]);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [pageSize, setPageSize] = useState(10);
  const [currentPage, setCurrentPage] = useState(1);
  const mainTableRef = useRef();
  const [messageApi, contextHolder] = message.useMessage();

  // const openCheckNotes = (checkNotes: string) => {
  //   Modal.info({
  //     title: '驳回备注',
  //     content: (
  //       <div>
  //         <p>{checkNotes}</p>
  //       </div>
  //     ),
  //     onOk() { },
  //   });
  // };

  const exportLoading = () => {
    messageApi.open({
      type: 'loading',
      content: '正在导出文件...',
      duration: 0,
    });
  };

  const exportLoadingDestory = () => {
    messageApi.destroy();
  };

  const refreshTable = () => {
    mainTableRef.current?.reload();
    //刷新表格数据的时候,取消选中行
    setSelectedRowObj([]);
    setSelectedRows([]);
    setSelectedRowKeys([]);
  };

  // const resize = () => {
  //   // 计算元素底部到视口顶部的距离
  //   let bottomDistance = document
  //     .getElementById('mainTable')
  //     ?.getElementsByClassName('ant-table-thead')[0]
  //     .getBoundingClientRect().bottom;
  //   // 获取屏幕高度
  //   let screenHeight =
  //     window.innerHeight || document.documentElement.clientHeight;

  //   // 计算元素底部到屏幕底部的距离
  //   let bottomToScreenBottomDistance = screenHeight - bottomDistance;

  //   // //底部分页元素的高度
  //   // var pH = screenHeight - document.getElementById("main-table").getElementsByClassName('ant-table-body')[0].getBoundingClientRect().bottom;

  //   setTableHeight(bottomToScreenBottomDistance - 88);
  // };

  // useEffect(() => {
  //   resize();
  //   // 添加事件监听器，当窗口大小改变时调用resize方法
  //   window.addEventListener('resize', resize);
  // });

  const onCheckboxChange = (itemKey: never) => {
    const newSelectedItems = selectedItems.includes(itemKey)
      ? selectedItems.filter((key) => key !== itemKey)
      : [...selectedItems, itemKey];

    setSelectedItems(newSelectedItems);
  };
  const handleTableExpand = (mainOrderIds: any) => {
    setExpandedRowKeys(mainOrderIds);
  };

  //表头渲染
  const OrderTableHeader = () => {
    return (
      <Flex className="w-full">
        <Flex className="w-[29%] ml-[4%]">
          <span className="font-medium">商品信息</span>
        </Flex>
        <Flex className="w-[16%]">
          <span className="font-medium">交易金额</span>
        </Flex>
        <Flex className="w-[10%]">
          <span className="font-medium">支付</span>
        </Flex>
        <Flex className="w-[14%]">
          <span className="font-medium">其他</span>
        </Flex>
        <Flex className="w-[10%]">
          <span className="font-medium">交易状态</span>
        </Flex>
        <Flex className="w-[17%]">
          <span className="font-medium">操作</span>
        </Flex>
      </Flex>
    );
  };
  //子订单内容渲染
  const SubOderRander = ({ record, optRecord }) => {
    return (
      <Flex className="w-full border-b-indigo-500">
        <Flex vertical className="w-[31%]" gap="small">
          {/* 商品名称 */}
          <div className="whitespace-no-wrap overflow-hidden overflow-ellipsis">
            <span className="text-black font-medium ">
              {optRecord.productName}
            </span>
          </div>
          <div className="whitespace-no-wrap overflow-hidden overflow-ellipsis">
            <span className="text-[#8C8C8C]">参数：{optRecord.parameters}</span>
          </div>
          <Flex title={optRecord.notes}>
            <div className="max-w-[90%] whitespace-no-wrap overflow-hidden overflow-ellipsis">
              <span className="text-[#8C8C8C]">
                备注：
                {optRecord.notes === undefined ? '暂无备注' : optRecord.notes}
              </span>
            </div>
            {/* 编辑备注按钮 */}
            <EditTwoTone
              onClick={() => {
                setNotesEditVisible(true);
                setOrderRow(optRecord);
                setIsMainOrder(false);
              }}
            />
          </Flex>
        </Flex>
        <Flex className="w-[16%]" vertical gap="small">
          <div className="whitespace-no-wrap overflow-hidden overflow-ellipsis">
            <span className="text-[#8C8C8C]">单价：</span>
            <span className="text-slate-700">￥{optRecord.productPrice}</span>
          </div>
          <div className="whitespace-no-wrap overflow-hidden overflow-ellipsis">
            <span className="text-[#8C8C8C]">数量：</span>
            <span className="text-slate-700">x{optRecord.quantity}</span>
          </div>
          <div className="whitespace-no-wrap overflow-hidden overflow-ellipsis">
            <span className="text-[#8C8C8C]">合计：</span>
            <span className="text-slate-700">
              ￥{optRecord.subOrderPayment}
            </span>
          </div>
        </Flex>
        <Flex className="w-[10%]" vertical gap="small">
          {/* 支付方式 */}
          <div className="whitespace-no-wrap overflow-hidden overflow-ellipsis">
            <span className="text-slate-700">
              {enumValueToLabel(
                optRecord.paymentMethod,
                PAYMENT_METHOD_OPTIONS,
              )}
            </span>
          </div>
          {/* 支付渠道 */}
          <div className="whitespace-no-wrap overflow-hidden overflow-ellipsis">
            <span className="text-slate-700">
              {enumValueToLabel(
                optRecord.paymentChannel,
                PAYMENT_CHANNEL_OPTIONS,
              )}
            </span>
          </div>
        </Flex>
        <Flex className="w-[15%]" vertical gap="small">
          {/* 所属部门 */}
          <div className="whitespace-no-wrap overflow-hidden overflow-ellipsis">
            <span className="text-slate-700">
              {enumValueToLabel(
                optRecord.productBelongBusiness,
                PRODUCT_BELONG_DEPARTMENT_OPTIONS,
              )}
            </span>
          </div>

          {/* 开票类型 */}
          <div className="whitespace-no-wrap overflow-hidden overflow-ellipsis">
            <span className="text-slate-700">
              {getInvoicingType(optRecord)}
            </span>
          </div>
        </Flex>

        <Flex className="w-[10%]" vertical gap="small">
          {/* 开票状态 */}
          <div className="whitespace-no-wrap overflow-hidden overflow-ellipsis">
            <Tag
              color={
                optRecord.invoicingTime === undefined
                  ? TAGS_COLOR.get(optRecord.invoicingStatus)
                  : 'success'
              }
            >
              {getNeedInvoicing(optRecord)}
            </Tag>
          </div>
          {/* 订单状态 */}
          <div className="whitespace-no-wrap overflow-hidden overflow-ellipsis">
            <Tag color={TAGS_COLOR.get(optRecord.orderStatus)}>
              {enumValueToLabel(optRecord.orderStatus, ORDER_STATUS_OPTIONS)}
            </Tag>
          </div>

          {/* 物流信息 */}
          <div className="whitespace-no-wrap overflow-hidden overflow-ellipsis">
            <Button type="link" size="small" className="px-0">
              物流信息
            </Button>
          </div>
        </Flex>
        <Flex className="w-[18%]" wrap="wrap" gap="small">
          {optRecord.subPath.includes('sendProduct') ? (
            <Button
              className="p-0"
              type="link"
              onClick={() => {
                optRecord.mainOrderId = record.id;
                setSelectedRows([cloneDeep(optRecord)]); //克隆一份数据，避免后续修改污染
                setDeliverVisible(true);
                setIsSendProduct(true);
              }}
            >
              发货
            </Button>
          ) : (
            ''
          )}

          {optRecord.subPath.includes('queryAnnex') ? (
            <Button
              className="p-0"
              type="link"
              onClick={() => {
                optRecord.mainOrderId = record.id;
                setAttachmentModalVisible(true);
                setOrderRow(optRecord);
              }}
            >
              附件
            </Button>
          ) : (
            ''
          )}

          {optRecord.subPath.includes('orderCancel') ? (
            <ButtonConfirm
              className="p-0"
              title="确认作废？"
              text="作废"
              onConfirm={async () => {
                let body = { ids: [optRecord.id], checkIsMainOrderId: false };
                const data = await postServiceOrderOrderCancel({
                  data: body,
                });
                if (data.result === RESPONSE_CODE.SUCCESS) {
                  message.success(data.message);
                  refreshTable();
                }
              }}
            />
          ) : (
            ''
          )}

          {optRecord.subPath.includes('modifySendInformation') ? (
            <Button
              className="p-0"
              type="link"
              onClick={() => {
                optRecord.mainOrderId = record.id;
                setSelectedRows([cloneDeep(optRecord)]); //克隆一份数据，避免后续修改污染
                setDeliverVisible(true);
                setIsSendProduct(false);
              }}
            >
              修改发货信息
            </Button>
          ) : (
            ''
          )}

          {optRecord.subPath.includes('printOrder') ? (
            <Button
              className="p-0"
              type="link"
              onClick={async () => {
                setOrderPrintVisible(true);
                setSelectedRows([optRecord]);
                setOrderRow(record);
              }}
            >
              打印
            </Button>
          ) : (
            ''
          )}
          {optRecord.subPath.includes('editOrder') ? (
            <Button
              className="p-0"
              type="link"
              onClick={() => {
                setFinancialVisible(true);
                setOrderRow(record);
                setSelectedRows([optRecord]);
                setIsFinalcialEdit(true);
              }}
            >
              编辑
            </Button>
          ) : (
            ''
          )}
          {optRecord.subPath.includes('invoicing') ? (
            <Button
              className="p-0"
              type="link"
              onClick={() => {
                setFinancialVisible(true);
                setIsFinalcialEdit(false);
                setOrderRow(record);
                setSelectedRows([optRecord]);
              }}
            >
              开票
            </Button>
          ) : (
            ''
          )}
          {optRecord.subPath.includes('checkOrder') ? (
            <Button
              className="p-0"
              type="link"
              onClick={() => {
                setOrderRow(optRecord);
                setCheckVisible(true);
                setSelectedRows([optRecord]);
              }}
            >
              审核
            </Button>
          ) : (
            ''
          )}

          {optRecord.subPath.includes('rePrintOrder') ? (
            <Button
              className="p-0"
              type="link"
              onClick={() => {
                setOrderPrintVisible(true);
                setSelectedRows([optRecord]);
                setOrderRow(record);
                setIsRePrintOrder(true);
              }}
            >
              重新打印
            </Button>
          ) : (
            ''
          )}

          {optRecord.subPath.includes('confirmReceipt') ? (
            <Button
              className="p-0"
              type="link"
              onClick={() => {
                setConfirmReceiptVisible(true);
                setOrderRow(optRecord);
              }}
            >
              确认收货
            </Button>
          ) : (
            ''
          )}
          {optRecord.subPath.includes('viewImages') ? (
            <Button
              className="p-0"
              type="link"
              onClick={() => {
                setSubOrderConfirmReceiptImagesVisible(true);
                setOrderRow(optRecord);
              }}
            >
              查看收货凭证
            </Button>
          ) : (
            ''
          )}
        </Flex>
      </Flex>
    );
  };
  const expandedRowRender = (record) => {
    let subOrders = record.subOrderInformationLists;

    return (
      <ProTable
        id="sub-table"
        className=" w-full"
        showHeader={false}
        columns={[
          {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            render: (text: any, optRecord: any) => {
              return <SubOderRander record={record} optRecord={optRecord} />;
            },
          },
        ]}
        rowSelection={{
          onChange: (selectedRowKeys: any, selectedRows: any) => {
            setSelectedRowKeys(selectedRowKeys);
            setSelectedRowObj({
              ...setSelectedRowObj,
              [record.id]: selectedRows,
            });
            selectedRowObj[record.id] = selectedRows;
            setSelectedRows(selectedRows);
          },
          selectedRowKeys: selectedRowKeys,
          // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
          // 注释该行则默认不显示下拉选项
          // selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
          // defaultSelectedRowKeys: [],
        }}
        rowKey="id"
        headerTitle={false}
        search={false}
        options={false}
        dataSource={subOrders}
        pagination={false}
        tableAlertRender={false}
      />
    );
  };

  // 主订单内容渲染
  const MainOrderColumnRender = ({ record }: { record: OrderListItemType }) => {
    return (
      <Flex vertical={true}>
        {/* 编号、时间、销售信息 */}
        <Flex
          className="px-4 py-4 bg-white bg-white rounded-t-lg"
          justify="space-between"
        >
          <Flex wrap="wrap" gap="middle" vertical>
            <Flex>
              <Flex>
                <Checkbox
                  onChange={() => onCheckboxChange(record.id)}
                  checked={selectedItems.includes(record.id)}
                >
                  <Space split={<Divider type="vertical" />}>
                    <div>
                      <span className="text-[#8C8C8C]">订单号：</span>
                      <span className="text-slate-700">{record.id}</span>
                    </div>
                    <span>{formatDateTime(record.createTime)}</span>
                  </Space>
                </Checkbox>
                <Space split={<Divider type="vertical" />}>
                  <div>
                    <span className="text-[#8C8C8C]">代表：</span>
                    <span className="text-slate-700">{record.salesCode}</span>
                  </div>
                  <span>
                    <span className="text-[#8C8C8C]">单位：</span>
                    <span className="text-slate-700">{record.institution}</span>
                  </span>
                  <span>
                    <span className="text-[#8C8C8C]">联系人：</span>
                    <span className="text-slate-700">
                      {record.institutionContactName + ' '}
                      <ContainerTwoTone
                        className="hover:curcor-pointer"
                        onClick={() => {
                          setDeliverInfoDrawerVisible(true);
                          setOrderRow(record);
                        }}
                      />
                    </span>
                  </span>
                </Space>
              </Flex>
            </Flex>
            <Flex className="pl-6" align="center">
              <div title={record.notes}>
                <div className="max-w-md whitespace-no-wrap overflow-hidden overflow-ellipsis">
                  <span className="text-[#8C8C8C]">备注：</span>
                  <span className="ml-2">
                    {record.notes === undefined ? '暂无备注' : record.notes}
                  </span>
                </div>
              </div>
              <EditTwoTone
                className="hover:curcor-pointer"
                onClick={() => {
                  setNotesEditVisible(true);
                  setOrderRow(record);
                  setIsMainOrder(true);
                }}
              />
            </Flex>
          </Flex>
          <Flex wrap="wrap" gap="middle" vertical>
            <Flex justify="flex-end">
              <Flex wrap="wrap" gap="middle" align="center">
                <div>
                  <span className="text-[#8C8C8C]">总金额：￥</span>
                  <span className="text-lg font-medium">
                    {record.totalPayment}
                  </span>
                </div>
                {rolePath?.includes('addOrder') ? (
                  <CopyTwoTone
                    className="hover:cursor-pointer"
                    onClick={() => {
                      setOrderOptType('copy');
                      setOrderDrawerVisible(true);
                      let copy = cloneDeep(record);
                      copy.id = undefined;
                      copy.subOrderInformationLists?.forEach((item) => {
                        item.id = undefined;
                      });
                      setOrderRow(copy);
                    }}
                  />
                ) : (
                  ''
                )}

                <ClockCircleTwoTone
                  className="hover:cursor-pointer"
                  onClick={() => {
                    setHistoryModalVisible(true);
                    if (selectedRowObj[record.id]?.length) {
                      setSelectedRows(selectedRowObj[record.id]);
                    } else {
                      setSelectedRows(record.subOrderInformationLists);
                    }
                  }}
                />
              </Flex>
            </Flex>
            <Flex justify="flex-end">
              <Space.Compact direction="vertical" align="end">
                <Space>
                  {record.mainPath.includes('sendProduct') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        if (!selectedRowObj[record.id]?.length) {
                          return message.error('请选择选择子订单');
                        }
                        setSelectedRows(selectedRowObj[record.id]);
                        setDeliverVisible(true);
                        setIsSendProduct(true);
                      }}
                    >
                      发货
                    </Button>
                  ) : (
                    ''
                  )}
                  {record.mainPath.includes('printOrder') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        if (!selectedRowObj[record.id]?.length) {
                          return message.error('请选择选择子订单');
                        }
                        setSelectedRows(selectedRowObj[record.id]);
                        setOrderRow(record);
                        setOrderPrintVisible(true);
                      }}
                    >
                      打印
                    </Button>
                  ) : (
                    ''
                  )}
                  {record.mainPath.includes('rePrintOrder') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        if (!selectedRowObj[record.id]?.length) {
                          return message.error('请选择选择子订单');
                        }
                        setSelectedRows(selectedRowObj[record.id]);
                        setOrderRow(record);
                        setOrderPrintVisible(true);
                        setIsRePrintOrder(true);
                      }}
                    >
                      重新打印
                    </Button>
                  ) : (
                    ''
                  )}
                  {record.mainPath.includes('modifySendInformation') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        if (!selectedRowObj[record.id]?.length) {
                          return message.error(
                            '请选择已经发货或者已经确认收货的子订单',
                          );
                        }
                        for (let row of selectedRowObj[record.id]) {
                          if (
                            row.orderStatus !== 'CONFIRM_RECEIPT' &&
                            row.orderStatus !== 'SHIPPED'
                          ) {
                            return message.error(
                              '请选择已经发货或者已经确认收货的子订单',
                            );
                          }
                        }
                        setSelectedRows(selectedRowObj[record.id]);
                        setDeliverVisible(true);
                        setIsSendProduct(false);
                      }}
                    >
                      修改发货信息
                    </Button>
                  ) : (
                    ''
                  )}
                  {record.mainPath.includes('invoicing') ? (
                    <Button
                      type="link"
                      className="p-0"
                      onClick={() => {
                        let selectedSubOrders = selectedRowObj[record.id];
                        setSelectedRows(selectedSubOrders);
                        if (selectedSubOrders === undefined) {
                          setSelectedRows(record.subOrderInformationLists);
                        }
                        setOrderRow(record);
                        setFinancialVisible(true);
                      }}
                    >
                      开票
                    </Button>
                  ) : (
                    ''
                  )}
                  {record.mainPath.includes('updateOrder') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        //勾选的子订单：如果有勾选，后面只校验有勾选的
                        let selectedSubOrders = selectedRowObj[record.id];
                        if (
                          selectedSubOrders === undefined ||
                          selectedSubOrders.length === 0
                        ) {
                          selectedSubOrders = record.subOrderInformationLists;
                        }
                        for (
                          let index = 0;
                          index < selectedSubOrders.length;
                          index++
                        ) {
                          let orderStatus =
                            selectedSubOrders[index].orderStatus;
                          //是审核通过及之后的订单
                          if (
                            orderStatus !== 'UNAUDITED' &&
                            orderStatus !== 'AUDIT_FAILED'
                          ) {
                            message.error(
                              '请选择未审核或者审核失败的订单进行编辑',
                            );
                            return;
                          }
                        }
                        setOrderDrawerVisible(true);
                        setOrderRow(record);
                        setSelectedRows(selectedSubOrders);
                        setOrderOptType('edit');
                      }}
                    >
                      编辑
                    </Button>
                  ) : (
                    ''
                  )}

                  {record.mainPath.includes('checkOrder') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        let selectedSubOrders = selectedRowObj[record.id];
                        setSelectedRows(selectedSubOrders);
                        if (selectedSubOrders === undefined) {
                          setSelectedRows(record.subOrderInformationLists);
                          console.log(
                            'subOrderInformationLists：' +
                              record.subOrderInformationLists,
                          );
                        }
                        for (let i = 0; i < selectedRows.length; i++) {
                          if (
                            selectedRows[i].orderStatus !== 'UNAUDITED' &&
                            selectedRows[i].orderStatus !== 'AUDIT_FAILED'
                          ) {
                            message.error(
                              '请选择未审核或者审核失败的子订单进行审核',
                            );
                            return;
                          }
                        }
                        setOrderRow(record);
                        setCheckVisible(true);
                      }}
                    >
                      审核
                    </Button>
                  ) : (
                    ''
                  )}

                  {record.mainPath.includes('orderCancel') ? (
                    <ButtonConfirm
                      className="p-0"
                      title="确认作废？"
                      text="作废"
                      onConfirm={async () => {
                        let body = {
                          ids: [record.id],
                          checkIsMainOrderId: true,
                        };
                        const data = await postServiceOrderOrderCancel({
                          data: body,
                        });
                        if (data.result === RESPONSE_CODE.SUCCESS) {
                          message.success(data.message);
                          refreshTable();
                        }
                      }}
                    />
                  ) : (
                    ''
                  )}
                </Space>
              </Space.Compact>
            </Flex>
          </Flex>
        </Flex>

        <Flex className="p-0 py-[24px] pl-[23px] pr-[5px] bg-white rounded-b-lg">
          {expandedRowRender(record)}
        </Flex>
      </Flex>
    );
  };

  // 主订单列表
  const mainOrdersColumns: ProColumns<OrderType>[] = MAIN_ORDER_COLUMNS.map(
    (item) => {
      if (item.dataIndex === 'name') {
        return {
          ...item,
          title: <OrderTableHeader />,
          render: (text, record) => {
            return <MainOrderColumnRender record={record} />;
          },
        };
      }
      return item;
    },
  );

  function toolBarRender() {
    let toolBtns = [];

    //导出按钮配置
    const items: MenuProps['items'] = [
      {
        label: '导出已选中订单',
        key: '1',
        onClick: async () => {
          if (selectedItems.length === 0) {
            message.error('请选择订单');
            return;
          }
          let body = { flag: 30, ids: selectedItems };
          exportLoading();
          orderExport('/api/service/order/export', body, exportLoadingDestory);
        },
      },
      {
        label: '导出当前页订单',
        key: '2',
        onClick: async () => {
          if (mainOrderAllItemKeys.length === 0) {
            message.error('当前没有订单');
            return;
          }
          let body = { flag: 20, ids: mainOrderAllItemKeys };
          exportLoading();
          orderExport('/api/service/order/export', body, exportLoadingDestory);
        },
      },
      {
        label: '导出所有订单',
        key: '3',
        onClick: async () => {
          let body = { flag: 10, ids: [] };
          exportLoading();
          orderExport('/api/service/order/export', body, exportLoadingDestory);
        },
      },
      {
        label: '导出当天订单',
        key: '4',
        onClick: async () => {
          let body = { flag: 40, ids: [] };
          exportLoading();
          orderExport('/api/service/order/export', body, exportLoadingDestory);
        },
      },
    ];

    const menuProps = {
      items,
      onClick: () => {},
    };

    if (rolePath?.includes('addOrder')) {
      toolBtns.push(
        <Button
          type="primary"
          key="out"
          onClick={() => {
            setOrderDrawerVisible(true);
            setOrderOptType('add');
          }}
        >
          新增
        </Button>,
      );
    }
    if (rolePath?.includes('importExcel')) {
      toolBtns.push(
        <Button
          type="primary"
          key="out"
          onClick={() => {
            setImportModalVisible(true);
          }}
        >
          导入
        </Button>,
      );
    }

    toolBtns.push(
      <Dropdown menu={menuProps}>
        <Button>
          <Space>
            导出
            <DownOutlined />
          </Space>
        </Button>
      </Dropdown>,
    );

    // toolBtns.push(
    //   <Button
    //     key="show"
    //     onClick={() => {
    //       handleAllExpand();
    //     }}
    //   >
    //     {mainOrderAllItemKeys?.length !== expandedRowKeys.length
    //       ? '一键展开'
    //       : '一键收起'}
    //   </Button>,
    // );

    return toolBtns;
  }

  return (
    <PageContainer
      className="order-page-container"
      header={{
        title: '订单管理',
        extra: [
          <Avatar key="0" style={{ verticalAlign: 'middle' }} size="large">
            {userInfo?.username}
          </Avatar>,
          <Tag key="nickName">{userInfo?.nickName}</Tag>,
          <Dropdown
            key="dropdown"
            trigger={['click']}
            menu={{
              items: [
                {
                  label: '退出登录',
                  key: '1',
                  onClick: () => {
                    localStorage.removeItem('token');
                    history.push('/login');
                  },
                },
                // {
                //   label: '修改密码',
                //   key: '2',
                // },
              ],
            }}
          >
            <Button key="4" style={{ padding: '0 8px' }}>
              <EllipsisOutlined />
            </Button>
          </Dropdown>,
        ],
      }}
    >
      <div id="resizeDiv"></div>
      <ProTable
        id="main-table"
        // tableStyle={{backgroundColor:'red'}}

        actionRef={mainTableRef}
        expandIconColumnIndex={-1}
        columns={mainOrdersColumns}
        rowKey="id"
        pagination={{
          showQuickJumper: true,
          pageSize: pageSize,
          current: currentPage,
          showSizeChanger: true,
          onChange: (page, size) => {
            setPageSize(size);
            setCurrentPage(page);
          },
        }}
        // showHeader={false}
        expandedRowKeys={expandedRowKeys}
        // expandable={{ expandedRowRender }}
        dateFormatter="string"
        options={false}
        headerTitle=""
        search={{
          labelWidth: 'auto',
          // onCollapse: resize,
        }}
        request={async (
          // 第一个参数 params 查询表单和 params 参数的结合
          // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
          params,
          sorter,
          filter,
        ) => {
          const { data } = await postServiceOrderQueryServiceOrder({
            // ...params,
            // FIXME: remove @ts-ignore
            // @ts-ignore
            sorter,
            filter,
            data: params,
          });

          let mainOrderIds = data?.data?.map((d) => d.id);
          if (mainOrderAllItemKeys === undefined) {
            setMainOrderAllItemKeys([]);
          } else {
            setMainOrderAllItemKeys(mainOrderIds);
          }
          setRolePath(data.specialPath);
          handleTableExpand(mainOrderIds);
          return {
            data: data?.data || [],
            total: data?.total || 0,
          };
        }}
        toolBarRender={() => {
          return toolBarRender();
        }}
      />

      {orderDrawerVisible && (
        <OrderDrawer
          data={orderRow}
          subOrders={selectedRows}
          onClose={(isSuccess: boolean) => {
            setOrderDrawerVisible(false);
            setOrderRow({});
            if (isSuccess) {
              refreshTable();
            }
          }}
          orderOptType={orderOptType}
        />
      )}

      {checkVisible && (
        <CheckModal
          setCheckVisible={setCheckVisible}
          data={orderRow}
          subOrders={selectedRows}
          onClose={() => {
            setCheckVisible(false);
            setOrderRow({});
            setSelectedRows({});
            refreshTable();
          }}
        />
      )}

      {notesEditVisible && (
        <OrderNotesEditModal
          setNotesEditVisible={setNotesEditVisible}
          data={orderRow}
          isMianOrder={isMainOrder}
          onClose={() => {
            setNotesEditVisible(false);
            setOrderRow({});
            refreshTable();
          }}
        />
      )}

      {deliverVisible && (
        <DeliverModal
          data={selectedRows}
          isSendProduct={isSendProduct}
          onClose={() => {
            setDeliverVisible(false);
            setOrderRow({});
            setIsSendProduct(false);
            refreshTable();
          }}
        />
      )}

      {financialVisible && (
        <FinancialDrawer
          isEdit={isFinalcialEdit}
          mainOrder={orderRow}
          subOrders={selectedRows}
          onClose={() => {
            setFinancialVisible(false);
            setOrderRow({});
            refreshTable();
          }}
        />
      )}

      {orderPrintVisible && (
        <OrderPrintModal
          mainOrder={orderRow}
          subOrders={selectedRows}
          isRePrint={isRePrintOrder}
          onClose={() => {
            setOrderPrintVisible(false);
            setOrderRow({});
            setIsRePrintOrder(false);
            refreshTable();
          }}
        />
      )}

      {confirmReceiptVisible && (
        <ConfirmReceiptModal
          data={orderRow}
          onClose={() => {
            setConfirmReceiptVisible(false);
            setOrderRow({});
            refreshTable();
          }}
        />
      )}

      {subOrderConfirmReceiptImagesVisible && (
        <SubOrderComfirmReceiptImagesModal
          setVisible={setSubOrderConfirmReceiptImagesVisible}
          onClose={() => {
            setSubOrderConfirmReceiptImagesVisible(false);
          }}
          orderRow={orderRow}
        />
      )}

      {importModalVisible && (
        <ImportModal
          onClose={() => {
            setImportModalVisible(false);
            refreshTable();
          }}
        />
      )}

      {attachmentModalVisible && (
        <AttachmentModal
          data={orderRow}
          onClose={() => {
            setAttachmentModalVisible(false);
            setOrderRow({});
          }}
        />
      )}

      {historyModalVisible && (
        <HistoryModal
          subOrders={selectedRows}
          onClose={() => {
            setHistoryModalVisible(false);
            setSelectedRows({});
          }}
        />
      )}

      {deliverInfoDrawerVisible && (
        <DeliverInfoDrawer
          data={orderRow}
          onClose={() => {
            setDeliverInfoDrawerVisible(false);
            setOrderRow({});
          }}
        />
      )}

      {contextHolder}
    </PageContainer>
  );
};

export default OrderPage;