import React, {useEffect, useImperativeHandle, useRef, useState} from "react";
import './FlowFlush.less'
import closeIcon from "@/assets/brand/closeIcon.png";
import ProForm, {ProFormText, ProFormTextArea} from "@ant-design/pro-form";
import {Col, Row} from "antd";
import ProTable from "@ant-design/pro-table";

import mobilePay from '@/assets/DataVerification/mobilePay.png'
import cash from '@/assets/DataVerification/cash.png'
import saleRecord from '@/assets/DataVerification/saleRecord.png'
import billCheck from '@/assets/DataVerification/billCheck.png'
import changeList from '@/assets/DataVerification/changeList.png'
import fixed from '@/assets/DataVerification/fixed.png'
import machineNumber from '@/assets/DataVerification/machineNumber.png'
import date from '@/assets/DataVerification/date.png'
import {handleGetDataRight} from "@/pages/DataVerification/list/service";

const FlowFlush: React.FC<{ currentItem?: any,currentRow?: any,onRef: any, }> = ({ currentItem,currentRow,onRef, }) => {
  const flowFlushRef = useRef()
  const [rightData,setRightData] = useState<any>()
  const [correctList,setCorrectList] = useState<any>()
  const columns: any = [
    {
      dataIndex: 'COMMODITY_NAME',
      title: '商品名称',
    },
    {
      dataIndex: 'COMMODITY_CODE',
      title: '商品编码',
    },
    {
      dataIndex: 'SELLCOUNT',
      title: '销售数量',
    },
    {
      dataIndex: 'FACTAMOUNT',
      title: '销售金额',
    },
    {
      dataIndex: 'COMMODITY_DESC',
      title: '冲正类型',
    },
    {
      dataIndex: 'SELLDESC',
      title: '冲正说明',
      width:'300px'
    },
    {
      dataIndex: 'OPERATE_DATE',
      title: '操作时间',
    },
  ]
  // 是否禁用移动支付冲正的冲正说明
  const [isFalseDesc,setIsFalseDesc] = useState<boolean>(false)
  // 现金冲正的冲正说明是否禁用
  const [isFalseDesc1,setIsFalseDesc1] = useState<boolean>(false)
  useEffect(async () => {
    if (currentItem && currentRow){
      handleGetDetail()
    }
  }, []);

  const handleGetDetail = async ()=>{
    const req = {
      EndaccountId:currentItem?.Endaccount_Id,
      Revenue_Amount:currentItem?.Revenue_Amount || 0,
      FactAmount_Mobilepayment:currentItem?.FactAmount_Mobilepayment || 0
    }
    const data = await handleGetDataRight(req)
    if (data?.Correct_MobilePayAmount==0 && data?.Account_Correct==0){
      setIsFalseDesc(true)
    }else{
      setIsFalseDesc(false)
    }
    if (data?.Correct_CashAmount==0){
      setIsFalseDesc1(true)
    }else{
      setIsFalseDesc1(false)
    }
    console.log('data123213',data)
    setRightData(data)
    if (data && data.CorrectList &&data.CorrectList.length>0){
      setCorrectList(data.CorrectList)
    }
    flowFlushRef.current?.setFieldsValue(data)
  }


  useImperativeHandle(onRef, () => ({
    flowFlushRef,
    correctList,
    rightData,
    handleGetDetail
  }));

  return (
    <div className={'flowFlush'}>
      {/* 抽屉顶部 */}
      <div className={'detailTop'}>
        <div style={{display:'flex',alignItems:'center'}}>
          <p className={'detailTitle'}>流水冲正</p>
        </div>
        <img className={'closeIcon'} src={closeIcon}/>
      </div>
      <div className={'detailContent'}>
        {/* 内容的详情卡片 */}
        <div className={'brandDetail'}>

          <img className={'brandImg'} src={currentRow?.ServerpartShop_ICO}/>

          <div className={'detailBox'}>
            <p className={'brandName'}>{currentRow?.ServerpartShop_Name}</p>
            <div className={'currentBox'}>
              <div className={'currentItem'}>
                <img className={'currentIcon'} src={fixed}/>
                <text className={'currentText'}>{currentRow?.Serverpart_Name}</text>
              </div>
              <div className={'currentItem'}>
                <img className={'currentIcon'} src={machineNumber}/>
                <text className={'currentText'}>{currentItem?.MachineCode} （收银机号）</text>
              </div>
              <div className={'currentItem'}>
                <img className={'currentIcon'} src={date}/>
                <text className={'currentText'}>{currentItem?.Endaccount_EndDate}（结账时间）</text>
              </div>
            </div>
          </div>
        </div>

        <div className={'formBox'}>
          <ProForm
            formRef={flowFlushRef}
            initialValues={rightData}
            onValuesChange={(e: any)=>{
              console.log('e',e)
              if (e.Correct_MobilePayAmount){
                const mobileItemValue = flowFlushRef.current?.getFieldsValue('').Account_Correct
                if (Number(e.Correct_MobilePayAmount)===0 && Number(mobileItemValue)===0){
                  setIsFalseDesc(true)
                }else{
                  setIsFalseDesc(false)
                }
              }else if(e.Account_Correct){
                const mobileItemValue = flowFlushRef.current?.getFieldsValue('').Correct_MobilePayAmount
                if (Number(e.Account_Correct)===0 && Number(mobileItemValue)===0){
                  setIsFalseDesc(true)
                }else{
                  setIsFalseDesc(false)
                }
              }
              if (Number(e.Correct_CashAmount)===0){
                setIsFalseDesc1(true)
              }else{
                setIsFalseDesc1(false)
              }
            }}
            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 className={'mobileFirst'}>
              <div className={'mobileItem'}>
                <ProFormText
                  // readonly
                  disabled
                  name='Cashier_Mobilepayment'
                  label='前端金额'
                />
              </div>
              <span style={{width:'10px',textAlign:'center',marginTop:'15px'}}>{'+'}</span>
              <div className={'mobileItem'}>
                <ProFormText
                  // readonly
                  required
                  name='Correct_MobilePayAmount'
                  label='移动冲正'
                />
              </div>
              <span style={{width:'10px',textAlign:'center',marginTop:'15px'}}>{'='}</span>
              <div className={'mobileItem'}>
                <ProFormText
                  // readonly
                  disabled
                  name='FactAmount_Mobilepayment'
                  label='后台金额'
                />
              </div>
              <span style={{width:'10px',textAlign:'center',marginTop:'15px'}}>{'+'}</span>
              <div className={'mobileItem'}>
                <ProFormText
                  // readonly
                  required
                  label='到账实差'
                  name='Account_Correct'
                />
              </div>
            </div>
            <div style={{paddingLeft:'20px'}}>
              <Row>
                <Col span={24}>
                  <ProFormTextArea
                    disabled={isFalseDesc}
                    label="冲正说明"
                    name='MobileCorrect_Desc'
                  />
                </Col>
              </Row>
            </div>

            <div className={'rightFormTitle'}>
              <div className={'titleLeft'}>
                <img className={'titleIcon'} src={cash}/>
                <span className={'titleName'}>{'现金流水冲正'}</span>
              </div>
            </div>
            <div className={'mobileSecond'}>
              <div className={'mobileItem'}>
                <ProFormText
                  // readonly
                  disabled
                  name='Correct_TotalAmount'
                  label='流水冲正'
                />
              </div>
              <span style={{width:'10px',textAlign:'center',marginTop:'15px'}}>{'='}</span>
              <div className={'mobileItem'}>
                <ProFormText
                  // readonly
                  disabled
                  name='Correct_MobilePayAmount'
                  label='移动冲正'
                />
              </div>
              <span style={{width:'10px',textAlign:'center',marginTop:'15px'}}>{'+'}</span>
              <div className={'mobileItem'}>
                <ProFormText
                  // readonly
                  required
                  name='Correct_CashAmount'
                  label='现金冲正'
                />
              </div>
              <div className={'mobileItem'} style={{width:'calc(25% + 10px)'}}></div>
            </div>
            <div style={{paddingLeft:'20px'}}>
              <Row>
                <Col span={24}>
                  <ProFormTextArea
                    disabled={isFalseDesc1}
                    name='CashCorrect_Desc'
                    label="冲正说明"
                  />
                </Col>
              </Row>
            </div>

            <div className={'rightFormTitle'}>
              <div className={'titleLeft'}>
                <img className={'titleIcon'} src={saleRecord}/>
                <span className={'titleName'}>{'销售流水补录'}</span>
              </div>
            </div>
            <div className={'mobileSecond'}>
              <div className={'mobileItem'}>
                <ProFormText
                  // readonly
                  disabled
                  name='Supplement_TotalAmount'
                  label='补录金额'
                />
              </div>
              <span style={{width:'10px',textAlign:'center',marginTop:'15px'}}>{'='}</span>
              <div className={'mobileItem'}>
                <ProFormText
                  // readonly
                  disabled
                  name='Check_Replenish'
                  label='稽核补录'
                />
              </div>
              <span style={{width:'10px',textAlign:'center',marginTop:'15px'}}>{'+'}</span>
              <div className={'mobileItem'}>
                <ProFormText
                  // readonly
                  disabled
                  name='SaleCorrect_Amount'
                  label='单品补录'
                />
              </div>
              <div className={'mobileItem'}  style={{width:'calc(25% + 10px)'}}></div>
            </div>

            <div className={'rightFormTitle'}>
              <div className={'titleLeft'}>
                <img className={'titleIcon'} src={billCheck}/>
                <span className={'titleName'}>{'日结校验方式'}</span>
              </div>
            </div>
            <div className={'mobileFirst'}>
              <div className={'mobileItem'}>
                <ProFormText
                  // readonly
                  name='Revenue_Amount'
                  label='实收金额'
                />
              </div>
              <span style={{width:'10px',textAlign:'center',marginTop:'15px'}}>{'='}</span>
              <div className={'mobileItem'}>
                <ProFormText
                  // readonly
                  disabled
                  name='TotalSell_Amount'
                  label='总销售额'
                />
              </div>
              <span style={{width:'10px',textAlign:'center',marginTop:'15px'}}>{'+'}</span>
              <div className={'mobileItem'}>
                <ProFormText
                  // readonly
                  disabled
                  name='Correct_TotalAmount'
                  label='流水冲正'
                />
              </div>
              <span style={{width:'10px',textAlign:'center',marginTop:'15px'}}>{'+'}</span>
              <div className={'mobileItem'}>
                <ProFormText
                  // readonly
                  disabled
                  name='Supplement_TotalAmount'
                  label='补录金额'
                />
              </div>
            </div>

            <div className={'rightFormTitle'}>
              <div className={'titleLeft'}>
                <img className={'titleIcon'} src={changeList}/>
                <span className={'titleName'}>{'冲正列表'}</span>
              </div>
            </div>
            <ProTable
              style={{marginTop:'12px'}}
              search={false}
              options={false}
              columns={columns}
              dataSource={correctList}
            >
            </ProTable>
          </ProForm>
        </div>
      </div>

    </div>
  )
}
export default FlowFlush
