import { postServiceOrderQueryHistoryOrderRecord } from '@/services';
import { formatDateTime } from '@/utils';
import { Button, Col, Empty, Flex, Modal, Row, Spin } from 'antd';
import { useEffect, useState } from 'react';

export default ({ subOrders, isCancelledOrder, onClose }) => {
  let subOrderIds = subOrders?.map((subOrder: any) => {
    return subOrder.id;
  });

  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  let i = 0;

  const handleOk = () => {
    onClose();
  };

  /**
   * 获取历史记录
   */
  const getHistory = async () => {
    let res = await postServiceOrderQueryHistoryOrderRecord({
      data: { ids: subOrderIds, isDeleteQueryOrder: isCancelledOrder },
    });
    setData(res.data);
    setLoading(false);
  };

  const getRecord = (history: any) => {
    let record = [];
    record.push(
      <span className="pr-2 text-[#5E5E5E]">
        {formatDateTime(history.createTime)}
      </span>,
    );

    record.push(<span className="text-[#3b83e5]">{history.createByName}</span>);

    record.push(<span>进行了</span>);

    // let label = enumValueToLabel(history.status, ORDER_STATUS_OPTIONS);

    // if (
    //   history.record !== 'INVOICING' && history.record !== 'order-change-normal' && history.record !== 'order-change-normal-CHECK' &&
    //   history.record?.indexOf(':') === -1 &&
    //   label !== undefined &&
    //   label !== ''
    // ) {
    //   record.push(
    //     <>
    //       <span>，订单状态为：</span>
    //       <span className="text-[#3b83e5]">{label}</span>
    //     </>,
    //   );
    // }

    if (history.record?.indexOf(':') !== -1) {
      let values = history.record?.split(':');
      let type = values[0];
      let target = values[1];
      if (target === 'null') {
        target = '未指定';
      }
      //采购转发
      if (type === 'PROCURE_CONVERT_PROCURE') {
        record.push(
          <>
            <span>采购转发，{history.createByName}将订单转发给了</span>
            <span className="text-[#3b83e5]">{target}</span>
          </>,
        );
      }
    } else {
      record.push(
        <span className="text-[#3b83e5]">
          {history.recordText +
            (history.record === 'INVOICING'
              ? '(开票号码：' + history.invoiceNumber + ')'
              : '')}
        </span>,
      );
    }

    if (history.notes !== null) {
      record.push(<span className="pl-1">{'备注：' + history.notes}</span>);
    }

    if (history.description !== null) {
      record.push(
        <span className="pl-1">{'描述：' + history.description}</span>,
      );
    }

    return record;
  };

  useEffect(() => {
    getHistory();
  }, []);

  const handleCancel = () => {
    onClose();
  };

  return (
    <>
      <Modal
        title="订单历史记录"
        open
        width={650}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={() => (
          <>
            <Button onClick={handleCancel}>返回</Button>
          </>
        )}
      >
        <Spin tip="加载中" spinning={loading}>
          <Row className="max-h-[500px] overflow-auto" gutter={[0, 14]}>
            {data.map((item) => {
              return (
                <Col span={24} key={i}>
                  <Flex vertical>
                    <div>
                      <span className="py-2 text-[#5E5E5E]">
                        {'商品' + ++i}
                      </span>
                      <span className="text-[#8C8C8C]">
                        -【{item.productName}】
                      </span>
                    </div>

                    <Flex vertical>
                      {item.historySubOrderRecordDto?.map((history) => {
                        return (
                          <div className="py-1" key={history.id}>
                            {getRecord(history)}
                          </div>
                        );
                      })}
                    </Flex>
                  </Flex>
                </Col>
              );
            })}
          </Row>
          {data?.length <= 0 ? (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          ) : (
            ''
          )}
        </Spin>
      </Modal>
    </>
  );
};