import { MyBetaModalFormProps, MyButtons } from '@/common';
import { Apis } from '@/gen/Apis';
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { useNavigate } from '@umijs/max';
import { Space } from 'antd';
import { useEffect, useState } from 'react';

export default function Info(props: MyBetaModalFormProps) {
  const [getShow, setDataShow] = useState<any>({});
  const navigate = useNavigate();

  useEffect(() => {
    Apis.Bill.HouseBills.SummaryShow({
      asset_houses_id: props?.item?.id,
    })
      .then((res) => {
        console.log(res);
        setDataShow(JSON.parse(JSON.stringify(res?.data)));
        return false;
      })
      .catch(() => false);
  }, [props?.item?.id]);

  return (
    <ProCard extra={props.extra}>
      <ProDescriptions bordered column={3}>
        <ProDescriptions.Item label="账单金额">
          {getShow?.payable_amount_sum || '-'}
        </ProDescriptions.Item>
        <ProDescriptions.Item label="滞纳金">
          {getShow?.late_fee_sum || '-'}
        </ProDescriptions.Item>
        <ProDescriptions.Item label="优惠金额">
          {getShow?.discount_amount_sum || '-'}
        </ProDescriptions.Item>
        <ProDescriptions.Item label="应付金额">
          <Space>
            {getShow?.total_payable_sum || ''}
            {getShow?.payable_amount_sum ? (
              <MyButtons.View
                title="查看账单明细"
                size="small"
                type="link"
                onClick={() => {
                  navigate(`/bills/summary/show/${props?.item?.id || 0}`);
                }}
              />
            ) : (
              '无账单'
            )}
          </Space>
        </ProDescriptions.Item>
      </ProDescriptions>
    </ProCard>
  );
}