import { MyModalFormProps, MyPageContainer } from '@/common';
import { Apis } from '@/gen/Apis';
import {
  ContractBillsCostTypeEnum,
  ContractsSettlementModeEnum,
  ContractTemplatesIncomeExpenseTypeEnum,
  HouseOrdersPaymentMethodEnum,
} from '@/gen/Enums';
import { BetaSchemaForm, ProCard } from '@ant-design/pro-components';
import { useNavigate, useSearchParams } from '@umijs/max';
import { Form, Image, Space } from 'antd';
import { useEffect, useState } from 'react';
import Review from '../modals/Review';

export default function Index({ title = '交易登记审核' }) {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id') ?? 0;
  const [data, setShow] = useState<any>({});

  const loadShow = () => {
    Apis.Contract.ContractBillPayments.Show({ id: Number(id) }).then((res) => {
      setShow(res?.data);
    });
  };
  const totalBillSeparableAmount = () => {
    return parseFloat(
      (
        parseFloat(data?.contract?.total_amount) -
        parseFloat(data?.contract?.total_bill_amount)
      ).toFixed(2),
    );
  };
  useEffect(() => {
    loadShow();
  }, [id]);

  return (
    <MyPageContainer
      title={
        <Space
          style={{ cursor: 'pointer' }}
          onClick={() => {
            navigate(-1);
          }}
        >
          {/* <LeftCircleOutlined size={34} /> */}
          {title}
        </Space>
      }
      enableTabs={false}
      tabKey="charge-standards-create"
      tabLabel={title}
    >
      <ProCard>
        <div style={{ width: 900, minHeight: '83vh', margin: '0 auto' }}>
          <BetaSchemaForm<ApiTypes.Contract.Contracts.Update>
            {...MyModalFormProps.props}
            title={title}
            // 基础表单
            layoutType="Form"
            labelCol={{ span: 24 }}
            wrapperCol={{ span: 24 }}
            labelAlign="left"
            width="900px"
            form={form}
            submitter={{
              render: () => {
                return data?.id ? [<Review item={data} key="review" />] : [];
              },
            }}
            columns={[
              {
                colProps: { span: 24 },
                renderFormItem: () => {
                  return (
                    <ProCard
                      bordered
                      type="inner"
                      title={`合同：${
                        data?.contract?.name ||
                        '没有合同信息，或被删除，请联系管理员'
                      }`}
                      headerBordered
                    >
                      <Space size="middle" direction="vertical">
                        <div>
                          收支类型：
                          {
                            ContractTemplatesIncomeExpenseTypeEnum[
                              data?.contract
                                ?.income_expense_type as keyof typeof ContractTemplatesIncomeExpenseTypeEnum
                            ]?.text
                          }
                        </div>
                        <div>
                          结算模式：
                          {
                            ContractsSettlementModeEnum[
                              data?.contract
                                ?.settlement_mode as keyof typeof ContractsSettlementModeEnum
                            ]?.text
                          }
                        </div>
                        <div>合同总金额： ¥{data?.contract?.total_amount}</div>
                        <div>
                          已生成账单： ¥{data?.contract?.total_bill_amount}
                        </div>
                        {data?.contract?.settlement_mode ===
                          'LumpSumContract' && (
                          <div style={{ color: 'red' }}>
                            可拆分金额： ¥{totalBillSeparableAmount()}
                          </div>
                        )}
                      </Space>
                    </ProCard>
                  );
                },
              },
              {
                colProps: { span: 24 },
                renderFormItem: () => {
                  return (
                    <ProCard
                      bordered
                      type="inner"
                      title="账单信息"
                      headerBordered
                    >
                      <Space size="middle" direction="vertical">
                        <div>
                          月份：{data?.contract_bill?.year}年
                          {data?.contract_bill?.month}月
                        </div>
                        <div>账单金额：¥{data?.contract_bill?.amount}</div>
                        <div>期数：{data?.contract_bill?.period_num}期</div>
                        <div>
                          费用类型：
                          {
                            ContractBillsCostTypeEnum[
                              data?.contract_bill
                                ?.cost_type as keyof typeof ContractBillsCostTypeEnum
                            ]?.text
                          }
                        </div>
                        <div>备注：{data?.contract_bill?.remark}</div>
                      </Space>
                    </ProCard>
                  );
                },
              },
              {
                colProps: { span: 24 },
                renderFormItem: () => {
                  return (
                    <ProCard
                      bordered
                      type="inner"
                      title="支付信息"
                      headerBordered
                    >
                      <Space size="middle" direction="vertical">
                        <div>
                          支付方式：
                          {
                            HouseOrdersPaymentMethodEnum[
                              data?.payment_method as keyof typeof HouseOrdersPaymentMethodEnum
                            ]?.text
                          }
                        </div>
                        <div style={{ color: 'red' }}>
                          支付金额：¥{data?.amount}
                        </div>
                        {/* <div>支付单号：{data?.payment_no}</div> */}
                        <div>交易流水号：{data?.accept_serial_number}</div>
                        <div>支付时间：{data?.paid_time}</div>
                        <div>收款账号名称：{data?.accept_account_name}</div>
                        <div>收款银行：{data?.accept_bank_name}</div>
                        <div>收款账号：{data?.accept_account_number}</div>
                        <div>备注：{data?.remark}</div>
                        <div>支付凭证：</div>
                        <div>
                          <Image.PreviewGroup>
                            {data?.pay_certificate?.map(
                              (item: any, index: number) => (
                                <Image
                                  key={`img_${index}`}
                                  height={100}
                                  src={item?.url}
                                />
                              ),
                            )}
                          </Image.PreviewGroup>
                        </div>
                      </Space>
                    </ProCard>
                  );
                },
              },
            ]}
          />
        </div>
      </ProCard>
    </MyPageContainer>
  );
}
