import './balance-head.css'
import { useContext, useState } from "react";
import { GlobalContext } from "../../context/GlobalContext.ts";
import { Modal } from 'antd';
import moneyImg from '@theme/img/head/money.png'
import CapitalModal from '../CapitalModal/CapitalModal.tsx';
import RecordModal from '../RecordModal/RecordModal.tsx'
import capitalImg from '../../static/capita.png'
import recordImg from '../../static/record.png'
export default function BalanceHead() {
    const globalContext = useContext(GlobalContext);
    // const [isLoading, setIsLoading] = useState(false)
    // const [moneyModal, setMoneyModal] = useState(false)
    // 资金流水弹窗
    const [capitalModal, setCapitalModal] = useState(false)
    // 分账记录弹窗
    const [recordModal, setRecordModal] = useState(false)

    return (
        <div className="head-item balance-head">
            <div className="label">
                <img src={moneyImg} alt="" />
                <div style={{
                    color: 'var(--color-kefu)',
                }}>余额</div>

            </div>
            <div className="balance" onClick={() => {
                // console.log('查看余额')
                // setMoneyModal(true)
            }}>
                {/* ￥ */}
                {/* <img src={moneyImg} alt="" width={17} height={19} style={{marginRight:10}}/> */}
                {globalContext.user.balance}
                <div className='transparentBox'></div>
                <div className='moneyModal'>
                    <div className='moneyModal-box'>
                        <div className='moneyModal-triangle'></div>
                        <div className='moneyModal-title' onClick={() => {
                            setCapitalModal(true)
                        }}>
                            <img src={capitalImg} style={{ marginTop: 1 }} width={15} height={20} alt="" />
                            <div style={{
                                marginLeft: 10,
                            }}>
                                资金流水
                            </div>
                        </div>
                        <div style={{
                            width: 68,
                            height: 1,
                            background: '#EAEAEA',
                            marginLeft: 18
                        }}></div>
                        <div className='moneyModal-title' onClick={() => {
                            setRecordModal(true)
                        }}>
                            <img src={recordImg} style={{ marginTop: 1 }} width={20} height={20} alt="" />
                            <div style={{
                                marginLeft: 5,
                            }}>
                                分账记录
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/* <Modal title="流水和分账"
                footer={null}
                destroyOnClose
                open={moneyModal}
                // width={1500}
                onCancel={() => {
                    setMoneyModal(false)

                }}>
                <div style={{ cursor: 'pointer' }} onClick={() => {
                    setCapitalModal(true)
                }}>资金流水</div>
                <div style={{ cursor: 'pointer' }} onClick={() => {
                    setRecordModal(true)
                }}>分账记录</div>
            </Modal> */}
            <Modal title="资金流水"
                footer={null}
                destroyOnClose
                open={capitalModal}
                width={1500}
                onCancel={() => {
                    setCapitalModal(false)

                }}>

                <CapitalModal></CapitalModal>

            </Modal>
            <Modal title="分账记录"
                footer={null}
                destroyOnClose
                open={recordModal}
                width={1200}
                onCancel={() => {
                    setRecordModal(false)

                }}>

                <RecordModal></RecordModal>

            </Modal>
        </div >
    )
}