import { MyBetaModalFormProps } from '@/common';
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { useNavigate } from '@umijs/max';
import { Space } from 'antd';

export default function info(props: MyBetaModalFormProps) {
  const { item } = props;
  const navigate = useNavigate();

  return (
    <Space direction="vertical" style={{ width: '100%' }}>
      <ProCard title="基本信息">
        <ProDescriptions bordered>
          <ProDescriptions.Item label="房屋名称" span={2}>
            <Space>
              <span>
                【{item?.asset_houses_id || '-'}】
                {item?.asset_house?.full_name || '-'}
              </span>
              <a
                onClick={() => {
                  navigate(`/customer/archive/show/${item?.asset_houses_id}`);
                }}
                target="_blank"
              >
                查看房屋档案
              </a>
            </Space>
          </ProDescriptions.Item>
          <ProDescriptions.Item label="应收金额">
            {item?.total_payable_sum || '-'}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="账单金额">
            {item?.payable_amount_sum || '-'}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="滞纳金">
            {item?.late_fee_sum || '-'}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="优惠金额">
            {item?.discount_amount_sum || '-'}
          </ProDescriptions.Item>
        </ProDescriptions>
      </ProCard>
    </Space>
  );
}
