/*
 * @Author: cclu 1106109051@qq.com
 * @Date: 2023-09-11 09:19:25
 * @LastEditors: cclu 1106109051@qq.com
 * @LastEditTime: 2024-09-24 17:30:38
 * @FilePath: \cloud-platform\src\pages\reports\shareRoyalty\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';
import moment from 'moment';
import numeral from 'numeral';
import ReactToPrint from 'react-to-print';
import ProTable from '@ant-design/pro-table';
import ProCard from '@ant-design/pro-card';
import useRequest from '@ahooksjs/use-request';
import { connect, history } from 'umi';
import { useRef, useState } from 'react';
import { MenuFoldOutlined } from '@ant-design/icons';
import { Button, Col, DatePicker, Descriptions, Drawer, message, Modal, Row, Spin, Tree, Typography } from 'antd';

import type { ConnectState } from '@/models/connect';
import type { ProFormInstance } from '@ant-design/pro-form';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import type { CurrentUser } from '@/models/user';

import { getServerpartTree, handleGetEndDateMonth } from '@/services/options';
import { exportExcelaccountMonthly, exportExcelReceivedSum, printOutBody } from '@/utils/utils';
import '@/pages/merchantManagement/style.less';
import ProjectDetail from "@/pages/BussinessProject/detail";
import { getProjectDetail } from "@/pages/BussinessProject/service";
import ProjectEditor from "@/pages/BussinessProject/editor";
import { getYSSellMasterList } from '@/pages/merchantManagement/reports/SalesFlow/service';
import FlowDetail from '@/pages/merchantManagement/reports/SalesFlow/components/FlowDetail';
import type { YSSELLMASTERModel } from '@/pages/merchantManagement/reports/SalesFlow/data';

import './salesFlow.less'
import session from "@/utils/session";
import FlowDrawer from "@/pages/merchantManagement/mobilePayment/bankArrival/components/flowDrawer";
import type { MobilePayRoyaltyModel } from '@/pages/merchantManagement/mobilePayment/shareRoyalty/data';
import { getList, getNoShopList, GetSellMasterCompareList, handleSynchroBANKACCOUNTVERIFY } from '../shareRoyalty/service';
import { handleGetRoyaltyDateSumReport, handleGetRoyaltyReport } from "@/pages/reports/Finance/service";
import ReactHTMLTableToExcel from "react-html-table-to-excel";
import './accountMonthly.less'
import { trimEnd } from 'lodash';
import DifferenceAmount from '../shareRoyalty/component/differenceAmount';
import PageTitleBox from '@/components/PageTitleBox';

const { Text } = Typography;

/**
 * @description: 移动支付分账页面
 * @param {currentUser} 当前登录用户信息
 * @return { React.FC } 页面主体
 */
const ReportTable: React.FC<{ currentUser?: CurrentUser }> = (props) => {
  const { location } = history
  const { currentUser } = props
  const actionRef = useRef<ActionType>();
  const differenceRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();
  const formRef2 = useRef<ProFormInstance>();
  const formRefAdd = useRef<ProFormInstance>();
  const downloadBtnRef = useRef<any>()
  const [activeKey, setActiveKey] = useState<'1' | '2'>('1'); // 统计类型 1 日报表 2 月报表
  const [currentRow, setCurrentRow] = useState<any>(); // 当前选中行
  const [startTime, setStartTime] = useState<any>()// 开始时间
  const [endTime, setEndTime] = useState<any>()// 结束时间
  const [showDetail, setShowDetail] = useState<boolean>(false) // 是否显示详情
  const [reqBigDetailList, setReqBigDetailList] = useState<any>()// 外面的表格要导出的数据
  const [bigExportLoadingBtn, setBigExportLoadingBtn] = useState<boolean>(false)
  const [reqDetailList, setReqDetailList] = useState<MobilePayRoyaltyModel[]>(); // 导出excel表格
  const [printOut, setPrintOut] = useState<any>(); // 打印数据的内容
  const [showWarningDrawer, setShowWarningDrawer] = useState<boolean>(false)// 显示异常的抽屉
  const [noShopList, setNoShopList] = useState<any>()
  const [expandRow, setExpandRow] = useState<string[]>([]); // 选择打开的服务区
  const [showNewDetail, setShowNewDetail] = useState<boolean>(false)
  const [showNewAdd, setShowNewAdd] = useState<boolean>(false)
  const [collapsible, setCollapsible] = useState<boolean>(false)
  const [selectedId, setSelectedId] = useState<string>()
  // 显示单位:元旁边符号出现的悬浮框
  const [showNotice, setShowNotice] = useState<boolean>(false)
  // ProTable上方计算的汇总信息数据
  const [reduceTableData, setReduceTableData] = useState<any>()
  const [tableStart, setTableStart] = useState<any>()
  const [tableEnd, setTableEnd] = useState<any>()
  // 显示业主分润的顶层悬浮框
  const [showFirstNotice, setShowFirstNotice] = useState<boolean>(false)
  // 悬浮框的X轴坐标
  const [noticeX, setNoticeX] = useState<number>(0)
  // 悬浮框的Y轴坐标
  const [noticeY, setNoticeY] = useState<number>(0)
  // 拿到当前服务区id
  const [currentServerpartId, setCurrentServerpartId] = useState<any>()
  // 拿到当前的片区id
  const [currentSPRegionTypeID, setCurrentSPRegionTypeID] = useState<string>()
  const [tableDiffDays, setTableDiffDays] = useState<any>()
  // 所有管理中心的项目合计
  const [allProjectSum, setAllProjectSum] = useState<number>()
  // 流水抽屉
  const [flowDrawer, setFlowDrawer] = useState<boolean>(false)
  // 流水抽屉详情
  const [flowDetailList, setFlowDetailList] = useState<any>()
  // 流水悬浮框
  const [visible, setVisible] = useState<boolean>(false)
  // 移动支付分账报表的搜索时间
  const [bigSearchTime, setBigSearchTime] = useState<any>()
  const { loading: treeLoading, data: treeView } = useRequest(async () => {
    return getServerpartTree(currentUser?.ProvinceCode, currentUser?.CityAuthority, true, false, true)
  }) // 获取用户服务区权限树
  // 统计时间
  const [statisticsTime, setStatisticsTime] = useState<any>()
  // 差额的抽屉
  const [differenceDrawer, setDifferenceDrawer] = useState<boolean>(false)
  // 点开悬浮的选择时间 拿到老的一份统计时间
  const { RangePicker } = DatePicker;
  // 移动支付分账报表的真实搜索时间
  const [realSearchTime, setRealSearchTime] = useState<any>()
  // 项目详情
  const [projectDetail, setProjectDetail] = useState<any>()
  // 有计算公式的流水抽屉
  const [haveFlowDrawer, setHaveFlowDrawer] = useState<boolean>()
  // 抽屉的加载框
  const [drawerLoading, setDrawerLoading] = useState<boolean>(false)
  // 表格第一层的商家到账是否可以点击展开
  const [isFirstFloorClick, setIsFirstFloorClick] = useState<boolean>(false)
  const SETTLEMENTMODESOBJ = session.get('SETTLEMENT_MODESObj')
  const [collapseds, setCollapseds] = useState<boolean>(true)
  // 是否显示打印的表格
  const [showExportTable, setShowExportTable] = useState<boolean>(false)
  // 表格数据
  const [tableData, setTableData] = useState<any>()
  // 选择的展开行
  const [expandedRowKeys, setExpandedRowKeys] = useState<any>()
  // 表格单行columns的展开行
  // 判断展开行是不是已经在运行了
  const [columnsLoading, setColumnsLoading] = useState<boolean>(false)
  // 最外面的表格的加载效果
  const [bigTableLoading, setBigTableLoading] = useState<boolean>(false)
  // 移动支付分账统计列表导出
  const exportColumns: any = [
    {
      dataIndex: 'index',
      title: '服务区信息',
      hideInSearch: true,
      valueType: 'index',
      align: 'center',
      children: [
        {
          title: '管理中心',
          dataIndex: 'SPRegionType_Name',
          align: 'right',
          width: 200,
        },
        {
          title: '服务区',
          dataIndex: 'Serverpart_Name',
          align: 'right',
          width: 200,
        },
        {
          title: '门店',
          dataIndex: 'ServerpartShop_Name',
          align: 'right',
          width: 200,
        },
        {
          title: '项目数量',
          dataIndex: 'Project_Count',
          align: 'right',
          width: 80,
          render: (_, record) => {
            return record?.ServerpartShop_Name ? '-' : record?.Project_Count
          }
        },
      ]
    }
  ]

  // 移动支付分账统计列表
  const columns: ProColumns<any>[] = [
    {
      dataIndex: 'DataType',
      // title: '统计方式',
      valueType: "radioButton",
      initialValue: '1',
      // colSize: 1,
      // colSpan: 4,
      valueEnum: {
        2: { text: '月报' },
        1: { text: '日报' },
      },
      hideInTable: true,
      hideInSearch: showDetail,
      fieldProps: {
        onChange: (event: any) => {
          setActiveKey(event.target.value)
          formRef.current?.submit()
        },
        labelCol: { span: 3, offset: 24 },
        // wrapperCol: { span: 24 }
      },
    },
    {
      title: '统计时间',
      dataIndex: 'search_date',
      valueType: 'dateRange',
      hideInTable: true,
      hideInDescriptions: true,
      hideInSearch: activeKey === '2' || showDetail,
      initialValue: location.query?.StartDate ? [location.query?.StartDate, location.query?.EndDate] :
        [moment().subtract(1, 'day').startOf('day').format('YYYY-MM-DD'), moment().subtract(1, 'day').startOf('day').format('YYYY-MM-DD')],
      search: {
        transform: (value) => {
          return {
            StartDate: value[0],
            EndDate: value[1],
          };
        },
      },
      fieldProps: {
        disabledDate: (current: any) => current && current > moment().endOf('day')
      }
    },
    {
      title: '经营商户',
      dataIndex: 'searchText',
      hideInTable: true,
      hideInSearch: showDetail,
      hideInDescriptions: true,
      fieldProps: {
        placeholder: '请输入经营商户'
      }
    },
    {
      title: '统计月份',
      dataIndex: 'search_months',
      valueType: "dateRange",
      hideInTable: true,
      hideInDescriptions: true,
      hideInSearch: activeKey === '1',
      initialValue: [moment().startOf("month").format('YYYY-MM-DD'), moment().subtract(1, "days").format('YYYY-MM-DD')],
      search: {
        transform: (value) => {
          return {
            StartDate: moment(value[0]).startOf("month").format('YYYY-MM-DD'),
            EndDate: moment(value[1]).endOf("month").format('YYYY-MM-DD'),
          };
        },
      },
      fieldProps: {
        picker: "month",
        format: 'YYYY-MM',
        // disabledDate: (current: any) => current && current > moment().subtract(2, 'months').startOf("month")
      }
    },
    {
      dataIndex: 'index',
      // title: () => <Text strong>服务区信息</Text>,
      title: '服务区信息',
      hideInSearch: true,
      valueType: 'index',
      align: 'center',
      children: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          valueType: 'index',
          align: 'center',
          hideInTable: true,
          width: 120,
          render: (_, record) => {
            // return (!record?.Serverpart_ID || record?.Serverpart_ID === null) ? '' : _?.props.text + 1
            return <span>{record.index}</span>
          },
        },
        {
          title: showDetail ? '服务区/门店' : '统计日期',
          dataIndex: 'shopName',
          key: 'shopName',
          width: 300,
          hideInSearch: true,
          render: (_, record) => {
            if (record?.Statistics_Date && record?.level === 1) {
              return <div>
                <a onClick={() => {
                  console.log('record', record);

                  setCurrentRow(record);
                  setShowDetail(true);
                }}>{record?.Statistics_Date}</a>
                {
                  record?.Royalty_DiffPrice > 0 || record?.Royalty_DiffPrice < 0 ?
                    <a style={{ marginLeft: '16px' }} onClick={async () => {
                      setBigTableLoading(true)
                      console.log('record', record);
                      const req: any = {
                        StartDATE: record?.Statistics_Date,
                        EndDATE: record?.Statistics_Date,
                        SERVERPART_IDS: selectedId,
                        STAFF_NAME: currentUser?.Name,
                        STAFF_ID: currentUser?.ID,
                        OPRATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss')
                      }
                      const data = await handleSynchroBANKACCOUNTVERIFY(req)
                      console.log('data', data);
                      if (data.Result_Code === 100) {
                        message.success(data.Result_Desc)
                        actionRef.current?.reload()
                      } else {
                        message.error(data.Result_Desc)
                      }
                      setBigTableLoading(false)
                    }}>固化数据</a>
                    : ''
                }
              </div>
            }
            // if (record?.ServerpartShop_Name && record?.Business_Unit){
            //   return <p><span>{record.ServerpartShop_Name}</span><span style={{marginLeft:'10px'}}>{record.Business_Unit}</span></p>
            // }
            return <span style={{
              color:
                record?.ServerpartShop_Name && !record?.ServerpartShop_ID ? '#1890ff' : record?.Show_Warning ? 'red' : '', cursor: 'pointer'
            }} onClick={async () => {
              console.log('record', record)
              if (record?.ServerpartShop_Name && !record?.ServerpartShop_ID) {
                if (record?.BusinessProject_ID) {
                  const data = await getProjectDetail(record?.BusinessProject_ID)
                  console.log('data', data)
                  setCurrentRow(data);
                  setShowNewDetail(true)
                } else {
                  setCurrentServerpartId(record.Serverpart_ID)
                  setCurrentSPRegionTypeID(record.SPRegionType_ID)
                  const current = {
                    PROJECT_VALID: 1,
                    MULTIPROJECT_STATE: 0,
                    SEGMENTED_MODE: 1
                  }
                  formRefAdd.current?.setFieldsValue(current)
                  setCurrentRow(current)
                  setShowNewAdd(true)
                }
              }

            }}>
              {record?.ServerpartShop_Name ? record?.ServerpartShop_Name : record?.Serverpart_Name ? record?.Serverpart_Name : record?.SPRegionType_Name ? record?.SPRegionType_Name : ''}
              {/* {record?.SPRegionType_Name ? record?.SPRegionType_Name : record?.Serverpart_Name ? record?.Serverpart_Name : record?.ServerpartShop_Name} */}
            </span>
          }
        },
        {
          title: '项目数量',
          dataIndex: 'Project_Count',
          align: 'right',
          width: 80,
          render: (_, record) => {
            return record?.ServerpartShop_Name ? '-' : record?.Project_Count
          }
        },
        {
          title: '经营商家',
          dataIndex: 'Business_Unit',
          ellipsis: true,
          key: 'Business_Unit',
          hideInSearch: true,
          hideInTable: true,
          render: (_, record) => {
            return <span style={{
              color:
                record?.Show_Warning ? 'red' : ''
            }}>
              {
                record?.Show_Warning ? record?.BusinessProject_ID ? '结算模式错误,请修改' : '未建经营项目,请添加' : record?.Business_Unit
              }
              {/* { */}
              {/*   !record?.Royalty_Price && !record?.RoyaltyProject_Price && !record?.Royalty_DiffPrice?record?.Business_Unit: */}
              {/*   !record?.RoyaltyProject_Price && record?.ServerpartShop_Name && !record?.ServerpartShop_ID? */}
              {/*   record?.BusinessProject_ID?'结算模式错误,请修改':'未建经营项目,请添加' */}
              {/*   :record?.Business_Unit */}
              {/* } */}
            </span>
          }
        }
      ]
    },
    {
      // title: () => <Text strong>合计',
      title: '业主分润',
      hideInSearch: true,
      align: 'center',
      children: [
        {
          title: '银行到账',
          dataIndex: 'Royalty_Price',
          width: 105,
          align: 'right',
          sorter: (a, b) => a.Royalty_Price - b.Royalty_Price,
          render: (_, record) => {
            return record?.Royalty_Price ? numeral(record.Royalty_Price).format('0,0.00') : '-'
          },
        },
        {
          title: '项目到账',
          width: 105,
          dataIndex: 'RoyaltyProject_Price',
          align: 'right',
          sorter: (a, b) => a.RoyaltyProject_Price - b.RoyaltyProject_Price,
          render: (_, record) => {
            return record?.RoyaltyProject_Price ? numeral(record.RoyaltyProject_Price).format('0,0.00') : '-'
          },
        },
        {
          title: '差额',
          width: 105,
          dataIndex: 'Royalty_DiffPrice',
          align: 'right',
          sorter: (a, b) => a.Royalty_DiffPrice - b.Royalty_DiffPrice,
          render: (_, record) => {
            return <span style={{ color: record?.Royalty_DiffPrice ? 'red' : '' }}>
              {record?.Royalty_DiffPrice ? numeral(record.Royalty_DiffPrice).format('0,0.00') : '-'}
            </span>
          },
        },
      ]
    },
    {
      // title: () => <Text strong>合计',
      title: '交易到账',
      hideInSearch: true,
      children: [
        // {
        //     title: '交易金额',
        //     dataIndex: 'Ticket_Price',
        //     align: 'right',
        //     width: 100,
        //     sorter: (a, b) => {
        //         return a.Ticket_Price - b.Ticket_Price
        //     },
        //     render: (_, record) => {
        //         return record?.Ticket_Price ? numeral(record.Ticket_Price).format('0,0.00') : '-'
        //     },
        // },
        {
          title: '本地流水',
          dataIndex: 'MobilePay_Price',
          width: 100,
          align: 'right',
          // hideInTable: true,
          hideInSearch: true,
          sorter: (a, b) => {
            return a.MobilePay_Price - b.MobilePay_Price
          },
          render: (_, record) => {
            return <>
              {
                (record?.ServerpartShop_Name && !record?.ServerpartShop_ID) ?
                  <span style={{ color: '#1890ff', cursor: 'pointer' }}
                    onClick={() => {
                      console.log('record', record);
                      console.log('bigSearchTime', bigSearchTime);
                      // setCurrentRow(record)
                      // setFlowDrawer(true)
                      const res = JSON.parse(JSON.stringify(record))
                      res.Statistics_Date = moment(statisticsTime[1]).format('YYYY-MM-DD')
                      res.BusinessProject_Id = record.BusinessProject_ID
                      res.ServerpartShop_ID = record.newServerpartShop_ID
                      res.Serverpart_Name = record.newServerpart_Name
                      setCurrentRow(res);
                      setHaveFlowDrawer(true);
                    }}>
                    {record?.MobilePay_Price ? numeral(record.MobilePay_Price).format('0,0.00') : '-'}
                  </span> :
                  <span>{record?.MobilePay_Price ? numeral(record.MobilePay_Price).format('0,0.00') : '-'}</span>

                //   : record.type === 'shop' ?<span style={{color:'#faad14', cursor: 'pointer'}} onClick={()=>{
                //   const res = JSON.parse(JSON.stringify(record))
                //   res.Statistics_Date = moment(statisticsTime[1]).format('YYYY-MM-DD')
                //   res.BusinessProject_Id = record.BusinessProject_ID
                //   setCurrentRow(res);
                //   setHaveFlowDrawer(true);
                // }}>{record?.MobilePay_Price ? numeral(record.MobilePay_Price).format('0,0.00') : '-'}</span> :
              }
            </>
          },
        },
        {
          title: '上游流水',
          dataIndex: 'Ticket_Price',
          align: 'right',
          width: 100,
          hideInSearch: true,
          sorter: (a, b) => {
            return a.Ticket_Price - b.Ticket_Price
          },
          render: (_, record) => {
            return record?.Ticket_Price ? numeral(record.Ticket_Price).format('0,0.00') : '-'
          },
        },
        {
          title: '差额',
          dataIndex: '',
          width: 100,
          // hideInTable: true,
          hideInSearch: true,
          sorter: (a, b) => {
            return (a.Ticket_Price - a.MobilePay_Price) - (b.Ticket_Price - b.MobilePay_Price)
          },
          render: (_, record) => {
            const num = record?.Ticket_Price - record?.MobilePay_Price
            return <span style={{ color: num > 0 ? '#60cf60' : num < 0 ? 'red' : '', cursor: record?.index && record?.index.indexOf('.') !== -1 && record?.Ticket_Price - record?.MobilePay_Price !== 0 ? 'pointer' : '' }} onClick={async () => {
              if (record?.index && record?.index.indexOf('.') !== -1 && record?.Ticket_Price - record?.MobilePay_Price !== 0) {
                console.log('record', record)
                setCurrentRow(record)
                setDifferenceDrawer(true)
                // console.log('record?.BusinessProject_ID', record?.BusinessProject_ID)
                // const data = await getProjectDetail(record?.BusinessProject_ID)
                // setProjectDetail(data)
                // console.log('data', data)
              }
            }}>
              {numeral(record?.Ticket_Price - record?.MobilePay_Price).format('0,0.00')}
            </span>
          },
        },
        {
          title: '到账金额',
          dataIndex: 'Account_Price',
          align: 'right',
          width: 100,
          sorter: (a, b) => {
            return a.Account_Price - b.Account_Price
          },
          render: (_, record) => {
            return record?.Account_Price ? numeral(record.Account_Price).format('0,0.00') : '-'
          },
        },
      ]
    },
    {
      // title: () => <Text strong>合计',
      title: '商家分润',
      hideInSearch: true,
      children: [
        {
          title: '到账金额',
          dataIndex: 'SubRoyalty_Price',
          width: 105,
          align: 'right',
          sorter: (a, b) => a.SubRoyalty_Price - b.SubRoyalty_Price,
          render: (_, record) => {
            return record?.SubRoyalty_Price ? numeral(record.SubRoyalty_Price).format('0,0.00') : '-'
          },
        },
        {
          title: '手续费',
          dataIndex: 'Ticket_Fee',
          width: 105,
          align: 'right',
          sorter: (a, b) => a.Ticket_Fee - b.Ticket_Fee,
          render: (_, record) => {
            return record?.Ticket_Fee ? numeral(record.Ticket_Fee).format('0,0.00') : '-'
          },
        },
      ]
    },

  ];
  // 移动支付流水清单
  const columnsRecord: ProColumns<any>[] = [
    {
      dataIndex: 'Ticket_Code',
      title: '订单编号',
      align: 'center',
      hideInTable: true,
      hideInDescriptions: true,
      colSize: 2
    },
    {
      // title: () => <Text strong>合计',
      title: '订单信息',
      hideInSearch: true,
      children: [
        {
          dataIndex: 'Pay_Date',
          title: '交易时间',
          align: 'center',
          hideInSearch: true,
          hideInDescriptions: true,
          sorter: true,
          defaultSortOrder: 'descend',
        },
        {
          dataIndex: 'Ticket_Code',
          title: '订单编号',
          align: 'center',
          hideInDescriptions: true,
        },
        {
          dataIndex: 'Machine_Code',
          title: '机器编码',
          align: 'center',
          hideInSearch: true,
          hideInDescriptions: true,
        },
        {
          dataIndex: 'Ticket_Price',
          title: '交易金额',
          align: 'right',
          hideInSearch: true,
          hideInDescriptions: true,
        },
        {
          dataIndex: 'Account_Price',
          title: '到账金额',
          align: 'right',
          hideInSearch: true,
          hideInDescriptions: true,
        },
      ]
    },
    {
      // title: () => <Text strong>合计',
      title: '商家分润',
      hideInSearch: true,
      children: [
        {
          dataIndex: 'SubRoyalty_Price',
          title: '到账金额',
          align: 'right',
          hideInSearch: true,
          hideInDescriptions: true,
        },
        {
          dataIndex: 'Ticket_Fee',
          title: '手续费',
          align: 'right',
          hideInSearch: true,
          hideInDescriptions: true,
        },
      ]
    },
    {
      // title: () => <Text strong>合计',
      title: '业主分润',
      hideInSearch: true,
      children: [
        {
          title: '到账金额',
          dataIndex: 'Royalty_Price',
          align: 'right',
          hideInSearch: true,
          hideInDescriptions: true,
        },
        {
          title: '分账比例',
          dataIndex: 'Royalty_Rate',
          align: 'right',
          hideInSearch: true,
          hideInDescriptions: true,
          render: (_, record) => {
            return record?.Royalty_Rate && record?.SubRoyalty_Rate ? `${record.Royalty_Rate / 100}:${record.SubRoyalty_Rate / 100}` : ''
          },
        },
      ]
    }
  ];
  // 流水的
  const flowColumns: ProColumns<YSSELLMASTERModel>[] = [

    {
      dataIndex: 'index',
      title: '序号',
      hideInSearch: true,
      valueType: 'index',
      fixed: true,
      align: 'center',
      width: 48,
    },
    {
      dataIndex: 'SELLMASTER_DATE',
      valueType: "dateRange",
      title: '销售时间',
      align: 'center',
      initialValue: bigSearchTime || [moment().subtract(1, 'day').startOf('day').format('YYYY-MM-DD'), moment().subtract(1, 'day').startOf('day').format('YYYY-MM-DD')],
      render: (_, record) => {
        return record?.SELLMASTER_DATE
      },
      fieldProps: {
        disabledDate: (current: any) => current && current > moment()
      },
      search: {
        transform: (value) => {
          return {
            SELLMASTER_DATE_Start: moment(value[0]).format('YYYY-MM-DD'),
            SELLMASTER_DATE_End: moment(value[1]).format('YYYY-MM-DD'),
          };
        },
      },
    },
    {
      dataIndex: 'TICKET_CODE',
      title: '小票编号',
      hideInSearch: true,
      align: 'center',
    },
    {
      dataIndex: 'SELLMASTER_COUNT',
      title: '销售数量',
      hideInSearch: true,
      align: 'right',
      sorter: (a, b) => a.SELLMASTER_COUNT - b.SELLMASTER_COUNT
    },


    {
      dataIndex: 'SELLMASTER_AMOUNT',
      title: '实收金额',
      hideInSearch: true,
      valueType: "money",
      align: 'right',
      sorter: (a, b) => a.SELLMASTER_AMOUNT - b.SELLMASTER_AMOUNT
    },
    {
      dataIndex: 'SELLMASTER_OFFPRICE',
      title: '优惠金额',
      hideInSearch: true,
      valueType: "money",
      align: 'right',
      sorter: (a, b) => a.SELLMASTER_OFFPRICE - b.SELLMASTER_OFFPRICE
    },
    {
      dataIndex: 'PAYMENT_TYPE_TEXT',
      title: '支付方式',
      hideInSearch: true,
      align: 'center',
    },

    {
      dataIndex: 'SHOPNAME',
      hideInSearch: true,
      title: '门店名称',
      align: 'center',
      width: '12%',
    },
    {
      dataIndex: 'MACHINECODE',
      hideInSearch: true,
      title: '收银机号',
      align: 'center',
    },
    {
      dataIndex: 'SELLWORKER_NAME',
      hideInSearch: true,
      title: '收银人员',
      align: 'center',
    }

  ];
  // 差额的
  const differenceColums: any = [
    {
      title: '收银系统',
      dataIndex: '',
      children: [
        {
          title: '服务区名称',
          dataIndex: 'ServerpartName',
          align: 'center',
        },
        {
          title: '门店名称',
          dataIndex: 'ServerpartShopName',
          align: 'center',
        },
        {
          title: '收银机号',
          dataIndex: 'MachineCode',
          align: 'center',
        },
        {
          title: '交易时间',
          dataIndex: 'PayDateStr',
          align: 'center',
        },
        {
          title: '订单金额',
          dataIndex: 'MobilePayAmount',
          align: 'right',
        },
        {
          title: '交易结果',
          dataIndex: 'MobileRecordState',
        },
      ]
    },
    {
      title: '渠道返回',
      dataIndex: '',
      children: [
        {
          title: '渠道返回',
          dataIndex: 'KwyRecordState',
        },
        {
          title: '交易金额',
          dataIndex: 'KwyAmount',
          align: 'right',
        },
      ]
    },
    {
      title: '订单信息',
      dataIndex: '',
      children: [
        {
          title: '订单编号',
          dataIndex: 'TradeNo',
          align: 'center',
        },
        {
          title: '支付方式',
          dataIndex: 'PaymentType',
          align: 'center',
        },
      ]
    }
  ]
  const getRightTime = (time: any) => {
    // const [start,end] = [moment(time[0]).format('YYYY/MM/DD'),moment(time[1]).format('YYYY/MM/DD')]
    if (moment().format('YYYY/MM') === moment(time[0]).format('YYYY/MM') || moment().format('YYYY/MM') === moment(time[1]).format('YYYY/MM')) {
      setStartTime(moment(time[0]).startOf("month").format('YYYY/MM/DD'))
      setEndTime(moment().subtract(1, "days").format('YYYY/MM/DD'))
      return [moment(time[0]).startOf("month").format('YYYY-MM-DD'), moment().subtract(1, "days").format('YYYY-MM-DD')]
    }
    setStartTime(moment(time[0]).startOf("month").format('YYYY/MM/DD'))
    setEndTime(moment(time[1]).endOf("month").format('YYYY/MM/DD'))
    return [moment(time[0]).startOf("month").format('YYYY-MM-DD'), moment(time[1]).endOf("month").format('YYYY-MM-DD')]
  }

  //   导出excel方法
  const exportTable = (e) => {
    e.stopPropagation();                                            // 防止Collapse组件收起
    const main = document.getElementsByClassName('accountMonthlyHideBox')[0]
    const thead = main.querySelector('thead').cloneNode(true);  // 深克隆DOM节点
    const tbody = main.querySelector('tbody').cloneNode(true);  // 深克隆DOM节点
    const container = document.querySelector('#hiddenBox');

    const tempTable = document.createElement('table');
    tempTable.appendChild(thead);
    tempTable.appendChild(tbody);

    tempTable.setAttribute('id', 'table-to-xls-accountMonthly');                    // 给table添加id，值与按钮上的table字段对应

    container.appendChild(tempTable);                                // 把创建的节点添加到页面容器中

    downloadBtnRef.current.handleDownload();
    setShowExportTable(false)
  }

  const exportExternalHideTable = (e) => {
    e.stopPropagation();                                            // 防止Collapse组件收起
    const main = document.getElementsByClassName('accountMonthlyExternalHideBox')[0]
    const thead = main.querySelector('thead').cloneNode(true);  // 深克隆DOM节点
    const tbody = main.querySelector('tbody').cloneNode(true);  // 深克隆DOM节点
    const container = document.querySelector('#hiddenBox');

    const tempTable = document.createElement('table');
    tempTable.appendChild(thead);
    tempTable.appendChild(tbody);

    tempTable.setAttribute('id', 'table-to-xls-accountMonthlyExternalHideBox');                    // 给table添加id，值与按钮上的table字段对应

    container.appendChild(tempTable);                                // 把创建的节点添加到页面容器中

    downloadBtnRef.current.handleDownload();
    setBigExportLoadingBtn(false)
  }

  // 寻找展开的行 加上加载效果
  const addLoadingRow = (name: string) => {
    const main = document.getElementsByClassName(`accountMonthlyTable`)[0]

    const pageLoading = document.getElementsByClassName(`pageLoading`)[0]

    const row = main.getElementsByClassName(`${name}`)[0]
    console.log('row', row);

    const loadingBox = document.createElement('tr');
    const span = document.createElement('span');
    const Spin = pageLoading.cloneNode(true);  // 深克隆DOM节点
    span.innerText = '加载中...';
    Spin.setAttribute('class', 'rowLoadingSpin');
    span.setAttribute('class', 'span');

    loadingBox.appendChild(Spin);
    loadingBox.appendChild(span);
    loadingBox.setAttribute('class', 'accountMonthlyLoadingBox');
    row?.parentNode.insertBefore(loadingBox, row.nextSibling)
  }
  // 寻找展开的行 去除加载效果
  const removeLoadingRow = (name: string) => {
    const main = document.getElementsByClassName(`accountMonthlyTable`)[0]
    const pageLoading = document.getElementsByClassName(`accountMonthlyLoadingBox`)[0]
    pageLoading.remove() // 防止重复打印一个内容
  }

  // 拿到最外面表格的全部导出数据
  const handleGetExportBigData = async (list: any) => {

    if (list && list.length > 0) {
      setBigExportLoadingBtn(true)
      const result: any = JSON.parse(JSON.stringify(list))
      for (let i = 0; i < list.length; i++) {
        const obj: any = list[i]
        const searchText = formRef.current?.getFieldValue('searchText')
        const req: any = {
          StartDate: obj?.Statistics_Date,
          EndDate: obj?.Statistics_Date,
          ServerpartIds: selectedId,
          Keyword: searchText || ''
        }
        const data = await handleGetRoyaltyReport(req)
        console.log('time', obj?.Statistics_Date);
        const res: any = data.data
        if (res && res.length > 0) {
          result.forEach((item: any) => {
            if (item.Statistics_Date === obj?.Statistics_Date) {
              item.children = res
            }
          })
        }
        console.log('result', result);
        setReqBigDetailList(result)
      }
      setBigExportLoadingBtn(false)
    }
  }


  return (
    <div
      className={'bigBox'}
      style={{ height: 'calc(100vh - 132px)', overflowY: 'auto' }}
      ref={(el) => {
        // 打印报表
        if (!reqDetailList || reqDetailList.length === 0) return;
        setPrintOut(el);
      }}
      onScroll={(e) => {
        if (e.target.scrollTop > 100) {
          setShowFirstNotice(true)
        } else {
          setShowFirstNotice(false)
        }
      }}
    >
      <Spin style={{ display: 'none' }} className={'pageLoading'} />
      <div className={'accountMonthlyHideBox'} style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }}>
        {
          showExportTable && reqDetailList && reqDetailList.length > 0 ?
            <ProTable
              columns={[...exportColumns, ...columns.slice(5, columns.length)]}
              dataSource={reqDetailList}
              pagination={false}
              expandable={{
                defaultExpandAllRows: true
              }}
            /> : ''
        }
      </div>
      <div className={'accountMonthlyExternalHideBox'} style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }}>
        {
          showExportTable && reqBigDetailList && reqBigDetailList.length > 0 ?
            <ProTable
              // columns={[{title:'统计日期',dataIndex:'Statistics_Date'},...exportColumns, ...columns.slice(5, columns.length)]}
              columns={[...columns.slice(4, columns.length)]}
              dataSource={reqBigDetailList}
              pagination={false}
              expandable={{
                defaultExpandAllRows: true
              }}
            /> : ''
        }
      </div>
      <div id='hiddenBox' style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }} />
      {/* height: 'calc(100vh - 66px)', */}
      <div style={{ backgroundColor: '#fff', width: '100%', display: 'flex' }}>
        <ProCard
          className="pageTable-leftnav"
          style={{ width: !collapsible ? "240px" : "60px" }}
          headStyle={{ width: !collapsible ? "240px" : "60px" }}
          bodyStyle={{ padding: 0, paddingTop: 20, paddingLeft: 20, width: !collapsible ? "240px" : "60px" }}
          extra={<MenuFoldOutlined onClick={() => {
            setCollapsible(!collapsible)
          }} />}
          colSpan={!collapsible ? "240px" : "60px"}
          title={!collapsible ? "可筛选门店" : ""}
          headerBordered
          collapsed={collapsible}
        >
          {treeView && treeView.length > 0 ? <Tree
            checkable
            treeData={!treeLoading ? [{
              label: '全部',
              value: 0,
              key: '0-0',
              children: treeView
            }] : []}
            fieldNames={{
              title: "label",
              key: "key"
            }}
            blockNode
            defaultExpandedKeys={['0-0']}
            onCheck={(checkedKeys: React.Key[] | any, info) => {
              const selectedIds = info.checkedNodes.filter(n => n?.type === 1)
              setSelectedId(selectedIds.map(n => n?.value)?.toString() || '')
              // actionRef?.current?.reload()
            }}
          /> : ''}
        </ProCard>
        <div style={{
          paddingTop: 0,
          paddingBottom: 0,
          paddingRight: 0,
          width: `calc(100% - ${!collapsible ? 240 : 60}px)`
        }}>
          {
            showNotice ?
              <div onClick={() => {
                setShowNotice(!showNotice)
              }} style={{
                position: 'fixed', background: '#fff', padding: '15px',
                borderRadius: '8px',
                width: '70vw',
                left: '440px',
                top: `${noticeY}px`,
                zIndex: 99,
                boxShadow: '0px 9px 28px 8px rgba(0,0,0,0.05), 0px 6px 16px 0px rgba(0,0,0,0.08), 0px 3px 6px -4px rgba(0,0,0,0.12)'
              }}>
                <Row>
                  <Col span={12}>
                    <Descriptions
                      title={<Text type="success" style={{ color: "#1890ff", fontSize: 14 }}>商家分润</Text>}
                      size="small" className="commity-sale-description" column={2}
                      contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }}
                    >
                      <Descriptions.Item
                        label="到账金额">¥{numeral(reduceTableData?.SubRoyalty_Price).format('0,0.00')}</Descriptions.Item>
                      <Descriptions.Item
                        label="手续费">¥{numeral(reduceTableData?.Ticket_Fee).format('0,0.00')}</Descriptions.Item>
                    </Descriptions>
                  </Col>
                </Row>
                <Row>
                  <Col span={24}>
                    <Descriptions
                      title={<Text type="success" style={{ color: "#1890ff", fontSize: 14 }}>交易到账汇总</Text>}
                      size="small" column={4}
                      className="commity-sale-description"
                      contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }}
                    >
                      <Descriptions.Item
                        label="交易金额">¥{numeral(reduceTableData?.Ticket_Price).format('0,0.00')}</Descriptions.Item>
                      <Descriptions.Item
                        label="到账金额">¥{numeral(reduceTableData?.Account_Price).format('0,0.00')}</Descriptions.Item>
                      {
                        activeKey === '1' ?
                          <Descriptions.Item
                            label="统计时间">{`${moment(tableStart).format('YYYY/MM/DD')}-${moment(tableEnd).format('YYYY/MM/DD')} `}
                            <Text type="secondary">( 共{numeral(tableDiffDays).format('0')}日 )</Text>
                          </Descriptions.Item> :
                          <Descriptions.Item label="统计时间">{`${startTime}-${endTime} `}</Descriptions.Item>
                      }
                    </Descriptions>
                  </Col>
                </Row>
              </div> : ''
          }
          {
            showNotice ?
              <div style={{
                width: '100vw',
                height: '100vh',
                position: 'fixed',
                top: '0px',
                left: '0px',
                zIndex: 100
              }} onClick={() => {
                setShowNotice(false)
              }}></div> : ''
          }
          {
            showFirstNotice ?
              <div style={{
                width: `calc(100% - ${!collapsible ? 520 : 340}px)`,
                position: 'fixed',
                top: '100px',
                right: '24px',
                background: '#fff',
                zIndex: 999,
                padding: '8px 0'
              }}>
                <Row>
                  <Col span={24}>
                    <div style={{ paddingBottom: '12px' }}>
                      <span style={{ color: 'rgb(24, 144, 255)', fontSize: '14px', fontWeight: 600 }}>业主分润</span>
                      <div style={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        boxSizing: 'border-box',
                        padding: '0 16px 0 0',
                        marginTop: '12px'
                      }}>
                        <div style={{ width: '240px', display: 'flex', alignItems: 'center' }}>
                          <span style={{
                            color: 'rgba(0, 0, 0, 0.45)',
                            fontSize: '14px',
                            fontWeight: 'normal'
                          }}>到账金额：</span>
                          <div style={{ display: 'flex', alignItems: 'flex-end', height: '22px' }}>
                            <span style={{ fontWeight: 'normal', marginRight: '2px' }}>¥</span>
                            <span style={{
                              fontSize: '28px',
                              color: '#faad14',
                              fontWeight: 500,
                              lineHeight: '28px'
                            }}>{numeral(reduceTableData.Royalty_Price || 0).format('0,0.00')}</span>
                          </div>
                        </div>
                        <div style={{ width: '150px', display: 'flex', alignItems: 'center' }}>
                          <span style={{
                            color: 'rgba(0, 0, 0, 0.45)',
                            fontSize: '14px',
                            fontWeight: 'normal'
                          }}>分润项目：</span>
                          <div style={{ display: 'flex', alignItems: 'flex-end', height: '22px' }}>
                            <span style={{ fontWeight: 'normal', marginRight: '2px' }}></span>
                            <span style={{
                              fontSize: '28px',
                              color: '#faad14',
                              fontWeight: 500,
                              lineHeight: '28px'
                            }}>{numeral(allProjectSum || 0).format('0,0')}</span>
                          </div>
                        </div>
                        <div style={{ width: '170px' }}>
                          <div style={{ display: 'flex', alignItems: 'center' }}>
                            <span style={{
                              color: 'rgba(0, 0, 0, 0.45)',
                              fontSize: '14px',
                              fontWeight: 'normal'
                            }}>项目到账：</span>
                            <span style={{
                              color: 'rgba(0, 0, 0, 0.85',
                              fontWeight: 'bold'
                            }}>{numeral(reduceTableData.RoyaltyProject_Price || 0).format('0,0.00')}</span>
                          </div>
                        </div>
                        <div style={{ width: '150px' }}>
                          <div style={{ display: 'flex', alignItems: 'center' }}>
                            <span style={{
                              color: 'rgba(0, 0, 0, 0.45)',
                              fontSize: '14px',
                              fontWeight: 'normal'
                            }}>差额：</span>
                            <span style={{
                              color: 'rgba(0, 0, 0, 0.85',
                              fontWeight: 'bold'
                            }}>{numeral(reduceTableData.Royalty_DiffPrice || 0).format('0,0.00')}</span>
                          </div>
                        </div>
                        <div style={{ width: '440px', display: 'flex', alignItems: 'center' }}>
                          <span style={{
                            color: 'rgba(0, 0, 0, 0.45)',
                            fontSize: '14px',
                            fontWeight: 'normal'
                          }}>统计时间：</span>
                          <RangePicker
                            value={statisticsTime}
                            onChange={(e: any) => {
                              if (e) {
                                console.log('e', e)
                                setStatisticsTime([moment(e[0]._d), moment(e[1]._d)])
                                formRef.current?.setFieldsValue({ search_date: [moment(e[0]._d).format('YYYY-MM-DD'), moment(e[1]._d).format('YYYY-MM-DD')] })
                              } else {
                                setStatisticsTime(undefined)
                              }
                            }}
                            disabledDate={(current: any) => current && current > moment()}
                          />
                          <Button type={'primary'} style={{ marginLeft: '8px' }} onClick={() => {
                            actionRef.current?.reload()
                          }}>查询</Button>
                        </div>
                      </div>
                    </div>
                  </Col>
                </Row>
              </div> : ''
          }
          <ProTable
            rowKey={(record) => {
              return `${record.Statistics_Date}-${record.index}-${record.SPRegionType_ID}-${record.SPRegionType_Name}-${record.Serverpart_ID}-${record.Serverpart_Name}-${record.ServerpartShop_Name}`
            }}
            rowClassName={(record) => {
              return `${record.Statistics_Date}-${record.index}-${record.SPRegionType_ID}-${record.SPRegionType_Name}-${record.Serverpart_ID}-${record.Serverpart_Name}-${record.ServerpartShop_Name}`
            }}
            formRef={formRef}
            loading={bigTableLoading}
            className={'accountMonthlyTable'}
            actionRef={actionRef}
            search={{
              span: 6,
              labelWidth: 100,
              // collapsed: collapseds, // 状态可控
              // onCollapse: (value: boolean) => { // 通过方法手动修改状态
              //   setCollapseds(value)
              // }
            }}
            request={async (params) => {
              if (!selectedId) {
                return
              }
              console.log('params', params);
              if (params && params.StartDate && params.EndDate) {
                setBigSearchTime([params.StartDate, params.EndDate])
                // setStatisticsTime([moment(params.StartDate),moment(params.EndDate)])
                setRealSearchTime([moment(params.StartDate).format('YYYY-MM-DD'), moment(params.EndDate).format('YYYY-MM-DD')])
              } else {
                setBigSearchTime(undefined)
                // setStatisticsTime(undefined)
              }
              const time = formRef.current?.getFieldValue('search_date')
              console.log('time', time)
              if (time && time.length > 0) {
                setStatisticsTime([moment(time[0]), moment(time[1])])
                if (activeKey === '1') {
                  params.StartDate = moment(time[0]).format('YYYY-MM-DD')
                  params.EndDate = moment(time[1]).format('YYYY-MM-DD')
                } else {
                  params.StartDate = moment(time[0]).startOf('months').format('YYYY-MM-DD')
                  // 现在要传月份的 也要传入到具体日期
                  // 这样的话就要判断结束月份的时间 最大只能是昨天 所以要做判断
                  params.EndDate = handleGetEndDateMonth(moment(time[1]).format('YYYY-MM'))
                }
              }
              setBigTableLoading(true)
              console.log('params', params)
              const data = await handleGetRoyaltyDateSumReport({
                StartDate: params.StartDate,
                EndDate: params.EndDate,
                ServerpartIds: selectedId || '0',
                Keyword: params.searchText || ''
              });
              console.log('11111', data)
              // data.data.reverse()

              // // 给最里层的门店加一个标识
              // data.data.forEach((item: any)=>{
              //   if (item.children && item.children.length>0){
              //     item.children.forEach((subItem: any)=>{
              //       if (subItem.children && item.children.length>0){
              //         subItem.children.forEach((thirdItem: any)=>{
              //           thirdItem.newServerpart_Name = subItem.Serverpart_Name
              //           thirdItem.type='shop'
              //           let shopId: string = ''
              //           if (thirdItem.children && thirdItem.children.length>0){
              //             thirdItem.children.forEach((fourthItem: any)=>{
              //               if (shopId){
              //                 shopId+=`,${fourthItem.ServerpartShop_ID}`
              //               }else{
              //                 shopId = fourthItem.ServerpartShop_ID
              //               }
              //             })
              //           }
              //           thirdItem.newServerpartShop_ID = shopId
              //         })
              //       }
              //     })
              //   }
              // })
              //
              console.log('data.data', data.data)
              let projectMax: number = 0
              if (data && data.data && data.data.length > 0) {
                data.data.forEach((item: any, index: number) => {
                  item.index = `${index + 1}`
                  item.level = 1
                  // 只有数据的第一层 有这个属性
                  item.isFirst = true
                  item.children = []
                  if (projectMax < item.Project_Count) {
                    projectMax = item.Project_Count
                  }
                })
              }
              setExpandedRowKeys([])
              setTableData(data.data)
              setReqBigDetailList(data.data)
              setBigTableLoading(false)
              setAllProjectSum(projectMax)
              setPrintOut(undefined);
              getRightTime([params.StartDate, params.EndDate])
              // if (selectedId) {
              //   const req = {
              //     ProvinceCode: currentUser?.ProvinceCode,
              //     ServerpartIds: selectedId
              //   }
              //   const result = await getNoShopList(req)
              //   if (result && result.List.length > 0) {
              //     setNoShopList(result.List)
              //   }
              // } else {
              //   setNoShopList([])
              // }
              const res = JSON.parse(JSON.stringify(data.data))
              if (res) {
                const reduceData = res.reduce((p: {
                  Ticket_Price: number, Account_Price: number, SubRoyalty_Price: number, Ticket_Fee: number,
                  Royalty_Price: number, RoyaltyProject_Price: number, Royalty_DiffPrice: number
                }, currentValue: MobilePayRoyaltyModel) => {
                  const previousValue = { ...p }
                  previousValue.Ticket_Price = numeral(numeral(previousValue.Ticket_Price + currentValue.Ticket_Price).format('0.00')).value() || 0;
                  previousValue.Account_Price = numeral(numeral(previousValue.Account_Price +
                    currentValue.Account_Price).format('0.00')).value() || 0;
                  previousValue.SubRoyalty_Price = numeral(numeral(previousValue.SubRoyalty_Price +
                    currentValue.SubRoyalty_Price).format('0.00')).value() || 0;
                  previousValue.Ticket_Fee = numeral(numeral(previousValue.Ticket_Fee +
                    currentValue.Ticket_Fee).format('0.00')).value() || 0;
                  previousValue.Royalty_Price = numeral(numeral(previousValue.Royalty_Price +
                    currentValue.Royalty_Price).format('0.00')).value() || 0;
                  previousValue.RoyaltyProject_Price = numeral(numeral(previousValue.RoyaltyProject_Price +
                    currentValue.RoyaltyProject_Price).format('0.00')).value() || 0;
                  previousValue.Royalty_DiffPrice = numeral(numeral(previousValue.Royalty_DiffPrice +
                    currentValue.Royalty_DiffPrice).format('0.00')).value() || 0;
                  return previousValue
                }, {
                  Ticket_Price: 0, Account_Price: 0, SubRoyalty_Price: 0,
                  Ticket_Fee: 0, Royalty_Price: 0, RoyaltyProject_Price: 0, Royalty_DiffPrice: 0
                });
                console.log('reduceData', reduceData)
                setReduceTableData(reduceData)
                const [start, end] =
                  activeKey === "2" ?
                    ''
                    : formRef.current?.getFieldValue('search_date')
                setTableStart(start)
                setTableEnd(end)
                const diffDays = moment.duration(moment(end).diff(moment(start))).asDays() + 1
                setTableDiffDays(diffDays)
              }
              console.log('data', data);
              // 拿到要导出的全部数据的方法
              // await handleGetExportBigData(data.data)

              // return data;
            }}
            dataSource={tableData}
            expandable={{
              expandedRowKeys,
              defaultExpandAllRows: false,
              onExpand: async (record, event) => {
                console.log('record', record);
                console.log('event', event);
                if (record) {
                  if (expandedRowKeys && expandedRowKeys.length > 0) {
                    const list: any = JSON.parse(JSON.stringify(expandedRowKeys))
                    list.push(`${event.Statistics_Date}-${event.index}-${event.SPRegionType_ID}-${event.SPRegionType_Name}-${event.Serverpart_ID}-${event.Serverpart_Name}-${event.ServerpartShop_Name}`)
                    setExpandedRowKeys(list)
                  } else {
                    const list: any = []
                    list.push(`${event.Statistics_Date}-${event.index}-${event.SPRegionType_ID}-${event.SPRegionType_Name}-${event.Serverpart_ID}-${event.Serverpart_Name}-${event.ServerpartShop_Name}`)
                    setExpandedRowKeys(list)
                  }
                } else {
                  const list: any = JSON.parse(JSON.stringify(expandedRowKeys))
                  const newList: any = list.filter((item) => item !== `${event.Statistics_Date}-${event.index}-${event.SPRegionType_ID}-${event.SPRegionType_Name}-${event.Serverpart_ID}-${event.Serverpart_Name}-${event.ServerpartShop_Name}`)
                  setExpandedRowKeys(newList)
                }

                if (columnsLoading) {
                  message.error('正在请求其他行数据！')
                  return
                }
                let isHave: boolean = true
                if (event.children && event.children.length > 0) {
                  isHave = false
                }

                if (record && event.Statistics_Date && isHave && event.isFirst) {
                  setColumnsLoading(true)
                  addLoadingRow(`${event.Statistics_Date}-${event.index}-${event.SPRegionType_ID}-${event.SPRegionType_Name}-${event.Serverpart_ID}-${event.Serverpart_Name}-${event.ServerpartShop_Name}`)
                  const searchText = formRef.current?.getFieldValue('searchText')
                  const req: any = {
                    StartDate: event?.Statistics_Date,
                    EndDate: event?.Statistics_Date,
                    ServerpartIds: selectedId,
                    Keyword: searchText || ''
                  }
                  const data = await handleGetRoyaltyReport(req)
                  console.log('321312', data);
                  const res: any = data.data
                  if (res && res.length > 0) {
                    // 去掉子级的index

                    console.log('res', res);
                    // 防止行号出现问题 这里加上日期
                    res.forEach((item: any) => {
                      item.Statistics_Date = event?.Statistics_Date
                      if (item.children && item.children.length > 0) {
                        item.children.forEach((subItem: any) => {
                          subItem.Statistics_Date = event?.Statistics_Date
                          if (subItem.children && subItem.children.length > 0) {
                            subItem.children.forEach((thirdItem: any) => {
                              thirdItem.Statistics_Date = event?.Statistics_Date
                            })
                          }
                        })
                      }
                    })
                    const tableList: any = JSON.parse(JSON.stringify(tableData))
                    tableList.forEach((item: any) => {
                      if (item.Statistics_Date === event.Statistics_Date && item.index === event.index) {
                        item.children = res
                      }
                    })
                    setTableData(tableList)
                  }
                  removeLoadingRow(`${event.Statistics_Date}-${event.index}-${event.SPRegionType_ID}-${event.SPRegionType_Name}-${event.Serverpart_ID}-${event.Serverpart_Name}-${event.ServerpartShop_Name}`)
                  setColumnsLoading(false)
                }


              }
            }}
            // rowClassName={(record) => expandRow?.includes(record?.ServerpartShop_Code) && !record?.Serverpart_ID ? 'expanded' : ''}
            // expandable={
            //   {
            //     rowExpandable: () => true,
            //     defaultExpandedRowKeys: ['0-000'],
            //     indentSize: 0,
            //     expandRowByClick: true,
            //     defaultExpandAllRows: true,
            //     onExpand: (expanded, record) => {
            //       if (expanded) {
            //         setExpandRow([...expandRow, record.ServerpartShop_Code])
            //       } else {
            //         const nowData = expandRow?.reduce((p: string[], c) => {
            //           if (c !== record?.ServerpartShop_Code) {
            //             p.push(c)
            //           }
            //           return p
            //         }, [])
            //         setExpandRow(nowData || [])
            //       }
            //     }
            //   }
            // }
            style={{ backgroundColor: "#ffffff", width: '100%' }}
            tableExtraRender={
              (_, data) => {
                if (data) {
                  const reduceData = data.reduce((p: {
                    Ticket_Price: number, Account_Price: number, SubRoyalty_Price: number, Ticket_Fee: number,
                    Royalty_Price: number, RoyaltyProject_Price: number, Royalty_DiffPrice: number
                  }, currentValue: MobilePayRoyaltyModel) => {
                    const previousValue = { ...p }
                    previousValue.Ticket_Price = numeral(numeral(previousValue.Ticket_Price + currentValue.Ticket_Price).format('0.00')).value() || 0;
                    previousValue.Account_Price = numeral(numeral(previousValue.Account_Price +
                      currentValue.Account_Price).format('0.00')).value() || 0;
                    previousValue.SubRoyalty_Price = numeral(numeral(previousValue.SubRoyalty_Price +
                      currentValue.SubRoyalty_Price).format('0.00')).value() || 0;
                    previousValue.Ticket_Fee = numeral(numeral(previousValue.Ticket_Fee +
                      currentValue.Ticket_Fee).format('0.00')).value() || 0;
                    previousValue.Royalty_Price = numeral(numeral(previousValue.Royalty_Price +
                      currentValue.Royalty_Price).format('0.00')).value() || 0;
                    previousValue.RoyaltyProject_Price = numeral(numeral(previousValue.RoyaltyProject_Price +
                      currentValue.RoyaltyProject_Price).format('0.00')).value() || 0;
                    previousValue.Royalty_DiffPrice = numeral(numeral(previousValue.Royalty_DiffPrice +
                      currentValue.Royalty_DiffPrice).format('0.00')).value() || 0;
                    return previousValue
                  }, {
                    Ticket_Price: 0, Account_Price: 0, SubRoyalty_Price: 0,
                    Ticket_Fee: 0, Royalty_Price: 0, RoyaltyProject_Price: 0, Royalty_DiffPrice: 0
                  });
                  // setReduceTableData(reduceData)
                  // const [start, end] =
                  //   activeKey === "2" ?
                  //     ''
                  //     : formRef.current?.getFieldValue('search_date')
                  // setTableStart(start)
                  // setTableEnd(end)

                  //   const diffDays = moment.duration(moment(end).diff(moment(start))).asDays() + 1
                  // setTableDiffDays(diffDays)
                  return <div style={{ paddingLeft: 24 }} className={'YDRevenue'}>
                    <Row>
                      <Col span={24}>
                        <Descriptions
                          title={<Text type="success" style={{ color: "#1890ff", fontSize: 14 }}>业主分润</Text>}
                          size="small" className="commity-sale-description" column={4}
                          contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }}
                          style={{ marginBottom: 16 }}
                        >
                          <Descriptions.Item label="">
                            <div style={{ display: 'flex', alignItems: 'center' }}>
                              <span style={{
                                color: 'rgba(0, 0, 0, 0.45)',
                                fontSize: '14px',
                                fontWeight: 'normal'
                              }}>到账金额：</span>
                              <div style={{ display: 'flex', alignItems: 'center', height: '22px' }}>
                                <span style={{ fontWeight: 'normal', marginRight: '2px' }}>¥</span>
                                <span style={{
                                  fontSize: '28px',
                                  color: '#faad14',
                                  fontWeight: 500,
                                  lineHeight: '28px'
                                }}>{numeral(reduceData.Royalty_Price).format('0,0.00')}</span>
                              </div>
                            </div>
                          </Descriptions.Item>
                          <Descriptions.Item label="">
                            <div style={{ display: 'flex', alignItems: 'center' }}>
                              <span style={{
                                color: 'rgba(0, 0, 0, 0.45)',
                                fontSize: '14px',
                                fontWeight: 'normal'
                              }}>分润项目：</span>
                              <div style={{ display: 'flex', alignItems: 'flex-end', height: '22px' }}>
                                <span style={{ fontWeight: 'normal', marginRight: '2px' }}></span>
                                <span style={{
                                  fontSize: '28px',
                                  color: '#faad14',
                                  fontWeight: 500,
                                  lineHeight: '28px'
                                }}>{numeral(allProjectSum).format('0,0')}</span>
                              </div>
                            </div>
                          </Descriptions.Item>
                          <Descriptions.Item
                            label="项目到账">{numeral(reduceData.RoyaltyProject_Price).format('0,0.00')}</Descriptions.Item>
                          <Descriptions.Item
                            label="差额">{numeral(reduceData.Royalty_DiffPrice).format('0,0.00')}</Descriptions.Item>
                        </Descriptions>
                      </Col>
                    </Row>
                    {/* <Descriptions */}
                    {/*   title={<Text type="success" style={{ color: "#1890ff", fontSize: 14 }}>分润项目合计</Text>} */}
                    {/*   size="small" column={4} */}
                    {/*   className="commity-sale-description" */}
                    {/*   contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }} */}
                    {/* > */}
                    {/*    */}
                    {/*   /!* <Descriptions.Item label="银行到账">¥{numeral(reduceData.Royalty_Price).format('0,0.00')}</Descriptions.Item> *!/ */}
                    {/*   /!* <Descriptions.Item label="项目到账">¥{numeral(reduceData.RoyaltyProject_Price).format('0,0.00')}</Descriptions.Item> *!/ */}
                    {/*   /!* <Descriptions.Item label="分润差额">¥{numeral(reduceData.Royalty_DiffPrice).format('0,0.00')}</Descriptions.Item> *!/ */}
                    {/* </Descriptions> */}
                    {/* <Descriptions */}
                    {/*     size="small" className="commity-sale-description" column={5} */}
                    {/*     contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }}> */}
                    {/*   { */}
                    {/*     activeKey==='1'? */}
                    {/*     <Descriptions.Item label="统计时间">{`${moment(start).format('YYYY/MM/DD')}-${moment(end).format('YYYY/MM/DD')} `} */}
                    {/*       <Text type="secondary">( 共{numeral(diffDays).format('0')}日 )</Text> */}
                    {/*     </Descriptions.Item>: */}
                    {/*     <Descriptions.Item label="统计时间">{`${startTime}-${endTime} `}</Descriptions.Item> */}
                    {/*   } */}
                    {/* </Descriptions> */}

                    {/* { */}
                    {/*   noShopList && noShopList.length>0? */}
                    {/*     <WarningTwoTone style={{cursor:'pointer'}} onClick={async ()=>{ */}
                    {/*       setShowWarningDrawer(true) */}
                    {/*     }}/>:'' */}
                    {/* } */}
                  </div>
                }
                return <></>
              }
            }
            bordered
            columns={columns}
            headerTitle={<PageTitleBox props={props} />}
            toolbar={{
              actions: [
                <div>
                  <span style={{ visibility: 'hidden' }}>
                    <ReactHTMLTableToExcel
                      buttonText={'导出excel'}
                      ref={downloadBtnRef}
                      table="table-to-xls-accountMonthlyExternalHideBox"
                      filename={`移动支付分账报表_${moment().format('YYYY_MM_DD')}`}
                      sheet="sheet1"
                    />
                  </span>
                  <img style={{ cursor: 'pointer', width: '20px', height: '20px' }} onClick={(e) => {
                    console.log('e', e)
                    setShowNotice(!showNotice)
                    setNoticeY(e.clientY)
                    setNoticeX(e.clientX)
                  }} src={'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/noticeIcon.svg'} />
                  <Typography.Text type="secondary">单位：元</Typography.Text>
                  {/* <ReactToPrint
                    trigger={() => (
                      <Button style={{ margin: '0 8px' }} key="printout" type="default">
                        打印
                      </Button>
                    )}
                    content={() => {
                      if (printOut) {
                        const content: HTMLElement | Node | undefined = printOut?.getElementsByClassName('ant-card-body')[0]
                        const extra: HTMLElement | Node | undefined = printOut?.getElementsByClassName('ant-pro-table-extra')[0]
                        const innerText = `统计时间：${moment().format('YYYY/MM/DD')}`;

                        const ele = printOutBody([extra ? extra.cloneNode(true) : '', content ? content.cloneNode(true) : ''], innerText);

                        return ele
                      }
                      return ''
                    }}
                  /> */}
                  <Button
                    key="new"
                    type="primary"
                    style={{ marginLeft: '8px' }}
                    loading={bigExportLoadingBtn}
                    onClick={async (e) => {
                      if (reqBigDetailList && reqBigDetailList.length > 0) {
                        setShowExportTable(true)
                        setBigExportLoadingBtn(true)
                        setTimeout(() => {
                          exportExternalHideTable(e)
                        }, 100)
                      } else {
                        message.error('暂无数据可导出！')
                      }
                    }}
                  >
                    导出excel
                  </Button>
                </div>,

              ],
            }}
            // scroll={{ y: 330}}
            pagination={false}
          />
        </div>
      </div>

      {/* 项目数据编辑弹出框 */}
      <ProjectEditor parentTableRef={actionRef} currentRecord={currentRow} modalVisible={showNewAdd}
        handleModalVisible={setShowNewAdd} currentServerpartId={currentServerpartId}
        currentSPRegionTypeID={currentSPRegionTypeID} />

      <Drawer
        width="80%"
        className="project-drawer"
        visible={showNewDetail} // 抽屉弹框是否显示状态
        onClose={() => { // 关闭抽屉 则在清空选中行数据 并 设置抽屉状态为关闭
          setCurrentRow(undefined);
          setShowNewDetail(false);
        }}
        bodyStyle={{ backgroundColor: "#f9f9f9", padding: 0 }}
        closable={false}
      >
        {/* 抽屉打开时 加载项目详情组件 */}
        {showNewDetail &&
          <ProjectDetail tabActive={'5'} id={currentRow?.BUSINESSPROJECT_ID} businessType={currentRow?.BUSINESS_TYPE}
            showType={'edit'}></ProjectDetail>}
      </Drawer>


      <Drawer
        width="80%"
        className="project-drawer"
        visible={showDetail} // 抽屉弹框是否显示状态
        onClose={() => { // 关闭抽屉 则在清空选中行数据 并 设置抽屉状态为关闭
          setShowDetail(false);
          setCurrentRow(undefined)
        }}
        bodyStyle={{ backgroundColor: "#fff", padding: 0 }}
        closable={false}
        destroyOnClose
      >
        <ProTable
          rowKey={(record) => {
            return `${record.SPRegionType_ID}-${record.SPRegionType_Name}-${record.Serverpart_ID}-${record.Serverpart_Name}-${record.index}-${record.ServerpartShop_Name}`
          }}
          columns={columns}
          bordered
          request={async (params, sorter) => {
            const searchText = formRef.current?.getFieldValue('searchText')
            const req: any = {
              StartDate: currentRow?.Statistics_Date,
              EndDate: currentRow?.Statistics_Date,
              ServerpartIds: selectedId,
              Keyword: searchText || ''
            }
            const data = await handleGetRoyaltyReport(req)
            console.log('data321312', data);
            const exportData: any = JSON.parse(JSON.stringify(data.data))
            exportData.forEach((item: any) => {
              if (item.children && item.children.length > 0) {
                item.children.forEach((subItem: any) => {
                  subItem.SPRegionType_Name = ''
                  if (subItem.children && subItem.children.length > 0) {
                    subItem.children.forEach((thirdItem: any) => {
                      thirdItem.SPRegionType_Name = ''
                      thirdItem.Serverpart_Name = ''
                    })
                  }
                })
              }
            })
            setReqDetailList(exportData);
            return data
          }}
          tableExtraRender={
            (_, data) => {
              if (data) {
                const reduceData = data.reduce((p: {
                  Ticket_Price: number, Account_Price: number, SubRoyalty_Price: number, Ticket_Fee: number,
                  Royalty_Price: number, RoyaltyProject_Price: number, Royalty_DiffPrice: number
                }, currentValue: MobilePayRoyaltyModel) => {
                  const previousValue = { ...p }
                  previousValue.Ticket_Price = numeral(numeral(previousValue.Ticket_Price + currentValue.Ticket_Price).format('0.00')).value() || 0;
                  previousValue.Account_Price = numeral(numeral(previousValue.Account_Price +
                    currentValue.Account_Price).format('0.00')).value() || 0;
                  previousValue.SubRoyalty_Price = numeral(numeral(previousValue.SubRoyalty_Price +
                    currentValue.SubRoyalty_Price).format('0.00')).value() || 0;
                  previousValue.Ticket_Fee = numeral(numeral(previousValue.Ticket_Fee +
                    currentValue.Ticket_Fee).format('0.00')).value() || 0;
                  previousValue.Royalty_Price = numeral(numeral(previousValue.Royalty_Price +
                    currentValue.Royalty_Price).format('0.00')).value() || 0;
                  previousValue.RoyaltyProject_Price = numeral(numeral(previousValue.RoyaltyProject_Price +
                    currentValue.RoyaltyProject_Price).format('0.00')).value() || 0;
                  previousValue.Royalty_DiffPrice = numeral(numeral(previousValue.Royalty_DiffPrice +
                    currentValue.Royalty_DiffPrice).format('0.00')).value() || 0;
                  return previousValue
                }, {
                  Ticket_Price: 0, Account_Price: 0, SubRoyalty_Price: 0,
                  Ticket_Fee: 0, Royalty_Price: 0, RoyaltyProject_Price: 0, Royalty_DiffPrice: 0
                });
                // setReduceTableData(reduceData)
                // const [start, end] =
                //   activeKey === "2" ?
                //     ''
                //     : formRef.current?.getFieldValue('search_date')
                // setTableStart(start)
                // setTableEnd(end)

                //   const diffDays = moment.duration(moment(end).diff(moment(start))).asDays() + 1
                // setTableDiffDays(diffDays)
                return <div style={{ paddingLeft: 24 }} className={'YDRevenue'}>
                  <Row>
                    <Col span={24}>
                      <Descriptions
                        title={<Text type="success" style={{ color: "#1890ff", fontSize: 14 }}>业主分润</Text>}
                        size="small" className="commity-sale-description" column={4}
                        contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }}
                        style={{ marginBottom: 16 }}
                      >
                        <Descriptions.Item label="">
                          <div style={{ display: 'flex', alignItems: 'center' }}>
                            <span style={{
                              color: 'rgba(0, 0, 0, 0.45)',
                              fontSize: '14px',
                              fontWeight: 'normal'
                            }}>到账金额：</span>
                            <div style={{ display: 'flex', alignItems: 'center', height: '22px' }}>
                              <span style={{ fontWeight: 'normal', marginRight: '2px' }}>¥</span>
                              <span style={{
                                fontSize: '28px',
                                color: '#faad14',
                                fontWeight: 500,
                                lineHeight: '28px'
                              }}>{numeral(reduceData.Royalty_Price).format('0,0.00')}</span>
                            </div>
                          </div>
                        </Descriptions.Item>
                        <Descriptions.Item label="">
                          <div style={{ display: 'flex', alignItems: 'center' }}>
                            <span style={{
                              color: 'rgba(0, 0, 0, 0.45)',
                              fontSize: '14px',
                              fontWeight: 'normal'
                            }}>分润项目：</span>
                            <div style={{ display: 'flex', alignItems: 'flex-end', height: '22px' }}>
                              <span style={{ fontWeight: 'normal', marginRight: '2px' }}></span>
                              <span style={{
                                fontSize: '28px',
                                color: '#faad14',
                                fontWeight: 500,
                                lineHeight: '28px'
                              }}>{numeral(allProjectSum).format('0,0')}</span>
                            </div>
                          </div>
                        </Descriptions.Item>
                        <Descriptions.Item
                          label="项目到账">{numeral(reduceData.RoyaltyProject_Price).format('0,0.00')}</Descriptions.Item>
                        <Descriptions.Item
                          label="差额">{numeral(reduceData.Royalty_DiffPrice).format('0,0.00')}</Descriptions.Item>
                      </Descriptions>
                    </Col>
                  </Row>
                  {/* <Descriptions */}
                  {/*   title={<Text type="success" style={{ color: "#1890ff", fontSize: 14 }}>分润项目合计</Text>} */}
                  {/*   size="small" column={4} */}
                  {/*   className="commity-sale-description" */}
                  {/*   contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }} */}
                  {/* > */}
                  {/*    */}
                  {/*   /!* <Descriptions.Item label="银行到账">¥{numeral(reduceData.Royalty_Price).format('0,0.00')}</Descriptions.Item> *!/ */}
                  {/*   /!* <Descriptions.Item label="项目到账">¥{numeral(reduceData.RoyaltyProject_Price).format('0,0.00')}</Descriptions.Item> *!/ */}
                  {/*   /!* <Descriptions.Item label="分润差额">¥{numeral(reduceData.Royalty_DiffPrice).format('0,0.00')}</Descriptions.Item> *!/ */}
                  {/* </Descriptions> */}
                  {/* <Descriptions */}
                  {/*     size="small" className="commity-sale-description" column={5} */}
                  {/*     contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }}> */}
                  {/*   { */}
                  {/*     activeKey==='1'? */}
                  {/*     <Descriptions.Item label="统计时间">{`${moment(start).format('YYYY/MM/DD')}-${moment(end).format('YYYY/MM/DD')} `} */}
                  {/*       <Text type="secondary">( 共{numeral(diffDays).format('0')}日 )</Text> */}
                  {/*     </Descriptions.Item>: */}
                  {/*     <Descriptions.Item label="统计时间">{`${startTime}-${endTime} `}</Descriptions.Item> */}
                  {/*   } */}
                  {/* </Descriptions> */}

                  {/* { */}
                  {/*   noShopList && noShopList.length>0? */}
                  {/*     <WarningTwoTone style={{cursor:'pointer'}} onClick={async ()=>{ */}
                  {/*       setShowWarningDrawer(true) */}
                  {/*     }}/>:'' */}
                  {/* } */}
                </div>
              }
              return <></>
            }
          }
          toolbar={{
            actions: [
              <div>
                <span style={{ visibility: 'hidden' }}>
                  <ReactHTMLTableToExcel
                    buttonText={'导出excel'}
                    ref={downloadBtnRef}
                    table="table-to-xls-accountMonthly"
                    filename={`移动支付分账报表_${currentRow?.Statistics_Date || ''}`}
                    sheet="sheet1"
                  />
                </span>
                <Button
                  key="new"
                  type="primary"
                  onClick={async (e) => {
                    if (reqDetailList && reqDetailList.length > 0) {
                      setShowExportTable(true)
                      setTimeout(() => {
                        exportTable(e)
                      }, 100)
                    } else {
                      message.error('暂无数据可导出！')
                    }
                  }}
                >
                  导出excel
                </Button>
              </div>
            ]
          }}
        />
        {/* {showDetail && <ProTable
          rowKey="Pay_Date"
          headerTitle=""
          actionRef={actionRef}
          search={{span: 6}}
          bordered={true}
          request={async (params, sorter) => {
            // 排序字段
            const sortstr = Object.keys(sorter).map(n => {
              const value = sorter[n]
              return value ? `${n} ${value.replace('end', '')}` : ''
            })
            const data = await getList({
              ...params, ServerpartShop_ID: currentRow?.ServerpartShop_ID,
              Serverpart_IDS: '', ServerpartShop_IDS: '',
              Pay_Date: currentRow?.Statistics_Date, Record_State: '1,2',
              SortStr: sortstr.length ? sortstr.toString() : '',
            });
            return data;
          }}
          columns={columnsRecord}
          pagination={{defaultPageSize: 10}}
          options={false}
        />} */}
      </Drawer>
      {/*   显示异常的抽屉 */}
      <Drawer
        width={'25%'}
        visible={showWarningDrawer}
        onClose={() => {
          setShowWarningDrawer(false);
        }}
      >
        {
          noShopList && noShopList.length > 0 ?
            <>
              {
                noShopList.map((item: any) => {
                  return <div>
                    <span style={{ minWidth: '80px', marginRight: '10px' }}>{item.ico}</span>
                    <span style={{ minWidth: '80px', marginRight: '10px' }}>{item.key}</span>
                    <span style={{ minWidth: '80px' }}>{item.label}</span>
                  </div>
                })
              }
            </> : ''
        }
      </Drawer>
      {/* 显示流水 */}
      <Drawer
        width={'80%'}
        visible={flowDrawer}
        onClose={() => {
          setFlowDrawer(false);
          setCurrentRow(undefined)
        }}
        destroyOnClose
      >
        <ProTable
          rowKey="SELLMASTER_CODE"
          headerTitle={<Text type="success" style={{ color: "#1890ff", fontSize: 14 }} strong>销售流水明细</Text>}
          formRef={formRef2}
          actionRef={actionRef}
          search={{ span: 6 }}
          request={async (params) => {
            console.log('params', params);
            let shopId: string = ''
            if (currentRow?.type === 'shop') {
              shopId = currentRow?.ServerpartShop_ID
            } else if (currentRow?.children && currentRow?.children.length > 0) {
              currentRow?.children.forEach((item: any) => {
                if (shopId) {
                  shopId += `,${item.ServerpartShop_ID}`
                } else {
                  shopId = item.ServerpartShop_ID
                }
              })
            }
            const data = await getYSSellMasterList({
              ...params,
              SERVERPARTSHOP_ID: shopId || null,
              // SELLMASTER_DATE :params.StartDate,
              // SELLMASTER_DATE_Start:params.StartDate,
              // SELLMASTER_DATE_End:params.EndDate
            });
            setFlowDetailList(data.data);
            return data;
          }}
          bordered
          columns={flowColumns}
          tableExtraRender={
            (_, data) => {

              if (data) {
                const reduceData = data.reduce((
                  p: {
                    SELLMASTER_OFFPRICE: number,
                    SELLMASTER_COUNT: number,
                    SELLMASTER_AMOUNT: number,
                    MACHINECODE: string[],
                    payway: {},
                    mobilePay: {}
                  },
                  currentValue: any) => {
                  const previousValue = { ...p }
                  previousValue.SELLMASTER_COUNT += currentValue.SELLMASTER_COUNT || 0; // 销售数量
                  previousValue.SELLMASTER_OFFPRICE += currentValue.SELLMASTER_OFFPRICE || 0; // 优惠金额
                  previousValue.SELLMASTER_AMOUNT += currentValue.SELLMASTER_AMOUNT || 0; // 实收金额

                  if (currentValue.PAYMENT_TYPE === 1010 || currentValue.PAYMENT_TYPE === 1020) {
                    previousValue.payway['移动'] += currentValue.SELLMASTER_AMOUNT
                    if (!previousValue.mobilePay[currentValue.PAYMENT_TYPE_TEXT]) { // 移动支付方式
                      previousValue.mobilePay[currentValue.PAYMENT_TYPE_TEXT] = 0
                    }
                    previousValue.mobilePay[currentValue.PAYMENT_TYPE_TEXT] += currentValue.SELLMASTER_AMOUNT
                  } else {
                    if (!previousValue.payway[currentValue.PAYMENT_TYPE_TEXT]) { // 支付方式
                      previousValue.payway[currentValue.PAYMENT_TYPE_TEXT] = 0
                    }
                    previousValue.payway[currentValue.PAYMENT_TYPE_TEXT] += currentValue.SELLMASTER_AMOUNT
                  }
                  if (!previousValue.MACHINECODE.includes(currentValue.MACHINECODE)) {

                    previousValue.MACHINECODE.push(currentValue.MACHINECODE); // 收银机号
                  }
                  return previousValue
                }, {
                  SELLMASTER_OFFPRICE: 0,
                  SELLMASTER_COUNT: 0,
                  SELLMASTER_AMOUNT: 0,
                  MACHINECODE: [],
                  payway: { '移动': 0, '现金': 0, },
                  mobilePay: {}
                });

                return <div style={{ paddingLeft: 24 }}>
                  <Descriptions
                    title={<Text type="success" style={{ color: "#1890ff", fontSize: 14 }}>销售流水汇总</Text>}
                    size="small" column={5}
                    className="commity-sale-description"
                    contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }}
                  >
                    <Descriptions.Item className='mobileMoney' label="移动支付">
                      ¥<span className='mobileMoneyText'>{numeral(reduceData.payway['移动']).format('0,0.00')}</span>
                    </Descriptions.Item>
                    <Descriptions.Item
                      label="现金支付">¥{numeral(reduceData.payway['现金']).format('0,0.00')}</Descriptions.Item>
                    <Descriptions.Item
                      label="实收金额">¥{numeral(reduceData.SELLMASTER_AMOUNT).format('0,0.00')}</Descriptions.Item>
                  </Descriptions>
                  <Descriptions size="small" className="commity-sale-description" column={5}
                    contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }}>
                    <Descriptions.Item label="客单数量">{numeral(data.length).format('0,0')}<Text
                      type="secondary"> 笔</Text></Descriptions.Item>
                    <Descriptions.Item
                      label="优惠金额">¥{numeral(reduceData.SELLMASTER_OFFPRICE).format('0,0.00')}</Descriptions.Item>
                    <Descriptions.Item label="收银机">{numeral(reduceData.MACHINECODE.length).format('0,0')}<Text
                      type="secondary"> 台</Text></Descriptions.Item>
                  </Descriptions>
                  <Descriptions size="small" className="commity-sale-description" column={5}
                    contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }}>
                    <Descriptions.Item label="销售数量">{numeral(reduceData.SELLMASTER_COUNT).format('0,0')}<Text
                      type="secondary"> 件</Text></Descriptions.Item>
                    <Descriptions.Item
                      label="客单均价">¥{numeral(reduceData.SELLMASTER_AMOUNT / data.length).format('0,0.00')}</Descriptions.Item>
                    <Descriptions.Item
                      label="商品均价">¥{numeral(reduceData.SELLMASTER_AMOUNT / reduceData.SELLMASTER_COUNT).format('0,0.00')}</Descriptions.Item>
                  </Descriptions>
                </div>

              }
              return <></>
            }
          }
          onRow={(record) => {
            return {

              onClick: () => {
                setCurrentRow(record)
                setVisible(true)
              }
            }
          }}
          pagination={{ defaultPageSize: 10 }}
        />
      </Drawer>

      {/* 流水悬浮框 */}
      <Modal
        title={currentRow ? `${currentRow?.SERVERPART_NAME + currentRow?.SHOPNAME}销售流水明细` : '销售流水明细'}
        centered
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        width={1024}
        bodyStyle={{ padding: 0 }}

      >
        {currentRow && <FlowDetail id={currentRow?.SELLMASTER_CODE} />}
      </Modal>

      {/* 差额的抽屉 */}
      <Drawer
        width={'80%'}
        visible={differenceDrawer}
        onClose={() => {
          setDifferenceDrawer(false);
          setCurrentRow(undefined)
        }}
        destroyOnClose
      >
        <DifferenceAmount onShow={differenceDrawer} parentRow={currentRow} searchParams={{
          StartDate: currentRow?.Statistics_Date,
          EndDate: currentRow?.Statistics_Date,
        }} />
      </Drawer>
      {/* 有计算公式的流水 */}
      <Drawer
        width={1000}
        visible={haveFlowDrawer}
        className={'drawerBox'}
        onClose={() => {
          setCurrentRow(undefined);
          setHaveFlowDrawer(false);
        }}
        destroyOnClose
        closable={false}
      >
        <FlowDrawer drawerLoading={drawerLoading} currentRow={currentRow} setDrawerLoading={setDrawerLoading}
          isFirstFloorClick={isFirstFloorClick}
        />
      </Drawer>
    </div>
  );
};

export default connect(({ user }: ConnectState) => ({
  currentUser: user.currentUser
}))(ReportTable);