import ButtonConfirm from '@/components/ButtomConfirm';
import EllipsisDiv from '@/components/Div/EllipsisDiv';
import { RESPONSE_CODE } from '@/constants/enum';
import { INVOCING_STATUS, PAYEE_OPTIONS } from '@/pages/Order/constant';
import {
  postServiceInvoiceCancelInvoiceAndBankStatement,
  postServiceInvoiceQueryInvoiceDetail,
} from '@/services';
import { enumValueToLabel, formatDateTime } from '@/utils';
import { formatDate } from '@/utils/time';
import { PlusOutlined } from '@ant-design/icons';
import {
  ActionType,
  ModalForm,
  ProCard,
  ProTable,
} from '@ant-design/pro-components';
import {
  Button,
  Descriptions,
  DescriptionsProps,
  Divider,
  Flex,
  Form,
  message,
} from 'antd';
import { useEffect, useRef, useState } from 'react';
import { BANK_STATEMENT_COLUMNS, 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 [relationBankStatements, 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?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,
    },
  ];

  const getTableCellText = (target: any) => {
    if (!target) {
      return '';
    }

    if (target.props) {
      return target.props.text;
    }

    return target;
  };

  /**
   * 加载表格的各个列格式
   */
  const bankStatementColumnsInit = () => {
    let columns = BANK_STATEMENT_COLUMNS.map((item) => {
      let newItem = { ...item };
      let dataIndex = item.dataIndex;
      let dataType = item.valueType;

      newItem.render = (text, record) => {
        let textValue = record[dataIndex];

        if (dataType === 'date') {
          textValue = formatDate(textValue);
        }

        if (dataType === 'dateTime') {
          textValue = formatDateTime(textValue);
        }

        if (dataType === 'money') {
          textValue = '￥' + textValue;
        }

        switch (dataIndex) {
          case 'invoiceStatus':
            return (
              <EllipsisDiv
                text={enumValueToLabel(
                  getTableCellText(textValue),
                  INVOCING_STATUS,
                )}
              />
            );

          case 'status':
            return (
              <EllipsisDiv
                text={enumValueToLabel(
                  getTableCellText(textValue),
                  INVOICE_STATUS,
                )}
              />
            );

          case 'payee':
            return (
              <EllipsisDiv
                text={enumValueToLabel(
                  getTableCellText(textValue),
                  PAYEE_OPTIONS,
                )}
              />
            );

          default:
            return <EllipsisDiv text={getTableCellText(textValue)} />;
        }
      };

      return newItem;
    });

    columns.push({
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      width: 70,
      render: (text, record) => {
        let optBtns = [];
        if (invoiceInfo?.status === 'VERIFIED') {
          return [];
        }

        optBtns.push(
          <ButtonConfirm
            key="delete"
            className="p-0"
            title={'确认删除此项吗？'}
            text="删除"
            onConfirm={async () => {
              let res = await postServiceInvoiceCancelInvoiceAndBankStatement({
                data: {
                  invoiceId: invoiceId,
                  cancelId: [record.id],
                },
              });
              if (res.result === RESPONSE_CODE.SUCCESS) {
                message.success(res.message);
                loadInvoiceData();
              }
            }}
          />,
        );
        return optBtns;
      },
    });

    return columns;
  };

  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>

        <ProTable
          columns={bankStatementColumnsInit()}
          actionRef={actionRef}
          cardBordered
          pagination={{
            pageSize: 10,
          }}
          dataSource={relationBankStatements}
          columnsState={{
            persistenceKey: 'pro-table-singe-demos',
            persistenceType: 'localStorage',
            defaultValue: {
              option: { fixed: 'right', disable: true },
            },
            onChange(value) {
              console.log('value: ', value);
            },
          }}
          rowKey="id"
          search={false}
          options={{
            setting: {
              listsHeight: 400,
            },
            reload: false,
          }}
          form={{
            // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
            syncToUrl: (values, type) => {
              if (type === 'get') {
                return {
                  ...values,
                  created_at: [values.startTime, values.endTime],
                };
              }
              return values;
            },
          }}
          dateFormatter="string"
          headerTitle="银行流水"
          scroll={{ x: 1400, y: 360 }}
          toolBarRender={() => [
            <Button
              key="button"
              icon={<PlusOutlined />}
              onClick={() => {
                setBankChooseModalVisible(true);
              }}
              hidden={invoiceInfo?.status === 'VERIFIED'}
              type="primary"
            >
              添加
            </Button>,
          ]}
        />
      </ModalForm>

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