import { connect } from "umi";
import type { CurrentUser } from "umi";
import type { ConnectState } from "@/models/connect";
import React, { useRef, useState } from "react";
import ProCard from "@ant-design/pro-card";
import { MenuFoldOutlined } from "@ant-design/icons";
import { Drawer, FormInstance } from "antd";
import { Button, message, Space, Spin, Tree } from "antd";
import useRequest from "@ahooksjs/use-request";
import { getServerpartTree, handleFormatNumber } from "@/services/options";
import type { ActionType } from "@ant-design/pro-table";
import ProTable from "@ant-design/pro-table";
import ReactHTMLTableToExcel from "react-html-table-to-excel";
import LeftSelectTree from "@/pages/reports/settlementAccount/component/leftSelectTree";
import PageTitleBox from "@/components/PageTitleBox";
import { handleGetAnnualAccountList, handleGetTableRevenueRecognition } from "../ShopExpenseDetail/service";
import moment from 'moment'
import { wrapTreeNode } from "@/utils/format";
import YearExamineDetailTable from "../settlementAccount/component/YearExamineDetailTable";
import './index.less'
import * as XLSX from 'xlsx';
import session from "@/utils/session";

const settlementSummaryTable: React.FC<{ currentUser: CurrentUser }> = (props) => {
    const { currentUser } = props
    const downloadBtnRef = useRef<any>()
    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    const [reqDetailList, setReqDetailList] = useState<any>(); // 合计项数据源
    const [printOut, setPrintOut] = useState<any>(); // 打印数据的内容
    const [collapsible, setCollapsible] = useState<boolean>(false)
    const [treeView, setTreeView] = useState<any>()
    const [printIndex, setPrintIndex] = useState<number>(new Date().getTime())
    let SETTLEMENT_MODESObj = session.get('SETTLEMENT_MODESObj')

    // 树相关的属性和方法
    const [selectedId, setSelectedId] = useState<string>()
    // 导出的加载效果
    const [showLoading, setShowLoading] = useState<boolean>(false)
    // 是否显示打印的表格
    const [showExportTable, setShowExportTable] = useState<boolean>(false)
    // 查询的条件
    const [searchParams, setSearchParams] = useState<any>()
    // 点击门店显示项目应收拆分数据
    const [showDrawer, setShowDrawer] = useState<any>()
    // 当前点击行的数据
    const [currentRow, setCurrentRow] = useState<any>()
    // 是否显示批量月度审批的按钮
    const [isShowMonthBtn, setIsShowMonthBtn] = useState<boolean>(false)

    const [columnsStateMap, setColumnsStateMap] = useState<any>({
        SettlementModes: { show: false },
        SwitchDate: { show: false },
    });



    let settlementStateObj: any = {
        "9": "已结算",
        "0": "待结算",
        "-1": "提前退场",
    }

    const columns: any = [
        {
            title: '统计日期',
            dataIndex: 'StatisticsYear',
            valueType: "date",
            hideInTable: true,
            hideInDescriptions: true,
            initialValue: moment().subtract('1', 'month'),
            // search: {
            //     transform: (value: any) => {
            //         return {
            //             StartDate: moment(value[0]).format('YYYYMM'),
            //             EndDate: moment(value[1]).format('YYYYMM'),
            //         };
            //     },
            // },
            fieldProps: {
                picker: "year",
                format: 'YYYY'
            }
        },
        {
            title: "结算状态",
            dataIndex: 'SettlementState',
            valueType: 'select',
            hideInTable: true,
            valueEnum: {
                "9": "已结算",
                "0": "待结算",
                "-1": "提前退场",
            }
        },

        {
            title: "结算类型",
            dataIndex: 'SettlementType',
            valueType: 'select',
            valueEnum: {
                "1": "线上",
                "2": "线下"
            },
            hideInTable: true
        },
        {
            title: "结算模式",
            dataIndex: 'SettlementModes',
            valueType: 'select',
            hideInTable: true,
            valueEnum: SETTLEMENT_MODESObj,
            fieldProps: {
                mode: 'multiple', // 开启多选模式    
            },
            initialValue: ["3000", "4000"]
        },
        {
            title: <div style={{ textAlign: 'center' }}>管理中心</div>,
            titleStr: '管理中心',
            dataIndex: 'SPREGIONTYPE_NAME',
            width: 200,
            hideInSearch: true,
            ellipsis: true,
            align: 'center'
        },
        {
            title: <div style={{ textAlign: 'center' }}>服务区</div>,
            titleStr: '服务区',
            dataIndex: 'SERVERPART_NAME',
            width: 200,
            hideInSearch: true,
            ellipsis: true,
            align: 'center'
        },
        {
            title: <div style={{ textAlign: 'center' }}>经营商户</div>,
            titleStr: '经营商户',
            dataIndex: 'MERCHANTS_NAME',
            width: 200,
            hideInSearch: true,
            ellipsis: true,
            align: 'center'
        },
        {
            title: <div style={{ textAlign: 'center' }}>门店</div>,
            titleStr: '门店',
            dataIndex: 'SERVERPARTSHOP_NAME',
            width: 150,
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
            render: (_, record) => {
                return record?.SERVERPARTSHOP_NAME ? <a onClick={() => {
                    console.log('record', record);

                    setCurrentRow({
                        ...record,
                        CLOSED_DATE: record?.ClosedDate,
                        SHOPROYALTY_ID: record?.ShopRoyaltyId
                    })
                    setShowDrawer(true)
                }}>
                    {record?.SERVERPARTSHOP_NAME || ""}
                </a> : ""
            }
        },
        {
            title: <div style={{ textAlign: 'center' }}>基础信息</div>,
            dataIndex: 'termInfo',
            titleStr: '基础信息',
            // fixed: 'left',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>期数</div>,
                    titleStr: '期数',
                    dataIndex: 'IndexStr',
                    width: 100,
                    align: 'center',
                    render: (_, record) => {
                        return record?.Index > 0 ? `第${record?.Index}期` : "-"
                    }
                },
                {
                    title: <div style={{ textAlign: 'center' }}>时限</div>,
                    titleStr: '时限',
                    dataIndex: 'COMPACT_STARTDATECOMPACT_ENDDATE',
                    width: 180,
                    align: 'center',
                    render: (_, record) => {
                        // return record?.IndexDesc || ''
                        return `${record?.COMPACT_STARTDATE || ''}-${record?.COMPACT_ENDDATE || ''}`
                    }
                },
                {
                    title: <div style={{ textAlign: 'center' }}>保底/固定租金</div>,
                    titleStr: '保底/固定租金',
                    exportType: "momeny",
                    align: 'right',
                    width: 140,
                    valueType: 'digit',
                    dataIndex: 'RENTFEE',
                    render: (_, record) => {
                        return record?.RENTFEE ? handleFormatNumber(record?.RENTFEE) : record?.RENTFEE === 0 ? '0.00' : '-'
                    }
                },
                {
                    title: <div style={{ textAlign: 'center' }}>提成比率</div>,
                    titleStr: '提成比率',
                    exportType: "rate",
                    dataIndex: 'GUARANTEERATIO',
                    align: 'center',
                    width: 120,
                    render: (_, record) => {
                        return record?.GUARANTEERATIO ? `${record?.GUARANTEERATIO}%` : ''
                    }
                },

                {
                    title: <div style={{ textAlign: 'center' }}>结算模式</div>,
                    dataIndex: 'SettlementModes',
                    align: 'center',
                    width: 120,
                    valueType: 'select',
                    valueEnum: SETTLEMENT_MODESObj,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>切换日期</div>,
                    dataIndex: 'SwitchDate',
                    align: 'center',
                    width: 120,

                }
            ]
        },
        {
            title: <div style={{ textAlign: 'center' }}>营业额</div>,
            titleStr: '营业额',
            dataIndex: '',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>现金</div>,
                    titleStr: '现金',
                    exportType: "momeny",
                    align: 'right',
                    width: 120,
                    valueType: 'digit',
                    dataIndex: 'CASHPAY_AMOUNT',
                    render: (_, record) => {
                        return record?.CASHPAY_AMOUNT ? handleFormatNumber(record?.CASHPAY_AMOUNT) : record?.CASHPAY_AMOUNT === 0 ? '0.00' : '-'
                    }
                },
                {
                    title: <div style={{ textAlign: 'center' }}>移动支付</div>,
                    titleStr: '移动支付',
                    exportType: "momeny",
                    align: 'right',
                    width: 120,
                    valueType: 'digit',
                    dataIndex: 'MOBILEPAY_AMOUNT',
                    render: (_, record) => {
                        return record?.MOBILEPAY_AMOUNT ? handleFormatNumber(record?.MOBILEPAY_AMOUNT) : record?.MOBILEPAY_AMOUNT === 0 ? '0.00' : '-'
                    }
                },
                {
                    title: <div style={{ textAlign: 'center' }}>小计</div>,
                    titleStr: '小计',
                    exportType: "momeny",
                    align: 'right',
                    valueType: 'digit',
                    width: 120,
                    dataIndex: 'REVENUEDAILY_AMOUNTTotal',
                    render: (_, record) => {
                        return record?.REVENUEDAILY_AMOUNTTotal ? handleFormatNumber(record?.REVENUEDAILY_AMOUNTTotal) : record?.REVENUEDAILY_AMOUNTTotal === 0 ? '0.00' : '-'
                    }
                },

            ]
        },
        {
            title: <div style={{ textAlign: 'center' }}>提成金额</div>,
            titleStr: '提成金额',
            exportType: "momeny",
            align: 'right',
            valueType: 'digit',
            hideInSearch: true,
            width: 120,
            dataIndex: 'GUARANTEERATIOAMOUNT',
            render: (_, record) => {
                return record?.GUARANTEERATIOAMOUNT ? handleFormatNumber(record?.GUARANTEERATIOAMOUNT) : record?.GUARANTEERATIOAMOUNT === 0 ? '0.00' : '-'
            }
        },
        {
            title: <div style={{ textAlign: 'center' }}>业主收款</div>,
            titleStr: '业主收款',
            exportType: "momeny",
            align: 'right',
            valueType: 'digit',
            hideInSearch: true,
            width: 120,
            dataIndex: 'BANKACCOUNT_AMOUNT',
            render: (_, record) => {
                return record?.BANKACCOUNT_AMOUNT ? handleFormatNumber(record?.BANKACCOUNT_AMOUNT) : record?.BANKACCOUNT_AMOUNT === 0 ? '0.00' : '-'
            }
        },
        {
            title: <div style={{ textAlign: 'center' }}>应收租金</div>,
            titleStr: '应收租金',
            exportType: "momeny",
            align: 'right',
            width: 120,
            hideInSearch: true,
            valueType: 'digit',
            dataIndex: 'RECEIVABLEAMOUNT',
            render: (_, record) => {
                return record?.RECEIVABLEAMOUNT ? handleFormatNumber(record?.RECEIVABLEAMOUNT) : record?.RECEIVABLEAMOUNT === 0 ? '0.00' : '-'
            }
        },
        {
            title: <div style={{ textAlign: 'center' }}>应收费用</div>,
            titleStr: '应收费用',
            exportType: "momeny",
            align: 'right',
            valueType: 'digit',
            hideInSearch: true,
            width: 120,
            dataIndex: 'SHOPEXPENSE_AMOUNT',
            render: (_, record) => {
                return record?.SHOPEXPENSE_AMOUNT ? handleFormatNumber(record?.SHOPEXPENSE_AMOUNT) : record?.SHOPEXPENSE_AMOUNT === 0 ? '0.00' : '-'
            }
        },
        {
            title: <div style={{ textAlign: 'center' }}>已缴费用</div>,
            titleStr: '已缴费用',
            exportType: "momeny",
            align: 'right',
            valueType: 'digit',
            hideInSearch: true,
            width: 120,
            dataIndex: 'PAID_AMOUNT',
            render: (_, record) => {
                return record?.PAID_AMOUNT ? handleFormatNumber(record?.PAID_AMOUNT) : record?.PAID_AMOUNT === 0 ? '0.00' : '-'
            }
        },
        {
            title: <div style={{ textAlign: 'center' }}>退补款</div>,
            titleStr: '退补款',
            exportType: "momeny",
            align: 'right',
            valueType: 'digit',
            hideInSearch: true,
            width: 120,
            dataIndex: 'REFUND_SUPPLEMENT',
            render: (_, record) => {
                return record?.REFUND_SUPPLEMENT ? handleFormatNumber(record?.REFUND_SUPPLEMENT) : record?.REFUND_SUPPLEMENT === 0 ? '0.00' : '-'
            }
            // fixed: 'right',
        },
        {
            title: <div style={{ textAlign: 'center' }}>结算月份</div>,
            titleStr: '结算月份',
            align: 'center',
            valueType: 'digit',
            hideInSearch: true,
            width: 120,
            dataIndex: 'STATISTICS_MONTH',
            render: (_, record) => {
                return record?.STATISTICS_MONTH ? moment(record?.STATISTICS_MONTH).format('MM') + '月' : '-'
            }
        },
        {
            title: <div style={{ textAlign: 'center' }}>是否结算</div>,
            titleStr: '是否结算',
            align: 'center',
            valueType: 'digit',
            hideInSearch: true,
            width: 120,
            dataIndex: 'settlementStateObjApprovalstate',
            render: (_, record) => {
                return record?.Approvalstate || record?.Approvalstate === 0 ? settlementStateObj[record?.Approvalstate.toString()] : '-'
            }
        },
        {
            title: <div style={{ textAlign: 'center' }}>备注（收退款）</div>,
            titleStr: '备注（收退款）',
            align: 'center',
            hideInSearch: true,
            width: 120,
            dataIndex: 'REFUND_SUPPLEMENTdesc',
            render: (_, record) => {
                return record?.REFUND_SUPPLEMENT > 0 ? '退款' : record?.REFUND_SUPPLEMENT <= 0 ? '收款' : ''
            }
            // REFUND_SUPPLEMENT 大于小于
        },
    ]

    // 导出方法
    const handleExportDataToExcel = (isHaveChildren: boolean, isHaveTitle?: boolean) => {
        // isHaveChildren 判断表头是否有子集

        console.log('1', reqDetailList);

        let columnsNoChildren: any = []
        // 先创建需要显示的列表头 
        let headerArray: any = isHaveChildren ? [[], []] : []
        // 需要合并单元格的内容
        let mergesList: any = []
        // 因为子集也拆出来了 这样实际的行数会比columns多 所以得知道多了多少
        let moreColumns: number = 0
        // 显示的列表有多少个
        let showItemNumber: number = 0

        let showIndex: number = 0
        if (columns && columns.length > 0) {
            columns.forEach((item: any, index: number) => {
                if (!item.hideInTable) {
                    showItemNumber += 1
                    if (item.children && item.children.length > 0) {
                        mergesList.push({
                            s: { r: 0 + (isHaveTitle ? 1 : 0), c: showIndex },
                            e: { r: 0 + (isHaveTitle ? 1 : 0), c: showIndex + item.children.length - 1 },
                        })
                        moreColumns += item.children.length - 1
                        showIndex += item.children.length
                        item.children.forEach((subItem: any) => {
                            if (!subItem.hideInTable) {
                                columnsNoChildren.push(subItem)
                                headerArray[0].push(item.titleStr)
                                headerArray[1].push(subItem.titleStr)
                            }
                        })
                    } else {
                        columnsNoChildren.push(item)
                        headerArray[0].push(item.titleStr)
                        if (isHaveChildren) {
                            headerArray[1].push(item.titleStr)
                            mergesList.push({
                                s: { r: 0 + (isHaveTitle ? 1 : 0), c: showIndex },
                                e: { r: 1 + (isHaveTitle ? 1 : 0), c: showIndex },
                            })
                        }
                        showIndex += 1
                    }
                }
            })
        }


        console.log('columnsNoChildren', columnsNoChildren);
        console.log('headerArray', headerArray);
        console.log('mergesList', mergesList);


        // 先创建需要显示的列表头 
        // let headerArray = [
        //     ["管理中心", "服务区", "经营商户", "门店", "基础信息", "基础信息", "基础信息", "基础信息", "营业额", "营业额", "营业额", "提成金额", "业主收款", "应收租金", "应收费用", "已缴费用", "退补款", "结算月份", "是否结算", "备注（收退款）"],
        //     ["管理中心", "服务区", "经营商户", "门店", "期数", "时限", "保底 / 固定租金", "提成比率", "现金", "移动支付", "小计", "提成金额", "业主收款", "应收租金", "应收费用", "已缴费用", "退补款", "结算月份", "是否结算", "备注（收退款）"]
        // ]

        // 创建一个工作簿
        const ws = {}

        // 设置列宽：动态计算每列的最大内容长度
        let colWidths: any = [];
        // 设置样式：对齐方式
        const cellStyle: any = {
            alignment: {
                horizontal: 'right',
                vertical: 'right'
            }
        };
        if (headerArray && headerArray.length > 0) {
            headerArray.forEach((row: any, rowIndex: any) => {
                row.forEach((cell: any, colIndex: any) => {
                    const cellRef = XLSX.utils.encode_cell({ r: (isHaveChildren ? rowIndex : rowIndex) + (isHaveTitle ? 1 : 0), c: colIndex });
                    // ws[cellRef] = cell;
                    console.log('cellRef', cellRef);

                    ws[cellRef] = {
                        v: cell, t: 's', s: cellStyle
                    };
                    const cellLength = getCharWidth((cell && cell.toString()) || '');

                    if (!colWidths[colIndex]) {
                        colWidths[colIndex] = cellLength;
                    } else {
                        colWidths[colIndex] = Math.max(colWidths[colIndex], cellLength);
                    }
                })
            })
        }
        // 设置工作表的范围（必需）
        const range = {
            s: { r: 0, c: 0 },  // 开始行列
            e: { r: reqDetailList.length + (isHaveChildren ? 2 : 1) + (isHaveTitle ? 1 : 0), c: columnsNoChildren.length }  // 结束行列
        };

        ws["A1"] = {
            v: `(${searchParams?.StatisticsYear})年度结算汇总表`, t: 's', s: {
                font: {
                    bold: true,              // 字体加粗
                    color: { rgb: "#000" }, // 字体颜色红色
                    sz: 20                   // 字号为14
                },
                alignment: {
                    horizontal: 'center',    // 水平居中
                    vertical: 'center'       // 垂直居中
                },
            }
        };

        if (isHaveTitle) {
            mergesList.push(
                {
                    s: { r: 0, c: 0 },
                    e: { r: 0, c: columnsNoChildren.length },
                }
            )
        }

        ws['!merges'] = mergesList

        ws['!ref'] = XLSX.utils.encode_range(range); // 设置单元格范围

        if (reqDetailList && reqDetailList.length > 0) {
            reqDetailList.forEach((item: any, index: number) => {
                columnsNoChildren.forEach((subItem: any, subIndex: number) => {
                    for (let key in item) {
                        if (subItem.dataIndex === key) {
                            let res = item[key]
                            const cellRef = XLSX.utils.encode_cell({ r: (isHaveChildren ? index + 2 : index + 1) + (isHaveTitle ? 1 : 0), c: subIndex });
                            // ws[cellRef] = cell;
                            let newRes = res ? subItem.exportType === 'momeny' ? handleFormatNumber(res) : subItem.exportType === 'rate' ? `${res}%` : res : subItem.exportType === 'momeny' ? '0' : ""
                            ws[cellRef] = {
                                v: newRes, t: 's', s: {
                                    alignment: {
                                        horizontal: 'center',  // 水平居中
                                        vertical: 'center'     // 垂直居中
                                    }
                                }
                            };
                            const cellLength = getCharWidth((newRes && newRes.toString()) || '');

                            if (!colWidths[subIndex]) {
                                colWidths[subIndex] = cellLength;
                            } else {
                                if (subIndex === 2) {
                                    console.log('colWidths[subIndex] ', colWidths[subIndex]);
                                    console.log('cellLength.length', cellLength);

                                }
                                colWidths[subIndex] = Math.max(colWidths[subIndex], cellLength);
                            }
                        }
                    }
                })
            })
        }
        ws['!cols'] = colWidths.map((width: any) => ({ wch: width + 2 }));  // wch 表示字符宽度

        console.log('ws', ws);


        // array.forEach((row: any, rowIndex: any) => {
        //     row.forEach((cell: any, colIndex: any) => {
        //         // 通过设置单元格的数值和样式，保留原始格式
        //         const cellRef = XLSX.utils.encode_cell({ r: rowIndex, c: colIndex }); // 跳过表头行
        //         console.log('cellRef', cellRef);

        //         if (typeof cell === 'number' && cell.toFixed) {
        //             // 如果是数字，保持两位小数
        //             ws[cellRef].z = '0.00';  // 设置数字格式为两位小数
        //         }
        //     });
        // });

        // 创建工作簿
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

        // 导出 Excel 文件
        XLSX.writeFile(wb, `(${searchParams?.StatisticsYear})年度结算汇总表.xlsx`);
        setShowLoading(false)
    },
        // 判断字符类型的辅助函数
        getCharWidth = (cell: any) => {
            if (!cell) {
                return ''
            }
            if (typeof cell === 'number') {
                return cell.toString().length > 150 ? 150 : cell.toString().length;  // 数字通常和英文字符宽度相同
            } else if (/[^\x00-\xff]/.test(cell)) {
                return cell.length * 1.8 > 300 ? 300 : cell.length * 1.8;  // 中文字符宽度大约是英文字符的2倍
            } else {
                return cell.length > 150 ? 150 : cell.length;  // 英文字符的宽度为1
            }
        }

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

        // 加个标题
        const tableTop = document.createElement('div')
        tableTop.innerText = `(${searchParams?.StatisticsYear})年度结算汇总表`
        tableTop.setAttribute('style', 'font-size:20px;font-weight:600;display:flex;width:100%;justify-content: center;text-align: center;');

        const tempTable = document.createElement('table');

        tempTable.appendChild(tableTop)
        tempTable.appendChild(thead);
        tempTable.appendChild(tbody);

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

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

        setShowLoading(false)

        downloadBtnRef.current.handleDownload();
        setShowExportTable(false)
        tempTable.remove() // 防止重复打印一个内容
    }


    return (
        <div ref={(el) => {
            // 打印报表
            if (!reqDetailList || reqDetailList.length === 0) return;
            setPrintOut(el);
        }} >

            {
                showLoading ?
                    <div
                        style={{
                            width: '100%',
                            height: '100%',
                            background: 'rgba(0,0,0,0.1)',
                            position: 'fixed',
                            zIndex: 5,
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}
                    >
                        <div style={{
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            padding: '15px 20px 10px',
                            background: '#fff',
                            borderRadius: '8px',
                            width: '200px'
                        }}>
                            <Spin />
                            <span style={{ marginLeft: '5px' }}>数据导出中...</span>
                        </div>
                    </div> : ''
            }

            <div className={`settlementSummaryTable${printIndex}`} style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }}>
                {
                    showExportTable && reqDetailList && reqDetailList.length > 0 ?
                        <ProTable
                            className="exportTable"
                            columns={columns}
                            dataSource={reqDetailList}
                            pagination={false}
                            expandable={{
                                defaultExpandAllRows: true
                            }}
                        /> : ''
                }
            </div>
            <div id='hiddenBox' style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }} />

            <div style={{ backgroundColor: '#fff', display: 'flex' }}>
                <LeftSelectTree setSelectedId={setSelectedId} setCollapsible={setCollapsible} collapsible={collapsible} />
                <div style={{
                    width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
                    paddingTop: 0,
                    paddingBottom: 0,
                    paddingRight: 0
                }}>
                    <ProTable
                        actionRef={actionRef}
                        formRef={formRef}
                        columns={columns}
                        bordered
                        expandable={{
                            expandRowByClick: true
                        }}
                        rowKey={(record: any) => {
                            return `${record?.SPREGIONTYPE_ID}-${record?.SERVERPART_ID}-${record?.SERVERPARTSHOP_ID}-${record?.BUSINESSPROJECT_ID}-${record?.MERCHANTS_ID}-${record?.IndexStr}`
                        }}
                        headerTitle={<PageTitleBox props={props} />}
                        search={{ span: 6 }}
                        scroll={{ x: "max-content", y: 'calc(100vh - 450px)' }}
                        request={async (params) => {
                            console.log('params', params);

                            if (!selectedId || !params?.StatisticsYear) {
                                return
                            }
                            const req: any = {
                                StatisticsYear: params?.StatisticsYear,
                                ServerpartId: selectedId,
                                SettlementState: params?.SettlementState,
                                SettlementModes: params?.SettlementModes,
                                SettlementType: params?.SettlementType
                                // ServerpartIds: selectedId,
                                // // ShopRoyaltyId: compareCurrent?.ShopRoyaltyId,
                                // // BusinessProjectId: compareCurrent?.BUSINESSPROJECT_ID,
                                // startDate: params?.StartDate || '',
                                // endDate: params?.EndDate || '',
                                // SolidType: true
                            }
                            setSearchParams(params)
                            console.log('req', req);

                            const data = await handleGetAnnualAccountList(req)
                            let res: any = []
                            let exportData: any = []
                            if (data && data.length > 0) {
                                res = data
                            }
                            console.log('res', res);
                            if (res && res.length > 0) {
                                let exportRes = JSON.parse(JSON.stringify(res))
                                exportRes.forEach((item: any, index: number) => {
                                    item.index = `${index + 1}`
                                    // item.SPREGIONTYPE_NAME = item.SPREGIONTYPE_NAME.split('管理中心')
                                    if (item.children && item.children.length > 0) {
                                        item.children.forEach((subItem: any, subIndex: number) => {
                                            subItem.index = `${index + 1}-${subIndex + 1}`
                                            // subItem.SPREGIONTYPE_NAME = subItem.SPREGIONTYPE_NAME.split('管理中心')
                                            // subItem.SERVERPART_NAME = subItem.SERVERPART_NAME.split('服务区')
                                            if (subItem.children && subItem.children.length > 0) {
                                                subItem.children.forEach((thirdItem: any, thirdIndex: number) => {
                                                    thirdItem.index = `${index + 1}-${subIndex + 1}-${thirdIndex + 1}`
                                                    thirdItem.SPREGIONTYPE_NAME = thirdItem.SPREGIONTYPE_NAME.split('管理中心')[0]
                                                    thirdItem.SERVERPART_NAME = thirdItem.SERVERPART_NAME.split('服务区')[0]

                                                    thirdItem.COMPACT_STARTDATECOMPACT_ENDDATE = `${thirdItem?.COMPACT_STARTDATE || '-'}-${thirdItem?.COMPACT_ENDDATE || '-'}`
                                                    thirdItem.settlementStateObjApprovalstate = thirdItem?.Approvalstate || thirdItem?.Approvalstate === 0 ? settlementStateObj[thirdItem?.Approvalstate.toString()] : '-'
                                                    thirdItem.REFUND_SUPPLEMENTdesc = thirdItem?.REFUND_SUPPLEMENT > 0 ? '退款' : thirdItem?.REFUND_SUPPLEMENT <= 0 ? '收款' : ''
                                                    exportData.push(thirdItem)
                                                })
                                            }
                                        })
                                    }
                                })
                                console.log('exportData', exportData);
                                setReqDetailList(exportData)
                                return { data: res, success: true }
                            }
                            setReqDetailList(exportData)
                            return { data: [], success: true }
                        }}
                        toolbar={{
                            actions: [
                                <span style={{ visibility: 'hidden' }}>
                                    <ReactHTMLTableToExcel
                                        buttonText={'导出excel'}
                                        ref={downloadBtnRef}
                                        table="table-to-xls-settlementSummaryTable"
                                        filename={`(${searchParams?.StatisticsYear})年度结算汇总表`}
                                        sheet="sheet1"
                                        dataType="String"
                                    />
                                </span>,
                                <Button
                                    key="new"
                                    type="primary"
                                    onClick={(e) => {
                                        if (reqDetailList && reqDetailList.length > 0) {
                                            setShowLoading(true)
                                            setTimeout(() => {
                                                setShowExportTable(true)
                                                setTimeout(() => {
                                                    // handleExportDataToExcel(true, true)
                                                    exportTable(e)
                                                }, 100)
                                            }, 100)
                                        } else {
                                            message.error('暂无数据可导出！')
                                        }
                                    }}
                                >
                                    导出excel
                                </Button>
                            ]
                        }}
                        columnsState={{
                            value: columnsStateMap,
                            onChange: setColumnsStateMap,
                        }}
                    />
                </div>
            </div>

            <Drawer
                width="85%"
                visible={showDrawer}
                destroyOnClose
                onClose={() => {
                    setShowDrawer(false)
                    setCurrentRow(undefined)
                }}
                bodyStyle={{ backgroundColor: "#fff", padding: 0 }}
                closable={false}
                className="summaryDrawer"
            >
                <YearExamineDetailTable parentRow={currentRow} currentApprovalstate={currentRow?.Approvalstate} onRef={null}
                    setIsShowMonthBtn={setIsShowMonthBtn} setIsYearAllowSettlement={false} handleShowSettlementDetail={false} isYear={true}
                    isChangeFile={false} />
            </Drawer>



        </div>
    )
}

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