import { INVOCING_STATUS, PAYEE_OPTIONS } from '@/pages/Order/constant';
import { postServiceInvoiceQueryInvoiceDetail } from '@/services';
import { enumValueToLabel } from '@/utils';
import { formatDate } from '@/utils/time';
import { ActionType, ModalForm, ProCard } from '@ant-design/pro-components';
import {
  Button,
  Descriptions,
  DescriptionsProps,
  Divider,
  Flex,
  Form,
} from 'antd';
import { useEffect, useRef, useState } from 'react';
import { INVOICE_STATUS } from '../../constant';
import '../index.less';
import BankChooseModal from './BankChooseModal';

export default ({ invoiceId, setVisible, onClose }) => {
  const [form] = Form.useForm<{ id: string }>();
  const [bankChooseModalVisible, setBankChooseModalVisible] = useState(false);
  const [invoiceInfo, setInvoiceInfo] = useState({});
  const [relationOrderIds, setRelationOrderIds] = useState([]);
  const [setRelationBankStatements] = useState([]);
  const actionRef = useRef<ActionType>();

  const loadInvoiceData = async () => {
    let res = await postServiceInvoiceQueryInvoiceDetail({
      data: { invoiceId: invoiceId },
    });
    if (res && res.data) {
      setInvoiceInfo(res.data);
      setRelationOrderIds(res.data.mainOrderIds);
      console.log('bs:' + res.data.bankStatementDtos);
      setRelationBankStatements(res.data.bankStatementDtos);
    }
  };

  const showRelationOrders = () => {
    return relationOrderIds?.map((item) => {
      return (
        <>
          <Button
            className="pl-1 pr-0"
            type="link"
            target="_blank"
            href={'/order/order?id=' + item}
          >
            {item}
          </Button>
          <Divider type="vertical" />
        </>
      );
    });
  };

  const items: DescriptionsProps['items'] = [
    {
      key: '1',
      label: '发票号码',
      children: invoiceInfo?.invoiceNumber,
      span: 6,
    },
    {
      key: '2',
      label: '发票类型',
      children: enumValueToLabel(invoiceInfo?.invoiceStatus, INVOCING_STATUS),
      span: 6,
    },
    {
      key: '3',
      label: '状态',
      children: enumValueToLabel(invoiceInfo?.status, INVOICE_STATUS),
      span: 4,
    },
    {
      key: '4',
      label: '购买方',
      children: invoiceInfo?.purchaser,
      span: 8,
    },
    {
      key: '5',
      label: '收款单位',
      children: enumValueToLabel(invoiceInfo?.payee, PAYEE_OPTIONS),
      span: 12,
    },
    {
      key: '6',
      label: '联系人',
      children: invoiceInfo?.contacts,
      span: 4,
    },
    {
      key: '7',
      label: '销售',
      children: invoiceInfo?.sale,
      span: 8,
    },

    {
      key: '9',
      label: '开票日期',
      children: formatDate(invoiceInfo?.invoicingTime),
      span: 12,
    },
    {
      key: '10',
      label: '收款时间',
      children: formatDate(invoiceInfo?.collectionTime),
      span: 4,
    },
    {
      key: '8',
      label: '金额',
      children: invoiceInfo?.money,
      span: 10,
    },
    {
      key: '11',
      label: '备注',
      children: invoiceInfo?.notes,
      span: 24,
    },
  ];

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

  return (
    <>
      <ModalForm<{
        id: string;
      }>
        className="invoice-detail"
        open
        width="80%"
        title="发票详情"
        form={form}
        autoFocusFirstInput
        modalProps={{
          okText: '确定',
          cancelText: '返回',
          destroyOnClose: true,
          onCancel: () => {
            setVisible(false);
            onClose();
          },
        }}
        submitter={{
          render: (props, defaultDoms) => {
            return [defaultDoms[0]];
          },
        }}
        onFinish={async () => {
          onClose();
        }}
        onOpenChange={setVisible}
      >
        <Divider orientation="left" plain>
          发票信息
        </Divider>

        <Descriptions
          bordered
          column={24}
          size="small"
          title=""
          items={items}
        />

        <Divider orientation="left" plain>
          订单号
        </Divider>

        <ProCard bordered style={{}}>
          <Flex>
            <div>{showRelationOrders()}</div>
          </Flex>
        </ProCard>

        <Divider plain></Divider>
      </ModalForm>

      {bankChooseModalVisible ? (
        <BankChooseModal
          loadInvoiceData={loadInvoiceData}
          setVisible={setBankChooseModalVisible}
          invoiceId={invoiceId}
          onClose={() => {
            setBankChooseModalVisible(false);
            loadInvoiceData();
            actionRef.current?.reload();
          }}
        ></BankChooseModal>
      ) : (
        ''
      )}
    </>
  );
};