import React, {useCallback} from 'react'
import { Button, Row, Col, Layout } from 'antd'
import { Link } from '@ttk/router'
import Box from '@/components/floatbox'
import { useData, useActions, useCommit } from "@ttk/app-loader"
import InvoiceForm from './components/InvoiceForm'
import CustomModal from './components/CustomModal'
import GoodsModal from './components/GoodsModal'
import BalanceModal from './components/BalanceModal'
import LimitModal from './components/LimitModal'
import OutdateModal from './components/OutdateModal'
import './style.less'

export default React.memo(Page)
function Page(props) {
  const { showCustomModal, showGoodsModal, showLimitModal, showOutdateModal } = useData([props, 'tempState']).toJS()

  return (
    <Layout>
      <InvoiceForm {...props}/>
      {showCustomModal &&<CustomModal {...props}/>}
      {showGoodsModal && <GoodsModal {...props}/>}
      <BalanceModal {...props}/>
      {showLimitModal && <LimitModal {...props}/>}
      {showOutdateModal && <OutdateModal {...props}/>}
    </Layout>
  )
}
