import './ItemDetail.less'
import closeIcon from '@/assets/brand/closeIcon.png'
import { Button, Col, DatePicker, Drawer, Row, Spin, Image, Upload, Popconfirm, message, Modal, Input } from "antd";
import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
import type { tabType } from "@/pages/DataVerification/list/data";
import ProForm, { ProFormText, ProFormTextArea } from "@ant-design/pro-form";
import Dragger from "antd/es/upload/Dragger";
import { InboxOutlined } from "@ant-design/icons";
import ProTable from "@ant-design/pro-table";
import PayDetail from "@/pages/DataVerification/list/components/PayDetail";
import FlowFlush from "@/pages/DataVerification/list/components/FlowFlush";

import allRealMoney from '@/assets/DataVerification/allRealMoney.png'
import north from '@/assets/DataVerification/north.png'
import south from '@/assets/DataVerification/south.png'
import west from '@/assets/DataVerification/west.png'
import east from '@/assets/DataVerification/east.png'
import waitCheck from '@/assets/DataVerification/waitCheck.png'
import activeWaitCheck from '@/assets/DataVerification/activeWaitCheck.png'
import successCheck from '@/assets/DataVerification/successCheck.png'
import activeSuccessCheck from '@/assets/DataVerification/activeSuccessCheck.png'
import billBasic from '@/assets/DataVerification/billBasic.png'
import billSale from '@/assets/DataVerification/billSale.png'
import billCheck from '@/assets/DataVerification/billCheck.png'
import auditFeedback from '@/assets/DataVerification/auditFeedback.png'
import productDataImg from '@/assets/DataVerification/productData.png'
import mobilePay from '@/assets/DataVerification/mobilePay.png'
import upLoad from '@/assets/DataVerification/upLoad.png'
import fixed from '@/assets/DataVerification/fixed.png'
import noData from '@/assets/DataVerification/noData.svg'
import defaultIcon from '@/assets/brand/defaultIcon.png'
import moment from "moment/moment";
import {
  handleDetailList,
  handleDetail,
  handleBrandDetailList,
  handleGetShopData,
  handleGetPictureList,
  handleSaveEndAccount,
  handleSaveAddShopData, handleExamine
} from "@/pages/DataVerification/list/service";
import ReportDetail from "@/pages/DataVerification/list/components/reportDetail";
import { uploadFile } from "@/pages/supplier/supplierList/service";
import ProductData from "@/pages/DataVerification/list/components/ProductData";
import AuditDetail from "@/pages/DataVerification/list/components/auditDetail";
import DetailBasicInfo from './detailBasicInfo';

const { REACT_APP_ENV } = process.env;


const ItemDetail: React.FC<{ currentItem?: any, showDetail?: any, currentRow?: any, searchTimeParent?: any, currentUser: any, onRef?: any, handleKnowChildrenTabChange: any, pageVersion?: any }> = ({ currentItem, showDetail, currentRow, searchTimeParent, currentUser, onRef, handleKnowChildrenTabChange, pageVersion }) => {
  const formRef = useRef()
  const examineForm = useRef<any>()
  const flowFlushBigRef = useRef()
  const auditDetailRef = useRef<any>()
  const productDataRef = useRef()
  const { RangePicker } = DatePicker;
  const [selectTab, setSelectTab] = useState<number>(1)
  const [payDetail, setPayDetail] = useState<boolean>(false)// 支付明细的抽屉
  const [flowFlush, setFlowFlush] = useState<boolean>(false)
  const [tabList, setTabList] = useState<tabType[]>([
    { label: '待我校验', icon: waitCheck, selectIcon: activeWaitCheck, number: 0, value: 1 },
    { label: '我已校验', icon: successCheck, selectIcon: activeSuccessCheck, number: 0, value: 2 }])
  const [searchTime, setSearchTime] = useState<any>(searchTimeParent || [moment().subtract(1, 'day'), moment().subtract(1, 'day')])
  const [leftTimeAllList, setLeftTimeAllList] = useState<any>()
  const [showChangeLoading, setShowChangeLoading] = useState<boolean>(false)// 切换左侧页面 相信信息的的loading
  const [leftTimeList, setLeftTimeList] = useState<any>()// 左侧时间列表
  const [selectLeftTime, setSelectLeftTime] = useState<number>()
  const [currentDetail, setCurrentDetail] = useState<any>()
  const [topDetail, setTopDetail] = useState<any>()
  // 审核悬浮框
  const [examineModal, setExamineModal] = useState<boolean>(false)
  // 上传文件的悬浮框
  const [upLoadModal, setUpLoadModal] = useState<boolean>(false)
  // 禁用操作按钮
  const [disableBtn, setDisableBtn] = useState<boolean>(true)
  // 稽查反馈的列表数据
  const [auditTableData, setAuditTableData] = useState<any>()
  // 稽查反馈的抽屉
  const [showAuditDrawer, setShowAuditDrawer] = useState<boolean>(false)
  // 稽查反馈点击的那行数据
  const [auditRowDetail, setAuditRowDetail] = useState<any>()
  // 添加单品
  const [productsDrawer, setProductsDrawer] = useState<boolean>(false)
  // 文件列表
  const [fileList, setFileList] = useState<any>()
  const columns: any = [
    {
      dataIndex: 'Check_Info',
      title: '稽核反馈',
    },
    {
      dataIndex: 'Error_Rate',
      title: '稽核误差率',
      render: (_, record) => {
        return <span style={{ color: record.Error_Rate > 0.2 ? 'red' : '' }}>{`${record.Error_Rate}%`}</span>
      }
    },
    {
      dataIndex: 'Difference_Amount',
      title: '长短款/流水冲正',
      render: (_, record) => {
        return <span style={{ color: record.Difference_Amount > 0 ? 'green' : 'red' }}>
          {`${record.Difference_Amount} / ${record.Supplement_Amount}`}
        </span>
      }
    },
    {
      dataIndex: 'Audit_Date',
      title: '稽查时间',
    },
    {
      dataIndex: 'Audit_Type',
      title: '稽查类型',
    },
    {
      dataIndex: 'Audit_Id',
      title: '稽查内码',
      hideInTable: true
    },
  ]
  // 图片数组
  const [imgList, setImgList] = useState<any>()
  const [productData, setProductData] = useState<any>()// 单品数据 1
  const [mobilePayment, setMobilePayment] = useState<any>()// 移动支付  3
  const [cigarettePayment, setCigarettePayment] = useState<any>()// 香烟支付  2
  // 三个查询报表的抽屉
  const [queryRecords, setQueryRecords] = useState<boolean>(false)
  // 三个查询报表记录 选择的哪个
  const [selectQueryType, setSelectQueryType] = useState<number>(0)
  // 整个抽屉的校验loading
  const [itemDetailLoading, setItemDetailLoading] = useState<boolean>(false)
  const fmoney = (s: number, n?: number) => {
    /*
     * 参数说明：
     * s：要格式化的数字
     * n：保留几位小数
     * */
    n = n > 0 && n <= 20 ? n : s.toString().indexOf('.') === -1 ? 0 : s.toString().indexOf('.') > -1 ? s.toString().split('.')[1].length : 2;
    let fuhao = ''; // 如果数字小于零则值为-
    if (s < 0) {
      s = Math.abs(s);
      fuhao = '-'
    }
    s = `${parseFloat((`${s}`).replace(/[^\d\.-]/g, "")).toFixed(n)}`;
    const l = s.split(".")[0].split("").reverse();
    const r = s.split(".")[1];
    let t = "";
    for (let i = 0; i < l.length; i++) {
      t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
    }
    if (n === 0) {
      return s
    }
    return `${fuhao + [...t].reverse().join("")}.${r}`;

  }

  const handleGetItemDetail = async () => {
    setShowChangeLoading(true)
    const req = {
      RoleType: 1,
      ServerpartId: currentRow.Serverpart_Id,
      ServerpartShopCode: currentRow.ServerpartShop_Code,
      StartDate: moment(searchTime[0]).format('YYYY-MM-DD'),
      EndDate: moment(searchTime[1]).format('YYYY-MM-DD'),
    }
    const data = await handleBrandDetailList(req)
    const resultData = JSON.parse(JSON.stringify(data))
    setTopDetail(resultData)
    if (resultData.VerifyList && resultData.VerifyList.length > 0) {
      resultData.VerifyList.forEach((item: any) => {
        item.name = resultData.ServerpartShop_Name
      })
    }
    if (resultData.VerifiedList && resultData.VerifiedList.length > 0) {
      resultData.VerifiedList.forEach((item: any) => {
        item.name = resultData.ServerpartShop_Name
      })
    }
    setLeftTimeAllList([resultData.VerifyList, resultData.VerifiedList])
    console.log('resultData323', resultData);

    const selectTabList: any = JSON.parse(JSON.stringify(tabList))
    selectTabList.forEach((item: any) => {
      if (item.label === '待我校验') {
        item.number = data.VerifyList.length
      } else {
        item.number = data.VerifiedList.length
      }
    })

    setLeftTimeList([resultData.VerifyList, resultData.VerifiedList][selectTab - 1])


    if (selectTabList[0].number === 0) {
      setSelectTab(2)
      setLeftTimeList([resultData.VerifyList, resultData.VerifiedList][1])
    } else {
      setLeftTimeList([resultData.VerifyList, resultData.VerifiedList][selectTab - 1])
    }
    setTabList(selectTabList)
    // 如果未校验有值 那默认显示数组第一个 没值就显示第二个
    const leftList: any = [resultData.VerifyList, resultData.VerifiedList][selectTabList[0].number === 0 ? 1 : 0]
    console.log('leftList', leftList);

    if (leftList && leftList.length > 0) {
      // setSelectLeftTime(leftList[0].value)
      // handleGetDetail(leftList[0].value, selectTab)
      setSelectLeftTime(currentRow?.Endaccount_Id)
      handleGetDetail(currentRow?.Endaccount_Id, selectTab)
    } else {
      formRef.current?.resetFields()
    }
    setShowChangeLoading(false)
  }

  useEffect(async () => {
    if (showDetail && currentRow) {
      // 抽屉顶部显示内容调用的接口
      handleGetItemDetail()

    }
  }, [showDetail]);

  // 拿到校验说明
  const handleGetApprovedInfo = () => {
    const data = formRef.current?.getFieldsValue()
    return data
  }
  // 校验表单方法
  const handleForm = async () => {
    let flag: boolean = false
    const res = await formRef.current?.validateFields()
    console.log('res', res)
    if (res) {
      flag = true
    }
    return flag
  }

  // 改变最大的抽屉loading
  const showDetailLoading = (type: boolean) => {
    setItemDetailLoading(type)
  }


  useImperativeHandle(onRef, () => ({
    selectTab,
    handleGetApprovedInfo,
    currentDetail,
    auditTableData,
    handleLeftListChange,
    handleForm,
    handleGetItemDetail,
    showDetailLoading
  }));

  const handleLeftListChange = () => {
    if (leftTimeList && leftTimeList.length === 0 && selectTab === 1) {
      return true
    }
    return false
  }


  useEffect(() => {
    handleKnowChildrenTabChange(selectTab, leftTimeList && leftTimeList.length > 0 ? leftTimeList.length : 0, disableBtn)
  }, [selectTab]);
  useEffect(() => {
    handleKnowChildrenTabChange(selectTab, leftTimeList && leftTimeList.length > 0 ? leftTimeList.length : 0, disableBtn)
  }, [leftTimeList]);
  useEffect(() => {
    handleKnowChildrenTabChange(selectTab, leftTimeList && leftTimeList.length > 0 ? leftTimeList.length : 0, disableBtn)
  }, [disableBtn]);
  const handleGetDetail = async (id: number, tabSelect?: number) => {
    const req = {
      EndaccountId: id
    }
    const data = await handleDetail(req)
    setAuditTableData(data.AuditInfoList)
    if (tabSelect !== 2) {
      handleGetShopPriceData(1, data.Endaccount_Id)
      handleGetShopPriceData(3, data.Endaccount_Id)
      if (data.ShowCigarette) {
        handleGetShopPriceData(2, data.Endaccount_Id, data.CigaretteType)
      }
    }
    setCurrentDetail(data)
    formRef.current?.setFieldsValue(
      {
        ...data,
        AvgTicketPrice: data.Ticket_Count ? fmoney(data.TotalSell_Amount / data.Ticket_Count, 2) : ''
      }
    )
    setShowChangeLoading(false)
    getPictureList(data.Endaccount_Id)
  }

  const handleGetShopPriceData = async (type: number, id: number, CigaretteType?: any) => {
    // type 为数据类型 1单品数据 2香烟数据 3移动支付   id 为日结账期内码
    let req = {}
    if (type === 1) {
      req = {
        Data_Type: 1,
        Endaccount_ID: id,
      }
    }
    else if (type === 2) {
      req = {
        Data_Type: 2,
        Endaccount_ID: id,
        CigaretteType
      }
    }
    else {
      req = {
        Data_Type: 3,
        Endaccount_ID: id,
        ReloadType: 1
      }
    }
    const data = await handleGetShopData(req)
    if (type === 1) {
      setProductData(data)
      formRef?.current?.setFieldsValue({
        ...data,
        SellCount_Sale: data.count,
        FactAmount_Sale: data.amount
      })
    }
    else if (type === 2) {
      setCigarettePayment(data)
      formRef?.current?.setFieldsValue({
        ...data,
        FactAmount_Cigarette: data.amount,
        SellCount_Cigarette: data.count
      })
    }
    else if (type === 3) {
      setMobilePayment(data)
      formRef?.current?.setFieldsValue({
        ...data,
        FactAmount_Mobilepayment: data.amount
      })
    }
    setShowChangeLoading(false)
  }


  const getPictureList = (id: any) => {
    setShowChangeLoading(true)
    const req = {
      TableId: id,
      TableName: "ENDACCOUNT",
    }
    handleGetPictureList(req).then((data: any) => {
      console.log('setImgList', data)
      if (data && data.List && data.List.length > 0) {
        data.List.forEach((item: any) => {
          item.url = item.ImageUrl
          item.status = 'done'
        })
        setImgList(data.List)
      }
      setShowChangeLoading(false)
    })
  }

  // 单品报表 香烟记录 支付记录 按钮点击调用的方法
  // 1 为单品报表  2为香烟记录 3为支付记录
  const handleGetQueryRecords = async (type: number) => {
    setQueryRecords(true)
    setSelectQueryType(type)
  }

  return (
    <div className={'detailDrawer'}>
      {
        itemDetailLoading ?
          <div className={'detailLoading'}>
            <div className={'loading'}>
              <Spin />
              <span style={{ marginLeft: '5px' }}>{'校验中.....'}</span>
            </div>
          </div> : ''
      }
      {/* 抽屉顶部的品牌信息 */}
      <div className={'detailTop'}>
        <p className={'detailTitle'}>品牌信息</p>
        <img className={'closeIcon'} src={closeIcon} />
      </div>


      {
        pageVersion === 'new' ?
          <div className={'detailContent'}>
            {/* 蓝色带图标的详情框 */}
            <div className={'contentTop'}>
              <img className={'brandIcon'} src={currentRow?.ServerpartShop_ICO || defaultIcon} />
              <div className={'contentTopRight'}>

                <div className={'detailRightTop'}>
                  <div className={'nameType'}>
                    <span className={'brandName'}>{currentRow?.ServerpartShop_Name}</span>
                    {/* <span className={'brandType'}>{currentRow?.Business_Type}</span> */}
                    <div className={'brandType'} style={{ background: currentRow?.Treatment_MarkState === -1 ? '#FFE4E4' : currentRow?.Treatment_MarkState === 1 ? '#EBEDEE' : '', color: currentRow?.Treatment_MarkState === -1 ? '#FF2F0D' : currentRow?.Treatment_MarkState === 1 ? '#686E75' : '' }}>
                      {currentRow?.Treatment_MarkState === -1 ? '未上传' : currentRow?.Treatment_MarkState === 0 ? '待处理' : currentRow?.Treatment_MarkState === 1 ? '已处理' : ''}</div>
                  </div>
                  <div className={'serviceBox'}>
                    <img className={'serviceIcon'} src={fixed} />
                    <span className={'serviceName'}>{currentRow?.Serverpart_Name}</span>

                  </div>
                </div>

                <div className={'progressDetail'}>
                  <div className={'progressBox'}>
                    <div className={'progressHave'} style={{ width: `${(currentRow?.Deal_Count / currentRow?.Total_Count) * 100}%` }}></div>
                  </div>
                  <span className={'rote'}>{`${currentRow?.Deal_Count}/${currentRow?.Total_Count}`}</span>
                </div>

                <div className={'detailBottom'}>
                  <div className={'detailItem'}>
                    <div className={'itemTop'}>
                      <img className={'itemIcon'} src={allRealMoney} />
                      <span className={'itemLabel'}>{'总实收金额/元'}</span>
                    </div>
                    <span className={'itemValue'}>{topDetail?.Revenue_Amount ? fmoney(topDetail?.Revenue_Amount, 2) : '0'}</span>
                  </div>
                  {
                    topDetail?.ShopRegion_Name_A ?
                      <div className={'detailItem'}>
                        <div className={'itemTop'}>
                          <img className={'itemIcon'} src={topDetail?.ShopRegion_Name_B === '西区' ? east : south} />
                          <span className={'itemLabel'}>{`${topDetail?.ShopRegion_Name_A}实收金额/元`}</span>
                        </div>
                        <span className={'itemValue'}>{topDetail?.Revenue_Amount_A ? fmoney(topDetail?.Revenue_Amount_A, 2) : '0'}</span>
                      </div>
                      : ''
                  }

                  {
                    topDetail?.ShopRegion_Name_B ?
                      <div className={'detailItem'}>
                        <div className={'itemTop'}>
                          <img className={'itemIcon'} src={topDetail?.ShopRegion_Name_B === '西区' ? west : north} />
                          <span className={'itemLabel'}>{`${topDetail?.ShopRegion_Name_B}实收金额/元`}</span>
                        </div>
                        <span className={'itemValue'}>{topDetail?.Revenue_Amount_B ? fmoney(topDetail?.Revenue_Amount_B, 2) : '0'}</span>
                      </div> : ''
                  }
                </div>
              </div>
            </div>

            <div className={'detailListBox'}>
              {/*   tab选项卡和搜索时间框 */}
              <div className={'tabBox'}>
                <div className={'tab'}>
                  {
                    tabList.map((item: tabType) => {
                      return item.number === 0 ? '' : <div className={selectTab === item.value ? 'selectTab tabItem' : 'tabItem'} onClick={() => {
                        setSelectTab(item.value)
                        setLeftTimeList(leftTimeAllList[item.value - 1])
                        setShowChangeLoading(true)
                        if (leftTimeAllList[item.value - 1] && leftTimeAllList[item.value - 1].length > 0) {
                          setSelectLeftTime(leftTimeAllList[item.value - 1][0].value)
                          handleGetDetail(leftTimeAllList[item.value - 1][0].value, item.value)
                        } else {
                          setShowChangeLoading(false)
                          formRef.current?.resetFields()
                        }
                      }}>
                        <img className={'tabIcon'} src={selectTab === item.value ? item.selectIcon : item.icon} />
                        <span className={'tabName'}>{item.label}</span>
                        <span className={'number'}>{`(${item.number})`}</span>
                      </div>
                    })
                  }
                </div>
                <div className={'searchBox'}>
                  <RangePicker
                    value={searchTime}
                    onChange={(e: any) => {
                      if (e && e.length > 0) {
                        setSearchTime([moment(e[0]._d), moment(e[1]._d)])
                      } else {
                        setSearchTime([])
                      }
                    }}
                  />
                  <Button style={{ marginLeft: '8px' }} type={'primary'} onClick={() => {
                    handleGetItemDetail()
                  }}>查询</Button>
                </div>
              </div>

              <div className={'listBox'}>
                <div className={'listLeft'}>
                  {
                    leftTimeList && leftTimeList.length > 0 ?
                      leftTimeList.map((item: any) => {
                        return <div className={item.value === selectLeftTime ? 'selectListItem listItem' : 'listItem'} onClick={() => {
                          setSelectLeftTime(item.value)
                          setImgList([])
                          if (item.type !== 0) {
                            setShowChangeLoading(true)
                            handleGetDetail(item.value)
                          }
                          if (item.type === 0) {
                            formRef.current?.resetFields()
                            setDisableBtn(false)
                          } else {
                            setDisableBtn(true)
                          }
                        }}>{`${item.label}【${item.key}】`}</div>
                      }) : ''
                  }
                </div>

                {showChangeLoading ?
                  <div className={'LoadingBox'}>
                    <div className={'loading'}>
                      <Spin />
                      <span style={{ marginLeft: '5px' }}>{'加载中'}</span>
                    </div>
                  </div> : ''
                }
                {
                  leftTimeList && leftTimeList.length > 0 ?
                    <div className={'listRight'}>
                      <ProForm
                        formRef={formRef}
                        submitter={{
                          // 清空表单自带的按钮
                          render: (props, doms) => {
                            return []
                          }
                        }}>
                        <div className={'rightFormTitle'}>
                          <div className={'titleLeft'}>
                            <img className={'titleIcon'} src={billBasic} />
                            <span className={'titleName'}>{'账单基础信息'}</span>
                          </div>
                        </div>
                        <div style={{ paddingLeft: '20px', marginTop: '8px' }}>
                          <Row>
                            <Col span={6}>
                              <ProFormText
                                readonly
                                label='收银机号'
                                name='MachineCode'
                              />
                            </Col>
                            <Col className={'CashierName'} span={6}>
                              <ProFormText

                                readonly
                                label='收银人员'
                                name='Cashier_Name'
                              />
                            </Col>
                            <Col span={6}>
                              <ProFormText
                                readonly
                                label='结账人员'
                                name='Checkout_Name'
                              />
                            </Col>
                            <Col span={6}>
                              <ProFormText
                                readonly
                                label='稽核人员'
                                name='Auditor_Name'
                              />
                            </Col>
                          </Row>
                          <Row>
                            <Col span={6}>
                              <ProFormText
                                readonly
                                label='起始时间'
                                name='Endaccount_StartDate'
                              />
                            </Col>
                            <Col span={6}>
                              <ProFormText
                                readonly
                                label='结账时间'
                                name='Endaccount_EndDate'
                              />
                            </Col>
                          </Row>
                        </div>

                        <div className={'rightFormTitle'} >
                          <div className={'titleLeft'}>
                            <img className={'titleIcon'} src={billSale} />
                            <span className={'titleName'}>{'账单销售信息'}</span>
                          </div>
                          {
                            disableBtn ?
                              <Button onClick={() => {
                                setPayDetail(true)
                              }}>支付明细</Button> : ''
                          }
                        </div>
                        <div style={{ paddingLeft: '20px', marginTop: '8px' }}>
                          <Row>
                            <Col span={6}>
                              <ProFormText
                                readonly
                                label='客单数量'
                                name='Ticket_Count'
                              />
                            </Col>
                            <Col span={6}>
                              <ProFormText
                                readonly
                                label='客单均价'
                                name='AvgTicketPrice'
                              />
                            </Col>
                            <Col span={6}>
                              <ProFormText
                                readonly
                                label='优惠金额'
                                name='TotalOff_Amount'
                              />
                            </Col>
                            <Col span={6}>
                              <ProFormText
                                readonly
                                label='稽核补录'
                                name='Check_Replenish'
                              />
                            </Col>
                          </Row>
                          <div className={'specialField'}>
                            <div className={'fieldItem'}>
                              <ProFormText
                                // readonly
                                disabled
                                label="总销售额"
                                name='TotalSell_Amount'
                              />
                            </div>
                            <span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'='}</span>
                            <div className={'fieldItem'}>
                              <ProFormText
                                // readonly
                                disabled
                                label="现金支付"
                                name='Cash_Amount'
                              />
                            </div>
                            <span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'+'}</span>
                            <div className={'fieldItem'}>
                              <ProFormText
                                // readonly
                                disabled
                                label="移动支付"
                                name='MobilePay_Amount'
                              />
                            </div>
                            <span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'+'}</span>
                            <div className={'fieldItem'}>
                              <ProFormText
                                // readonly
                                disabled
                                label="其他支付"
                                name='OtherPay_Amount'
                              />
                            </div>
                          </div>

                          <div className={'specialField'}>
                            <div className={'fieldItem'}>
                              <ProFormText
                                // readonly
                                disabled
                                label="长款金额"
                                name='Difference_Amount'
                              />
                            </div>
                            <span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'='}</span>
                            <div className={'fieldItem'}>
                              <ProFormText
                                // readonly
                                disabled
                                label="缴款金额"
                                name='Payment_Amount'
                              />
                            </div>
                            <span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'-'}</span>
                            <div className={'fieldItem'}>
                              <ProFormText
                                // readonly
                                disabled
                                label="现金支付"
                                name='Cash_Amount'
                              />
                            </div>
                            {/* <span>{'+'}</span> */}
                            <div className={'fieldItem'} style={{ width: 'calc(25% + 10px)' }}>
                            </div>
                          </div>
                        </div>

                        <div className={'rightFormTitle'} >
                          <div className={'titleLeft'}>
                            <img className={'titleIcon'} src={billCheck} />
                            <span className={'titleName'}>{'账单校验说明'}<span style={{ marginLeft: '12px', color: 'red', fontSize: '14px', fontWeight: 500 }}>{'必填项'}</span></span>
                          </div>
                          {
                            disableBtn ?
                              <Button onClick={() => {
                                setFlowFlush(true);
                              }}>流水冲正</Button> : ''
                          }
                        </div>
                        <div className={'specialField'} >
                          <div style={{ paddingLeft: '20px', width: '100%', display: 'flex', alignItems: 'center', justifyContent: "space-between" }}>
                            <div className={'fieldItem'}>
                              <ProFormText
                                rules={[
                                  {
                                    required: true,
                                    message: '请输入实收金额'
                                  }
                                ]}
                                label="实收金额"
                                name='Revenue_Amount'
                              />
                            </div>
                            <span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'='}</span>
                            <div className={'fieldItem'}>
                              <ProFormText
                                // readonly
                                disabled
                                label="总销售额"
                                name='TotalSell_Amount'
                              />
                            </div>
                            <span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'+'}</span>
                            <div className={'fieldItem'}>
                              <ProFormText
                                // readonly
                                disabled
                                label="冲正金额"
                                name='Correct_TotalAmount'
                              />
                            </div>
                            <div className={'fieldItem'} style={{ width: 'calc(25% + 10px)' }}>
                            </div>
                          </div>
                        </div>
                        <Row>
                          <div style={{ width: '100%' }}>
                            <div style={{ paddingLeft: '20px', marginTop: '8px', width: '100%' }}>
                              <Col span={24}>
                                {
                                  currentDetail?.Approved_Info ?
                                    <span style={{ color: 'red' }}>{`${currentDetail?.Approved_Staff || '-'}【${currentDetail?.Approved_Date || '-'}】:${currentDetail?.Approved_Info || '-'}`}</span> : ''
                                }
                                <ProFormTextArea
                                  label="校验说明"
                                  name='Description_Info'
                                />
                              </Col>
                            </div>
                          </div>
                        </Row>
                        {
                          disableBtn ?
                            <>
                              {
                                auditTableData && auditTableData.length > 0 ?
                                  <>
                                    <div className={'rightFormTitle'} >
                                      <div className={'titleLeft'}>
                                        <img className={'titleIcon'} src={auditFeedback} />
                                        <span className={'titleName'}>{'稽核反馈'}</span>
                                      </div>
                                    </div>
                                    <ProTable
                                      style={{ marginTop: '12px' }}
                                      search={false}
                                      options={false}
                                      columns={columns}
                                      dataSource={auditTableData}
                                      onRow={(record) => {
                                        return {
                                          onClick: (event) => {
                                            setAuditRowDetail(record)
                                            setShowAuditDrawer(true)
                                          },
                                        }
                                      }}
                                    >
                                    </ProTable>
                                  </> : ''
                              }
                              <div className={'rightFormTitle'} >
                                <div className={'titleLeft'}>
                                  <img className={'titleIcon'} src={productDataImg} />
                                  <span className={'titleName'}>{'单品数据'}</span>
                                </div>
                                {
                                  disableBtn ?
                                    <div>
                                      <Button style={{ marginRight: '8px' }} onClick={() => {
                                        handleGetQueryRecords(1)
                                      }}>查询单品报表</Button>
                                      {
                                        selectTab === 1 ?
                                          <Button onClick={() => {
                                            setShowChangeLoading(true)
                                            handleGetShopPriceData(1, currentDetail?.Endaccount_Id)
                                          }}>获取单品数据</Button> : ''
                                      }
                                    </div> : ''
                                }
                              </div>
                              <div style={{ paddingLeft: '20px', marginTop: '8px', width: '100%' }}>
                                <Row>
                                  <Col span={6}>
                                    <ProFormText
                                      readonly
                                      label="销售数量"
                                      name='SellCount_Sale'
                                    />
                                  </Col>
                                  <Col span={6}>
                                    <ProFormText
                                      readonly
                                      label="销售金额"
                                      name='FactAmount_Sale'
                                    />
                                  </Col>
                                </Row>
                              </div>

                              {
                                currentDetail?.ShowCigarette ?
                                  <>
                                    <div className={'rightFormTitle'} style={{ marginTop: '24px' }}>
                                      <div className={'titleLeft'}>
                                        <img className={'titleIcon'} src={mobilePay} />
                                        <span className={'titleName'}>{'香烟数据'}</span>
                                      </div>
                                      {
                                        disableBtn ?
                                          <div>
                                            <Button style={{ marginRight: '8px' }} onClick={() => {
                                              handleGetQueryRecords(2)
                                            }}>查询香烟记录</Button>
                                            {
                                              selectTab === 1 ?
                                                <Button onClick={() => {
                                                  setShowChangeLoading(true)
                                                  handleGetShopPriceData(2, currentDetail?.Endaccount_Id, currentDetail?.CigaretteType)
                                                }}>获取香烟数据</Button> : ''
                                            }
                                          </div> : ''
                                      }
                                    </div>
                                    <div style={{ paddingLeft: '20px', marginTop: '8px', width: '100%' }}>
                                      <Row>
                                        <Col span={6}>
                                          <ProFormText
                                            readonly
                                            label="销售数量"
                                            name='SellCount_Cigarette'
                                          />
                                        </Col>
                                        <Col span={6}>
                                          <ProFormText
                                            readonly
                                            label="销售金额"
                                            name='FactAmount_Cigarette'
                                          />
                                        </Col>
                                      </Row>
                                    </div>
                                  </>
                                  : ''
                              }
                              <div className={'rightFormTitle'} >
                                <div className={'titleLeft'}>
                                  <img className={'titleIcon'} src={mobilePay} />
                                  <span className={'titleName'}>{'移动支付'}</span>
                                </div>
                                {
                                  disableBtn ?
                                    <div>
                                      <Button style={{ marginRight: '8px' }} onClick={() => {
                                        handleGetQueryRecords(3)
                                      }}>查询支付记录</Button>
                                      {
                                        selectTab === 1 ?
                                          <Button onClick={() => {
                                            setShowChangeLoading(true)
                                            handleGetShopPriceData(3, currentDetail?.Endaccount_Id)
                                          }}>获取移动支付</Button> : ''
                                      }
                                    </div> : ''
                                }
                              </div>
                              <Row>
                                <div style={{ paddingLeft: '20px', marginTop: '8px', width: '100%' }}>
                                  <Col span={6}>
                                    <ProFormText
                                      readonly
                                      label="销售金额"
                                      name='FactAmount_Mobilepayment'
                                    />
                                  </Col>
                                </div>
                              </Row>
                              <div className={'rightFormTitle'} style={{ marginBottom: '12px' }}>
                                <div className={'titleLeft'}>
                                  <img className={'titleIcon'} src={upLoad} />
                                  <span className={'titleName'}>{'上传单据'}</span>
                                </div>
                              </div>
                              {
                                selectTab === 1 ?
                                  <iframe
                                    style={{ borderWidth: '0px' }}
                                    width={'100%'}
                                    height={370}
                                    // src={`http://10.104.1.69:8000/cloud/static/uploadPhoto/index.html?id=${currentDetail?.Endaccount_Id}&tablename=ENDACCOUNT&readonly=&PopDialogName=IMAGEPage&Module_ID=3CD350DC5905D75D`}
                                    src={`${REACT_APP_ENV === 'dev' ? 'http://10.104.1.69:8000/' : 'http://saas.eshangtech.com/cloud/'}static/uploadPhoto/index.html?id=${currentDetail?.Endaccount_Id}&tablename=ENDACCOUNT&readonly=&PopDialogName=IMAGEPage&Module_ID=3CD350DC5905D75D`}
                                  />
                                  // http://saas.eshangtech.com/cloud/
                                  :
                                  <div className={'imgList'}>
                                    {
                                      imgList && imgList.length > 0 ?
                                        imgList.map((item: any) => {
                                          return <Image
                                            width={150}
                                            style={{ marginRight: '8px' }}
                                            src={item.ImageUrl}
                                          />
                                        }) : ''
                                    }
                                  </div>
                              }
                            </> : ''
                        }
                      </ProForm>
                    </div>
                    :
                    <div className={'listRight'}>
                      <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', flexDirection: 'column', justifyContent: 'center' }}>
                        <div style={{ width: '150px', height: '150px' }}>
                          <img style={{ width: '150px', height: '150px' }} src={noData} />
                        </div>
                        <div>暂无数据</div>
                      </div>
                    </div>
                }
              </div>
            </div>
          </div> :
          <div>
            {showChangeLoading ?
              <div className={'LoadingBox'}>
                <div className={'loading'}>
                  <Spin />
                  <span style={{ marginLeft: '5px' }}>{'加载中'}</span>
                </div>
              </div> : ''
            }
            <DetailBasicInfo formRef={formRef} leftTimeList={leftTimeList} disableBtn={disableBtn} setPayDetail={setPayDetail} setFlowFlush={setFlowFlush}
              currentDetail={currentDetail} auditTableData={auditTableData} setAuditRowDetail={setAuditRowDetail} setShowAuditDrawer={setShowAuditDrawer}
              handleGetQueryRecords={handleGetQueryRecords} selectTab={selectTab} setShowChangeLoading={setShowChangeLoading} handleGetShopPriceData={handleGetShopPriceData}
              imgList={imgList}
            />
          </div>
      }


      {/* 支付明细 */}
      <Drawer
        width={'60%'}
        visible={payDetail}
        closable={false}
        bodyStyle={{ padding: 0 }}
        onClose={() => {
          setPayDetail(false);
        }}
        destroyOnClose={true}
      >
        <PayDetail currentDetail={currentDetail} />
      </Drawer>
      {/* 流水冲正 */}
      <Drawer
        width={'60%'}
        visible={flowFlush}
        closable={false}
        bodyStyle={{ padding: 0 }}
        onClose={() => {
          setFlowFlush(false);
        }}
        destroyOnClose={true}
        footer={
          selectTab === 1 ?
            <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
              <div>
                <Button type={"primary"} onClick={() => {
                  setProductsDrawer(true)
                }}>添加单品数据</Button>
              </div>
              <div>
                <Button onClick={() => { setFlowFlush(false) }}>取消</Button>
                <Button type={'primary'} style={{ marginLeft: '8px' }} onClick={async () => {
                  const formData = flowFlushBigRef.current?.flowFlushRef.current.getFieldsValue()
                  const req: any = {
                    EndaccountId_Encrypt: flowFlushBigRef.current?.rightData.EndaccountId_Encrypt,
                    CorrectList: flowFlushBigRef.current?.correctList || [],
                    ...formData
                  }
                  const data = await handleSaveEndAccount(req)
                  if (data.Result_Code === 100) {
                    setFlowFlush(false);
                    message.success(data.Result_Desc)
                    handleGetItemDetail()
                  } else {
                    message.error(data.Result_Desc)
                  }
                }}>保存</Button>
              </div>
            </div> : ''
        }
      >
        <FlowFlush onRef={flowFlushBigRef} currentItem={currentDetail} currentRow={currentRow} />
      </Drawer>
      {/*  单品报表 香烟记录 支付记录 */}
      <Drawer
        width={'60%'}
        visible={queryRecords}
        closable={false}
        bodyStyle={{ padding: 0 }}
        onClose={() => {
          setQueryRecords(false);
          setSelectQueryType(0)
        }}
        destroyOnClose={true}
      >
        <ReportDetail currentUser={currentUser} queryRecords={queryRecords} selectQueryType={selectQueryType} currentItem={currentDetail} currentRow={currentRow} />
      </Drawer>

      {/* 添加单品数据 */}
      <Drawer
        width={'60%'}
        visible={productsDrawer}
        closable={false}
        bodyStyle={{ padding: 0 }}
        onClose={() => {
          setProductsDrawer(false);
        }}
        destroyOnClose={true}
        footer={
          selectTab === 1 ?
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <Button type={'primary'} onClick={async () => {
                const resList: any = productDataRef.current?.selectShopList
                let isError: boolean = true
                if (resList && resList.length > 0) {
                  resList.forEach((item => {
                    if (item.Total_Count && item.Total_SellAmount && Number(item.Total_Count) !== 0 && Number(item.Total_SellAmount) !== 0) { } else {
                      isError = false
                    }
                  }))
                } else {
                  isError = false
                }

                if (isError) {
                  const req = {
                    EndaccountId: selectLeftTime,
                    CigaretteTypeCode: currentDetail.CigaretteType,
                    SaleCommodityList: resList
                  }
                  const data = await handleSaveAddShopData(req)
                  if (data.Result_Code === 100) {
                    flowFlushBigRef.current.handleGetDetail()
                    setProductsDrawer(false);
                  } else {
                    message.error(data.Result_Desc)
                  }
                } else {
                  message.error('请检查已选择的商品，销售数量和销售金额是否填写正确')
                }
              }}>保存</Button>
            </div>
            : ''
        }
      >
        <ProductData onRef={productDataRef} currentUser={currentUser} currentDetail={currentDetail} productsDrawer={productsDrawer} />
      </Drawer>

      {/*   稽核反馈列表点击出现的抽屉 稽核反馈表 */}
      <Drawer
        width={'50%'}
        visible={showAuditDrawer}
        closable={false}
        bodyStyle={{ padding: 0 }}
        onClose={() => {
          setShowAuditDrawer(false);
        }}
        destroyOnClose={true}
        footer={
          <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
            <div>
              <Button danger onClick={() => {
                auditDetailRef.current.setShowMoadl(!auditDetailRef.current.showModal)
              }}>上传单据</Button>
            </div>
            <div>
              <Button style={{ marginRight: '8px' }} onClick={() => {
                setExamineModal(true)
              }}>审核</Button>
              <Button type={'primary'} style={{ marginRight: '8px' }} onClick={() => {

              }}>保存</Button>
              <Button onClick={() => {
                setShowAuditDrawer(false);
              }}>关闭</Button>
            </div>
          </div>
        }
      >
        <AuditDetail onRef={auditDetailRef} isShow={showAuditDrawer} rowDetail={auditRowDetail} currentDetail={currentDetail} />
      </Drawer>

      <Modal
        title="审核意见"
        open={examineModal}
        destroyOnClose
        onOk={() => {
          examineForm.current?.validateFields().then(async (res: any) => {
            if (res) {
              const obj: any = {
                '查看视频': 1000,
                '稽核审核': 2000,
                '下载视频': 3000
              }
              const req = {
                VIDEOLOG_TYPE: 2000,
                CHECKACCOUNT_ID: auditRowDetail.Audit_Id,
                USER_ID: currentUser.ID,
                USER_NAME: currentUser.Name,
                OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'),
                VIDEOLOG_DESC: res.desc
              }
              const data = await handleExamine(req)
              if (data.Result_Code === 100) {
                message.success(data.Result_Desc)
                auditDetailRef.current?.handleDetail()
                setExamineModal(false)
              } else {
                message.error(data.Result_Desc)
              }
            }
          })

        }} onCancel={() => {
          setExamineModal(false)
        }}>
        <ProForm
          formRef={examineForm}
          submitter={{
            // 清空表单自带的按钮
            render: (props, doms) => {
              return []
            }
          }}
        >
          <ProFormTextArea
            label='审核备注'
            rules={[
              { required: true, message: '请输入审核备注' }
            ]}
            name='desc'
          />
        </ProForm>
      </Modal>

      <Modal
        width={1200}
        title="上传文件"
        open={upLoadModal}
        destroyOnClose
        footer={null}
        onOk={() => {
        }}
        onCancel={() => {
          setUpLoadModal(false)
        }}>
        <iframe
          width={1150}
          height={720}
          src={`https://eshangtech.com/uploadPhoto/index.html?id=${currentDetail?.Endaccount_Id}&tablename=ENDACCOUNT&readonly=&PopDialogName=IMAGEPage&Module_ID=3CD350DC5905D75D`} />
      </Modal>
    </div>
  )
};
export default ItemDetail