import {
  MyBetaModalFormProps,
  MyButtons,
  MyModalFormProps,
  renderTextHelper,
} from '@/common';
import { Apis } from '@/gen/Apis';
import { HouseBillsBillStatusEnum, HouseBillsTypeEnum } from '@/gen/Enums';
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') => {
    if (props?.item?.amount && props?.item?.accept_amount) {
      const amount = parseFloat(props?.item?.total_payable_amount || '0');
      const params = {
        amount: amount,
        total_payable_amount: amount,
        bill_ids: [props?.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"
          size="small"
          title={props.title}
          disabled={
            props?.item?.bill_status === HouseBillsBillStatusEnum.Paid.value ||
            props?.item?.bill_status ===
              HouseBillsBillStatusEnum.Cancelled.value
          }
        />
      }
      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?.asset_car_port?.full_name || ''}
                  </ProDescriptions.Item>
                  <ProDescriptions.Item label="费用类型">
                    <renderTextHelper.Tag
                      Enums={HouseBillsTypeEnum}
                      value={props?.item?.type}
                      key="type"
                    />
                  </ProDescriptions.Item>
                  <ProDescriptions.Item label="应收金额">
                    ¥{props?.item?.total_payable_amount || 0}
                  </ProDescriptions.Item>
                  <ProDescriptions.Item label="收款户名" span={2}>
                    {props?.item?.receipt_account?.company_name || ''}
                  </ProDescriptions.Item>
                  <ProDescriptions.Item label="收款账号">
                    {props?.item?.receipt_account?.company_bank || ''}{' '}
                    {props?.item?.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>
            );
          },
        },
      ]}
    />
  );
}
