import { MyBetaModalFormProps, MyButtons, MyModalFormProps } from '@/common';
import { Apis } from '@/gen/Apis';
import { BetaSchemaForm, ProDescriptions } from '@ant-design/pro-components';
import { Form, QRCode, Tabs } from 'antd';
import { useState } from 'react';

export default function ShowQrCode(props: MyBetaModalFormProps) {
  const [form] = Form.useForm();
  const [activeTab, setActiveTab] = useState<string>('wechat');
  const [wechatQrCode, setWechatQrCode] = useState<string>('');
  const [alipayQrCode, setAlipayQrCode] = useState<string>('');

  const fetchQrCode = (type: 'wechat' | 'alipay') => {
    let total_amount = 0;
    if (props?.item?.list?.length) {
      props?.item?.list?.forEach((item: any) => {
        total_amount += Number(item?.total_payable_amount || '0') || 0;
      });
      const params = {
        amount: total_amount,
        total_payable_amount: total_amount,
        bill_ids: props?.item?.list?.map((item: any) => item.id) || [],
      };

      if (type === 'wechat') {
        Apis.HouseOrder.HouseOrders.GetPayCode(params).then((res: any) => {
          setWechatQrCode(res?.data?.qr_code || '');
        });
      } else {
        Apis.HouseOrder.HouseOrders.AlipayQrCode(params).then((res: any) => {
          setAlipayQrCode(res?.data?.payinfo || '');
        });
      }
    }
  };

  return (
    <BetaSchemaForm<ApiTypes.Refund.Refunds.Complete>
      {...MyModalFormProps.props}
      title={props.title}
      width="500px"
      wrapperCol={{ span: 24 }}
      trigger={
        <MyButtons.Default
          type="primary"
          disabled={!props?.item?.list?.length}
          size="middle"
          title={props.title}
        />
      }
      form={form}
      submitter={false}
      onOpenChange={(open: any) => {
        if (open) {
          setWechatQrCode('');
          setAlipayQrCode('');
          setActiveTab('wechat');
          fetchQrCode('wechat');
        }
      }}
      columns={[
        {
          title: '',
          colProps: { span: 24 },
          key: 'qrcode',
          renderFormItem() {
            return (
              <div style={{ textAlign: 'left' }}>
                <ProDescriptions
                  column={2}
                  size="small"
                  bordered
                  style={{ marginBottom: '16px' }}
                >
                  <ProDescriptions.Item label="关联房屋/车位" span={2}>
                    {props?.item?.asset_houses_id
                      ? props?.item?.asset_house?.full_name || ''
                      : props?.item?.full_name || ''}
                  </ProDescriptions.Item>
                  <ProDescriptions.Item label="应收金额" span={2}>
                    ¥
                    {props?.item?.list
                      ?.reduce(
                        (sum: number, item: any) =>
                          sum + Number(item?.total_payable_amount || 0),
                        0,
                      )
                      .toFixed(2) || 0}
                  </ProDescriptions.Item>
                  <ProDescriptions.Item label="收款户名" span={2}>
                    {props?.item?.list?.[0]?.receipt_account?.company_name ||
                      ''}
                  </ProDescriptions.Item>
                  <ProDescriptions.Item label="收款账号">
                    {props?.item?.list?.[0]?.receipt_account?.company_bank ||
                      ''}{' '}
                    {props?.item?.list?.[0]?.receipt_account?.company_account ||
                      ''}
                  </ProDescriptions.Item>
                </ProDescriptions>
                <Tabs
                  activeKey={activeTab}
                  onChange={(key) => {
                    setActiveTab(key);
                    if (key === 'wechat' && !wechatQrCode) {
                      fetchQrCode('wechat');
                    } else if (key === 'alipay' && !alipayQrCode) {
                      fetchQrCode('alipay');
                    }
                  }}
                  items={[
                    {
                      key: 'wechat',
                      label: '微信支付',
                      children: (
                        <div
                          style={{
                            display: 'flex',
                            padding: '20px 0',
                            justifyContent: 'center',
                          }}
                        >
                          {wechatQrCode ? (
                            <img
                              style={{ width: '220px', height: '220px' }}
                              src={wechatQrCode}
                              alt="微信支付二维码"
                            />
                          ) : (
                            <div
                              style={{
                                width: '220px',
                                height: '220px',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                              }}
                            >
                              加载中...
                            </div>
                          )}
                        </div>
                      ),
                    },
                    {
                      key: 'alipay',
                      label: '支付宝',
                      children: (
                        <div
                          style={{
                            display: 'flex',
                            padding: '20px 0',
                            justifyContent: 'center',
                          }}
                        >
                          {alipayQrCode ? (
                            <QRCode value={alipayQrCode} size={220} />
                          ) : (
                            <div
                              style={{
                                width: '220px',
                                height: '220px',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                              }}
                            >
                              加载中...
                            </div>
                          )}
                        </div>
                      ),
                    },
                  ]}
                />
              </div>
            );
          },
        },
      ]}
    />
  );
}
