import { MyBetaModalFormProps } from '@/common';
import BIllInfo from '@/pages/bills/temporary/modals/BIllInfo';

import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { Space } from 'antd';

export default function BillUpdateInfo(props: MyBetaModalFormProps) {
  const originalData = props?.item?.model?.original_data;
  const newData = props?.item?.model?.new_data;

  // 格式化金额
  const formatAmount = (amount: any) => {
    if (!amount || amount === '-') return '-';
    return parseFloat(amount).toFixed(2) + ' 元';
  };

  // 渲染数据项
  const renderDataItems = (data: any) => (
    <ProDescriptions size="small" column={1}>
      <ProDescriptions.Item label="账单金额">
        {formatAmount(data?.amount)}
      </ProDescriptions.Item>
      <ProDescriptions.Item label="账单月份">
        {data?.year}-{String(data?.month).padStart(2, '0')}
      </ProDescriptions.Item>
      <ProDescriptions.Item label="备注">
        {data?.remark || '-'}
      </ProDescriptions.Item>
    </ProDescriptions>
  );

  return (
    <>
      <Space direction="vertical" style={{ width: '100%' }}>
        <ProCard title="基本信息" size="small">
          <ProDescriptions size="small" column={2}>
            <ProDescriptions.Item label="申请事项">
              {props?.item?.title || '-'}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="关联原账单">
              <BIllInfo
                item={{
                  id: props?.item?.model?.model_id,
                  type: 'link',
                }}
                title="查看账单"
              />
            </ProDescriptions.Item>
            <ProDescriptions.Item label="申请人">
              {props?.item?.applicant_name || '-'}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="申请时间">
              {props?.item?.created_at || '-'}
            </ProDescriptions.Item>
          </ProDescriptions>
        </ProCard>

        <ProCard title="修改内容对比" size="small" split="vertical">
          <ProCard title="修改前" type="inner" bordered headerBordered>
            {renderDataItems(originalData)}
          </ProCard>
          <ProCard title="修改后" type="inner" bordered headerBordered>
            {renderDataItems(newData)}
          </ProCard>
        </ProCard>
      </Space>
    </>
  );
}
