import React, {useEffect, useRef} from "react";
import closeIcon from "@/assets/brand/closeIcon.png";
import './PayDetail.less'
import {Button, Col, Row} from "antd";
import ProForm, {ProFormDigit, ProFormText} from "@ant-design/pro-form";
import mobilePay from '@/assets/DataVerification/mobilePay.png'
import otherPay from '@/assets/DataVerification/otherPay.png'

const PayDetail: React.FC<{ currentDetail: any }> = ({ currentDetail}) => {
  const payFormRef = useRef()
  useEffect(() => {
    console.log('currentDetail',currentDetail)
    payFormRef.current?.setFieldsValue(currentDetail)
  }, [currentDetail]);
  return (
    <div className={'payDetail'}>
      {/* 抽屉顶部的品牌信息 */}
      <div className={'detailTop'}>
        <div style={{display:'flex',alignItems:'center'}}>
          <p className={'detailTitle'}>支付明细</p>
          <span className={'notice'}>{'注：现金支付包含稽核补录金额'}</span>
        </div>
        <img className={'closeIcon'} src={closeIcon}/>
      </div>
      <div className={'detailContent'}>
        <ProForm
          formRef={payFormRef}
          submitter={{
            // 清空表单自带的按钮
            render: (props, doms) => {
              return []
            }
        }}>
          <div className={'rightFormTitle'} style={{marginTop:'24px'}}>
            <div className={'titleLeft'}>
              <img className={'titleIcon'} src={mobilePay}/>
              <span className={'titleName'}>{'移动支付明细'}</span>
            </div>
          </div>
          <div style={{paddingLeft:'20px',marginTop:'8px'}}>
            <Row>
              <Col span={6}>
                <ProFormDigit
                  readonly
                  name='Alipay_Amount'
                  label='支付宝支付'
                />
              </Col>
              <Col span={6}>
                <ProFormDigit
                  readonly
                  name='WeChat_Amount'
                  label='微信支付'
                />
              </Col>
            </Row>
          </div>
          <div className={'rightFormTitle'} style={{marginTop:'24px'}}>
            <div className={'titleLeft'}>
              <img className={'titleIcon'} src={otherPay}/>
              <span className={'titleName'}>{'其他支付明细'}</span>
            </div>
          </div>
          <div style={{paddingLeft:'20px',marginTop:'8px'}}>
            <Row>
              <Col span={6}>
                <ProFormDigit
                  readonly
                  name='CostBill_Amount'
                  label='消费（大巴）券'
                />
              </Col>
              <Col span={6}>
                <ProFormDigit
                  readonly
                  name='VIPCard_Amount'
                  label='企业会员'
                />
              </Col>
              <Col span={6}>
                <ProFormDigit
                  readonly
                  label='油非互动'
                />
              </Col>
            </Row>
          </div>
        </ProForm>
      </div>
    </div>
  )
}
export default PayDetail;
