import { MyBetaModalFormProps, renderTextHelper } from '@/common';
import { MyModal } from '@/components/MyModal';
import { Apis } from '@/gen/Apis';
import {
  BillPaymentsTypeEnum,
  HouseOrdersPaymentMethodEnum,
} from '@/gen/Enums';
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { Image as AntImage, Space, Spin } from 'antd';
import { useState } from 'react';

export default function BillInfo(props: MyBetaModalFormProps) {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<any>({});

  return (
    <MyModal
      title={props.title || '查看账单'}
      type={props.item?.type || 'primary'}
      width="600px"
      onOpen={() => {
        if (props?.item?.id) {
          setLoading(true);
          Apis.Bill.Bills.Show({ id: props.item.id })
            .then((res) => {
              setData(res?.data || {});
            })
            .finally(() => {
              setLoading(false);
            });
        }
      }}
      node={
        <Space direction="vertical" style={{ width: '100%' }}>
          <ProCard extra={props.extra}>
            <Spin spinning={loading}>
              <ProDescriptions column={2}>
                {/* 项目相关信息 */}
                <ProDescriptions.Item label="项目名称" span={2}>
                  {data?.asset_project?.name || ''}
                </ProDescriptions.Item>

                {/* 账单基本信息 */}
                <ProDescriptions.Item label="账单月份">
                  {data?.year || ''}-{data?.month || ''}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="费用类型">
                  <renderTextHelper.Tag
                    Enums={BillPaymentsTypeEnum}
                    value={data?.type}
                    key="type"
                  />
                </ProDescriptions.Item>
                <ProDescriptions.Item label="账单金额">
                  {data?.amount || 0} 元
                </ProDescriptions.Item>
                <ProDescriptions.Item label="应收金额">
                  {data?.mount || 0} 元
                </ProDescriptions.Item>
                <ProDescriptions.Item label="账单月份" span={2}>
                  {data?.year || ''}-{data?.month || ''}
                </ProDescriptions.Item>
                {/* 其他信息 */}
                <ProDescriptions.Item label="收款账户" span={2}>
                  {data?.receipt_account?.company_name || ''} |{' '}
                  {data?.receipt_account?.company_bank || ''} |{' '}
                  {data?.receipt_account?.company_account || ''}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="账单备注" span={3}>
                  {data?.remark || ''}
                </ProDescriptions.Item>
                {/* 收款信息 */}
                <ProDescriptions.Item label="收款金额">
                  ¥ {data?.bill_payment?.amount || '-'} 元
                </ProDescriptions.Item>
                <ProDescriptions.Item label="收款方式">
                  {renderTextHelper.Tag({
                    Enums: HouseOrdersPaymentMethodEnum,
                    value: data?.bill_payment?.payment_method,
                  }) || '-'}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="收款日期">
                  {data?.bill_payment?.paid_time?.slice(0, 10) || '-'}
                </ProDescriptions.Item>

                <ProDescriptions.Item label="收款人">
                  {data?.reconciliation_person || '-'}-
                  {data?.reconciliation_person_phone || '-'}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="收款备注" span={3}>
                  {data?.bill_payment?.remark || '-'}
                </ProDescriptions.Item>
                {data?.bill_payment?.pay_certificate?.length > 0 && (
                  <ProDescriptions.Item label="收款凭证" span={2}>
                    <AntImage.PreviewGroup>
                      {data?.bill_payment?.pay_certificate?.map((img: any) => (
                        <AntImage
                          key={img.uid}
                          height={30}
                          src={img.url}
                          style={{ marginRight: 12 }}
                        />
                      ))}
                    </AntImage.PreviewGroup>
                  </ProDescriptions.Item>
                )}
              </ProDescriptions>
            </Spin>
          </ProCard>
        </Space>
      }
    />
  );
}
