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

export default ({ subOrders, 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 },
    });
    setData(res.data);
    setLoading(false);
  };

  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]">
                        -【{subOrders[i - 1].productName}】
                      </span>
                    </div>

                    <Flex vertical>
                      {item.historySubOrderRecordDto?.map((history) => {
                        return (
                          <div className="py-1" key={history.id}>
                            <span className="pr-2 text-[#5E5E5E]">
                              {formatDateTime(history.createTime)}
                            </span>
                            <span className="text-[#3b83e5]">
                              {history.createByName}
                            </span>
                            进行了
                            <span className="text-[#3b83e5]">
                              {HISTORY_OPT_TYPE.get(history.record)}
                            </span>
                            ，
                            {enumValueToLabel(
                              history.status,
                              ORDER_STATUS_OPTIONS,
                            ) === undefined
                              ? '子订单开票状态为'
                              : '子订单状态为'}
                            ：
                            <span className="text-[#3b83e5]">
                              {enumValueToLabel(
                                history.status,
                                ORDER_STATUS_OPTIONS,
                              ) === undefined
                                ? enumValueToLabel(
                                    history.status,
                                    FINANCIAL_STATUS_OPTIONS,
                                  )
                                : enumValueToLabel(
                                    history.status,
                                    ORDER_STATUS_OPTIONS,
                                  )}
                            </span>
                          </div>
                        );
                      })}
                    </Flex>
                  </Flex>
                </Col>
              );
            })}
          </Row>
          {data?.length <= 0 ? (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          ) : (
            ''
          )}
        </Spin>
      </Modal>
    </>
  );
};