import React, { useEffect, useState } from '@alipay/bigfish/react';
import { Button, Checkbox, Input, Tooltip, Form } from '@alipay/bigfish/antd';
import { DesktopOutlined, MobileOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import styles from './index.less';
import { queryIndexInfo, queryFlowNodeData, submit } from '@/services/payment';
// import LoadingButton from '@alipay/loading-button';

import dispatchRoute from '@/services/dispatchRoute';
import { history } from '@alipay/bigfish';
import { BKEANK_SSOMODEL_INDEX } from '@/constants';
import { parse, stringify } from '@alipay/bigfish/util/query-string';

const Payment = () => {
  // 验证金额
  // const [verifyAmount, setverifyAmount] = useState<any>('');
  const [flowId, setFlowId] = useState<string>('');
  const [flowType, setFlowType] = useState<string>('');
  const [form] = Form.useForm();
  // 次数
  const [count, setcount] = useState(2);
  // 文字切换
  const [flag, setflag] = useState(true);
  const [checkbox, setcheckbox] = useState(false);
  // const [maxLength, setmaxLength] = useState([])
  // display none
  const [check, setcheck] = useState(true);
  //
  const [buttonfFlag, setbuttonfFlag] = useState(true);
  const [buttonfFlag1, setbuttonfFlag1] = useState(true);
  const [buttonfFlag2, setbuttonfFlag2] = useState(true);
  const [buttonfFlag3, setbuttonfFlag3] = useState(true);

  const [maxlength] = useState(1);
  // 卡号后四位
  const [cardNmuber, setcardNmuber] = useState('');
  // 重新决定跳转
  const decidePage = async () => {
    const data = await queryIndexInfo();
    if (!data) return;
    const { useNewFlow, hasOpenedAccount, currentNode, flowStatus, settleOpenFlowId } = data;
    if (!useNewFlow || hasOpenedAccount) {
      const parsedParams = parse(window.location.href.split('?')[1] || '');
      history.replace(`${BKEANK_SSOMODEL_INDEX}?${stringify(parsedParams)}`);
      return;
    }
    // debugger
    dispatchRoute(currentNode, flowStatus, settleOpenFlowId);
  };
  // 初始化验证数
  async function init() {
    const data = await queryIndexInfo(); // 流程
    if (!data) return;

    setFlowId(data?.flowId || '');
    setFlowType(data?.flowType || '');
    const result = await queryFlowNodeData({
      flowId: data?.flowId || '',
      flowType: data?.flowType || '',
    });
    if (!result) return;
    const flowNodeData = JSON.parse(result?.[0]?.flowNodeData || '{}'); // 返回的闫增次数
    const card = result?.[0]?.selectBindBankCard || '33300414'; // 返回的卡号
    setcardNmuber(card.substring(card.length - 4));

    // setCheckAmountCount(Number(flowNodeData.checkAmountCount) || 0);
    if (Number(flowNodeData.checkAmountCount) >= 2) {
      decidePage();
    }
  }
  // 点击验证回调
  async function confirmPayment() {
    setcheck(false);
    const verifyamount = `${form.getFieldsValue().input1}.${form.getFieldsValue().input2}${
      form.getFieldsValue().input3
    }`;
    const { success } = await submit({ verifyamount, flowId, flowType });
    setcheck(true);
    // debugger
    if (success) {
      // 成功
      decidePage();
    } else if (count - 1 === 0) {
      // 失败 次数-1 如果没次数 直接回首页
      decidePage();
    } else {
      // 还有次数
      setcount(count - 1);
      setflag(false);
      await init();
    }
  }

  // 验证码光标后移
  const handleInputValue = (e: React.ChangeEvent<HTMLInputElement>, type: string) => {
    const input = document.getElementsByTagName('input');
    const { value = '' } = e.target;
    if (type === 'A') {
      if (value) input[1].focus();
      if (e.target.value.length > 0) {
        setbuttonfFlag1(false);
      } else if (e.target.value.length === 0) {
        setbuttonfFlag1(true);
      }
    } else if (type === 'B') {
      if (value) input[2].focus();
      if (e.target.value.length > 0) {
        setbuttonfFlag2(false);
      } else if (e.target.value.length === 0) {
        setbuttonfFlag2(true);
      }
    } else if (type === 'C') {
      if (e.target.value.length > 0) {
        setbuttonfFlag3(false);
      } else if (e.target.value.length === 0) {
        setbuttonfFlag3(true);
      }
    }
  };
  // //删除验证码
  // const handleDel = (e: { target: { value: string | any[]; }; keyCode: number; }) => {
  //   console.log(e.target.value)
  //   const BACK_SPACE = 8;
  //   const isBackSpaceKey = e.keyCode === BACK_SPACE;
  //   if (isBackSpaceKey && e.target.value.length === 0) {
  //     let previous = e.target;
  //     console.log(e.target)
  //     previous = previous.previousElementSibling;
  //     while (previous) {
  //       if (previous === null) break;
  //       if (previous.tagName.toLowerCase() === "input") {
  //         console.log(previous)
  //         previous.focus();
  //         break;
  //       }
  //     }
  //   }
  // };

  useEffect(() => {
    init();
    setcount(2);
  }, []);
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
  return (
    <div className="payment">
      <div className={styles.bigbox} style={{ display: check ? 'none' : 'block' }}>
        <div className={styles.whitebox}>
          <div className={styles.banklogo}>
            <div className={styles.bankround}></div>
            <div className={styles.span}>处理中</div>
          </div>
          <div className={styles.logo}>
            <img
              src="https://gw.alipayobjects.com/zos/bmw-prod/9a7e4265-aed8-4db2-a63d-d3cd410051ea.ico"
              alt=""
            />
          </div>
        </div>
      </div>
      <div
        className="toppayment"
        style={{ background: '#F5F5F5', display: check ? 'block' : 'none' }}
      >
        <div className={styles.middle}>
          <div style={{ paddingTop: '24px' }} className={styles.h3font}>
            <span>请完成收款验证</span>
          </div>
          <div style={{ paddingTop: '24px' }} className={styles.paymentspan}>
            <p style={{ paddingTop: '12px', color: '#8B8B8B' }}>
              网商银行于
              <span className={styles.orange}>
                {new Date().getFullYear()}年{new Date().getMonth() + 1}月{new Date().getDate()}
              </span>
              日向下述账户汇入一笔2元以下的资金，请查询您的
              <span className={styles.orange}>网商银行企业账户</span>
              <span className={styles.orange}>(尾号{cardNmuber})</span>查询金额并填写到本页面。
            </p>
          </div>
          <Form
            form={form}
            name="basic"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            //   onFinishFailed={onFinishFailed}
          >
            <div className={styles.smiddle}>
              <div className={styles.text}>
                输入网商银行验证打款金额{' '}
                <Tooltip title="需要追踪的资金的第一次流转的流入时间">
                  <QuestionCircleOutlined />
                </Tooltip>
              </div>

              <div className={styles.inputs}>
                <Form.Item
                  name="input1"
                  //   rules={[{ required: true, message: 'Please input your username!' }]}
                >
                  <Input
                    type="tel"
                    id="field001"
                    maxLength={maxlength}
                    onChange={(e) => handleInputValue(e, 'A')}
                    onFocus={() => {
                      setflag(true);
                    }}
                    style={{ width: '100px', height: '46px', textAlign: 'center' }}
                  ></Input>
                </Form.Item>
                <div
                  style={{
                    width: '50px',
                    height: '46px',
                    border: '1px solid #D9D9D9',
                    textAlign: 'center',
                    paddingTop: '20px',
                    fontWeight: 800,
                  }}
                >
                  .
                </div>

                <Form.Item
                  name="input2"
                  //   rules={[{ required: true, message: 'Please input your username!' }]}
                >
                  <Input
                    // onKeyDown={maxlength ? handleDel : null}
                    type="tel"
                    maxLength={maxlength}
                    id="field002"
                    onChange={(e) => handleInputValue(e, 'B')}
                    onFocus={() => {
                      setflag(true);
                    }}
                    style={{ width: '100px', height: '46px', textAlign: 'center' }}
                  />
                </Form.Item>
                <Form.Item
                  name="input3"
                  //   rules={[{ required: true, message: 'Please input your username!' }]}
                >
                  <Input
                    type="tel"
                    maxLength={1}
                    onChange={(e) => handleInputValue(e, 'C')}
                    id="field003"
                    onFocus={() => {
                      setflag(true);
                    }}
                    style={{ width: '100px', height: '46px', textAlign: 'center' }}
                  />
                </Form.Item>
                <div
                  style={{
                    width: '53px',
                    height: '46px',
                    border: '1px solid #D9D9D9',
                    textAlign: 'center',
                    paddingTop: '20px',
                  }}
                >
                  元
                </div>
              </div>
              <div className={styles.Receivepayment}>
                {flag ? (
                  <p>
                    您有 <span style={{ color: '#353535' }}>{count}次</span> 输入机会，
                    <span>{count}次</span>输入错误后需重新确认收款账户。
                  </p>
                ) : (
                  <p style={{ color: 'red' }}>
                    输入错误，您还剩余 <span>{count}次</span> 机会
                  </p>
                )}
              </div>
              <div className={styles.check}>
                {/* <Form.Item> */}
                <Form.Item
                  rules={[
                    {
                      validator: (_, value, callback) => {
                        const reg = /^[0-9]+.?[0-9]*/;
                        form.getFieldsValue();
                        if (
                          !reg.test(form.getFieldsValue().input1) ||
                          !reg.test(form.getFieldsValue().input2) ||
                          !reg.test(form.getFieldsValue().input3)
                        ) {
                          callback('输入格式只能为数字');
                        }
                        if (!checkbox) {
                          callback('请勾选《融易收服务协议》协议');
                        } else {
                          confirmPayment();
                          callback();
                        }
                      },
                    },
                  ]}
                  name="remember"
                  valuePropName="checked"
                >
                  <Checkbox
                    checked={checkbox}
                    onChange={(e) => {
                      setbuttonfFlag(!e.target.checked);
                      setcheckbox(e.target.checked);
                    }}
                  ></Checkbox>
                  <span
                    style={{
                      marginLeft: '8px',
                      color: '#666666',
                      fontFamily: 'PingFangSC-Regular, sans-serif',
                    }}
                  >
                    同意《融易收服务协议》
                  </span>
                </Form.Item>
              </div>
              <Form.Item rules={[{ required: true, message: 'Please input your username!' }]}>
                <Button
                  htmlType="submit"
                  disabled={buttonfFlag || buttonfFlag1 || buttonfFlag2 || buttonfFlag3}
                  className={styles.button}
                >
                  确认
                </Button>
                {/* <LoadingButton htmlType="submit" disabled={buttonfFlag} className={styles.button}>确认</LoadingButton> */}
              </Form.Item>
            </div>
          </Form>
        </div>
        <div className={styles.bmiddle}>
          <p className={styles.fontweight}>如何查询验证打款金额</p>
        </div>
        <div className={styles.bottom}>
          <div className={styles.bottomleft}>
            <p style={{ paddingTop: '24px' }}>
              <span style={{ fontSize: '16px', marginTop: '24px', marginLeft: '24px' }}>
                <DesktopOutlined style={{ fontSize: '16px', marginRight: '4px' }} />{' '}
                企业网银查询账单
              </span>{' '}
              <a href="" style={{ float: 'right', marginRight: '24px' }}>
                立即前往
              </a>
            </p>
            <img
              src="https://gw.alipayobjects.com/mdn/rms_4f58df/afts/img/A*hwgBQqi5xwQAAAAAAAAAAAAAARQnAQ"
              alt=""
              style={{ width: '60%', display: 'block', margin: 'auto', marginTop: '4%' }}
            />
          </div>
          <div className={styles.bottomright}>
            <p style={{ paddingTop: '24px' }}>
              <span style={{ fontSize: '16px', marginTop: '24px', marginLeft: '24px' }}>
                <MobileOutlined style={{ fontSize: '16px', marginRight: '4px' }} />
                支付宝登录网商银行小程序
              </span>
              <a href="" style={{ float: 'right', marginRight: '24px' }}>
                扫码查看
              </a>
            </p>
            <img
              src="https://gw.alipayobjects.com/mdn/rms_4f58df/afts/img/A*R0mLTqYb6mwAAAAAAAAAAAAAARQnAQ"
              alt=""
              style={{
                display: 'block',
                margin: 'auto',
                marginTop: '50px',
              }}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Payment;