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 type { FormInstance } from "antd";
import { Button, message, Modal, Space, Spin, Tree } from "antd";
import useRequest from "@ahooksjs/use-request";
import { getServerpartTree } 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 { handleGetCHECKCOMMODITYList, handleGetMultiCodeStatisticsList } from "../service";
import { getMyShopList } from "@/pages/account/center/sevice";
import session from "@/utils/session";
import InventoryDetailModal from "../InventoryDetails/components/InventoryDetailModal";
import Draggable from "react-draggable";
import InventoryDetails from "../InventoryDetails";
import { exportXlsxFromProColumnsExcelJS } from "@/utils/exportExcelFun";
import { formatTreeData } from "@/utils/format";
import moment from 'moment'

const oneProductMultipleSizes: React.FC<{ currentUser: CurrentUser }> = (props) => {
    const { currentUser } = props
    const downloadBtnRef = useRef<any>()
    const draggleRef = React.createRef<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())


    // 树相关的属性和方法
    const [selectedId, setSelectedId] = useState<string>()
    // 导出的加载效果
    const [showLoading, setShowLoading] = useState<boolean>(false)
    // 是否显示打印的表格
    const [showExportTable, setShowExportTable] = useState<boolean>(false)
    // 查询的条件
    const [searchParams, setSearchParams] = useState<any>()
    // 当前的门店列表
    const [currentShopList, setCurrentShopList] = useState<any>()
    // 判断时间的列表
    const [timeList, setTimeList] = useState<any>()
    // 当前显示的数据类型
    const [currentDataType, setCurrentDataType] = useState<string>('1') // 1含税 2不含税
    // 显示详情
    const [showDetail, setShowDetail] = useState<boolean>(false)
    // 当前的行数据
    const [currentRow, setCurrentRow] = useState<any>()
    // 显示一品多码的悬浮框
    const [showMoreDetal, setShowMoreDetail] = useState<boolean>(false)

    // 弹出框拖动效果
    const [bounds, setBounds] = useState<{ left: number, right: number, top: number, bottom: number }>() // 移动的位置
    const [disabled, setDraggleDisabled] = useState<boolean>() // 是否拖动
    const onDraggaleStart = (event, uiData) => {
        const { clientWidth, clientHeight } = window.document.documentElement;
        const targetRect = draggleRef.current?.getBoundingClientRect();
        if (!targetRect) {
            return;
        }
        setBounds({
            left: -targetRect.left + uiData.x,
            right: clientWidth - (targetRect.right - uiData.x),
            top: -targetRect.top + uiData.y,
            bottom: clientHeight - (targetRect.bottom - uiData.y),
        });
    };

    const columns: any = [
        {
            title: "服务区",
            dataIndex: "servicePartId",
            hideInTable: true,
            valueType: 'select',
            fieldProps: {
                showSearch: true,
                onChange: async (value: any, label: any) => {
                    console.log('value', value, label);
                    formRef.current?.setFieldsValue({ serverpartShopId: undefined, InventoryTime: undefined })
                    await handleGetShopList(value)
                }
            },
            request: async () => {
                const list = session.get('ServerpartIdsTree')
                return list || []
            },
        },
        {
            title: "门店",
            dataIndex: "serverpartShopId",
            hideInTable: true,
            valueType: 'select',
            fieldProps: {
                showSearch: true,
                options: currentShopList,
                onChange: async (value: any, label: any) => {
                    console.log('value', value, label);
                    formRef.current?.setFieldsValue({ InventoryTime: undefined })
                    await handleGetTimeList(value)
                }
            },
        },
        {
            title: "盘存时间",
            dataIndex: "InventoryTime",
            hideInTable: true,
            valueType: 'select',
            fieldProps: {
                showSearch: true,
                options: timeList
            },
        },
        {
            title: "数据类型",
            dataIndex: "dataType",
            valueType: 'select',
            hideInTable: true,
            fieldProps: {
                options: [{ label: "含税", value: '1' }, { label: "除税", value: '2' }],
            },
            initialValue: currentDataType,
        },

        {
            title: "商品信息",
            dataIndex: "COMMODITYINFO",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: "序号",
                    dataIndex: "index",
                    valueType: 'index',
                    align: 'center',
                    width: 80,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: "商品类型",
                    dataIndex: "COMMODITYTYPE_NAME",
                    align: 'center',
                    width: 150,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>商品名称</div>,
                    dataIndex: "COMMODITY_NAME",
                    align: 'left',
                    width: 250,
                    ellipsis: true,
                    hideInSearch: true,
                    render: (_, record) => {
                        return <a onClick={() => {
                            console.log('recordrecordrecord', record);

                            setCurrentRow({
                                ...record,
                                checkTime: searchParams?.CheckCommodityId ? searchParams?.CheckCommodityId.split('-')[0] : ""
                            })
                            setShowMoreDetail(true)
                            if (record?.COMMODITY_IDS && record?.COMMODITY_IDS.split(',') && record?.COMMODITY_IDS.split(',').length > 1) {

                            } else {
                                // setCurrentRow(record)
                                // setShowDetail(true)
                            }
                        }}>{record?.COMMODITY_NAME}</a>
                    }
                },
                {
                    title: "商品编码",
                    dataIndex: "COMMODITY_CODE",
                    align: 'center',
                    width: 120,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: "商品规格",
                    dataIndex: "COMMODITY_RULE",
                    align: 'center',
                    width: 100,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },

    ]

    // 含税的时候拼在coulmns后面的 
    const columnsType1: any = [
        {
            title: "本期结存",
            dataIndex: "OVERPLU",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "OVERPLUSCOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "OVERPLUS_AMOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期损溢",
            dataIndex: "LOSSPROFIT",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "LOSSPROFIT_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "LOSSPROFIT_AMOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>损溢率(‰)</div>,
                    dataIndex: "LOSSPROFIT_RATE",
                    align: 'right',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                    render: (_, record) => {
                        return record?.SELL_TOTALTAXPRICE ? (record?.LOSSPROFIT_AMOUNT / record?.SELL_TOTALTAXPRICE * 1000).toFixed(2) + '%' : 0
                    }
                },
            ]
        },
        {
            title: "本期毛利",
            dataIndex: "GROSS",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "GROSS_PROFIT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>毛利率(%)</div>,
                    dataIndex: "GROSS_PROFITRATE",
                    align: 'right',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                    render: (_, record) => {
                        return record?.SELL_TOTALTAXPRICE ? (record?.GROSS_PROFIT / record?.SELL_TOTALTAXPRICE * 100).toFixed(2) + '%' : 0
                    }
                },
            ]
        },
        {
            title: "上期结存",
            dataIndex: "LASTOVERPLUS",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "LAST_OVERPLUSCOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "LAST_OVERPLUSAMOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期入库",
            dataIndex: "PURCHASE",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "PURCHASE_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "PURCHASE_TOTALTAXPRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期销售",
            dataIndex: "SELL",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "SELL_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>单价</div>,
                    dataIndex: "SELL_UNITTAXPRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "SELL_TOTALTAXPRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>成本</div>,
                    dataIndex: "SELL_COST",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期调拨",
            dataIndex: "TRANSFER",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "TRANSFER_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "TRANSFER_AMOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期领用",
            dataIndex: "RECEIVE",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "RECEIVE_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "RECEIVE_AMOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期退货",
            dataIndex: "BACK",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "BACK_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "BACK_AMOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        }
    ]

    // 除税的时候拼在coulmns后面的 
    const columnsType2: any = [
        {
            title: "本期结存",
            dataIndex: "OVERPLU",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "OVERPLUSCOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "OVERPLUS_PRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期损溢",
            dataIndex: "LOSSPROFIT",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "LOSSPROFIT_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "LOSSPROFIT_PRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>损溢率(‰)</div>,
                    dataIndex: "LOSSPROFIT_RATE",
                    align: 'right',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                    render: (_, record) => {
                        return record?.SELL_TOTALPRICE ? (record?.LOSSPROFIT_PRICE / record?.SELL_TOTALPRICE * 1000).toFixed(2) + '%' : 0
                    }
                },
            ]
        },
        {
            title: "本期毛利",
            dataIndex: "GROSS",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "GROSS_PROFITPRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>毛利率(%)</div>,
                    dataIndex: "GROSS_PROFITRATE",
                    align: 'right',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                    render: (_, record) => {
                        return record?.SELL_TOTALPRICE ? (record?.GROSS_PROFITPRICE / record?.SELL_TOTALPRICE * 100).toFixed(2) + '%' : 0
                    }
                },
            ]
        },
        {
            title: "上期结存",
            dataIndex: "LASTOVERPLUS",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "LAST_OVERPLUSCOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "LAST_OVERPLUSPRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期入库",
            dataIndex: "PURCHASE",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "PURCHASE_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "PURCHASE_TOTALPRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期销售",
            dataIndex: "SELL",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "SELL_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>单价</div>,
                    dataIndex: "SELL_UNITPRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "SELL_TOTALPRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>成本</div>,
                    dataIndex: "SELL_COSTPRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期调拨",
            dataIndex: "TRANSFER",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "TRANSFER_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "TRANSFER_PRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期领用",
            dataIndex: "RECEIVE",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "RECEIVE_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "RECEIVE_PRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期退货",
            dataIndex: "BACK",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "BACK_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "BACK_PRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        }
    ]

    const exportTable = (e) => {
        e.stopPropagation();                                            // 防止Collapse组件收起
        const main = document.getElementsByClassName(`saleReportHideBox${printIndex}`)[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-oneProductMultipleSizes');                    // 给table添加id，值与按钮上的table字段对应

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

        setShowLoading(false)

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

    // 拿到门店的列表数据
    const handleGetShopList = async (id: any) => {
        if (!id) {
            setCurrentShopList([])
            return
        }
        const req: any = {
            // 调用的接口 里面 自己包了一层
            // SearchParameter: {
            ISVALID: 1,
            SERVERPART_ID: id,
            INSALES_TYPE: 1,
            // },
            PageIndex: 1,
            PageSize: 999999,
            SortStr: "SHOPTRADE,SHOPREGION,SHOPCODE"
        }
        const data = await getMyShopList(req)
        let list: any = []
        if (data && data.length > 0) {
            data.forEach((item: any) => {
                list.push({ label: item.SHOPNAME, value: item.SERVERPARTSHOP_ID })
            })
        }
        setCurrentShopList(list)
    }

    // 拿到盘存时间的列表数据
    const handleGetTimeList = async (id: any) => {
        const req: any = {
            SearchParameter: {
                SERVERPARTSHOP_IDS: id,
                CHECK_STATES: 1,
                CHECK_TYPES: "1000,3000"
            },
            PageIndex: 1,
            PageSize: 999999,
        }
        const data = await handleGetCHECKCOMMODITYList(req)
        console.log('盘存时间', data);
        let list: any = []
        if (data && data.length > 0) {
            data.forEach((item: any) => {
                list.push({ label: item.CHECKDATE, value: `${item.CHECKDATE}-${item.CHECKCOMMODITY_ID}` })
            })
        }
        setTimeList(list)
    }


    // 关闭组件的方法
    const handleModalCancel = () => {
        setShowDetail(false)
        setCurrentRow(null)
    }

    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={`saleReportHideBox${printIndex}`} style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }}>
                {
                    showExportTable && reqDetailList && reqDetailList.length > 0 ?
                        <ProTable
                            columns={currentDataType === '1' ? [...columns, ...columnsType1] : currentDataType === '2' ? [...columns, ...columnsType2] : []}
                            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: '100%',
                    paddingTop: 0,
                    paddingBottom: 0,
                    paddingRight: 0
                }}>
                    <ProTable
                        actionRef={actionRef}
                        formRef={formRef}
                        columns={currentDataType === '1' ? [...columns, ...columnsType1] : currentDataType === '2' ? [...columns, ...columnsType2] : []}
                        bordered
                        expandable={{
                            expandRowByClick: true
                        }}
                        scroll={{ x: "100%", y: "calc(100vh - 480px)" }}
                        headerTitle={<PageTitleBox props={props} />} // 列表表头
                        search={{ span: 4 }}
                        request={async (params) => {
                            console.log('paramsparamsparams', params);

                            if (!params.servicePartId || !params.serverpartShopId || !params.InventoryTime) {
                                setReqDetailList([])
                                return { data: [], success: true }
                            }

                            const req: any = {
                                ServerpartId: params.servicePartId ? params.servicePartId : '',
                                CheckCommodityId: params.InventoryTime ? params.InventoryTime.split('-')[1] : "",
                                CommodityTypeId: "",
                                SearchKeyName: "",
                                SearchKeyValue: '',
                                SortStr: ""
                            }

                            setSearchParams(params)

                            const data = await handleGetMultiCodeStatisticsList(req)
                            console.log('datadatadata', data);

                            if (data && data.length > 0) {

                                let fieldData: any = [
                                    "OVERPLUSCOUNT",
                                    "OVERPLUS_PRICE",
                                    "LOSSPROFIT_COUNT",
                                    "LOSSPROFIT_PRICE",
                                    "GROSS_PROFITPRICE",
                                    "LAST_OVERPLUSCOUNT",
                                    "LAST_OVERPLUSPRICE",
                                    "PURCHASE_COUNT",
                                    "PURCHASE_TOTALPRICE",
                                    "SELL_COUNT",
                                    "SELL_UNITPRICE",
                                    "SELL_TOTALPRICE",
                                    "SELL_COSTPRICE",
                                    "TRANSFER_COUNT",
                                    "TRANSFER_PRICE",
                                    "RECEIVE_COUNT",
                                    "RECEIVE_PRICE",
                                    "BACK_COUNT",
                                    "BACK_PRICE",
                                    "OVERPLUS_AMOUNT",
                                    "LOSSPROFIT_AMOUNT",
                                    "GROSS_PROFIT",
                                    "LAST_OVERPLUSAMOUNT",
                                    "PURCHASE_TOTALTAXPRICE",
                                    "SELL_UNITTAXPRICE",
                                    "SELL_TOTALTAXPRICE",
                                    "SELL_COST",
                                    "TRANSFER_AMOUNT",
                                    "RECEIVE_AMOUNT",
                                    "BACK_AMOUNT",
                                ]
                                let enumList: any = []
                                let newPrintData: any = formatTreeData(JSON.parse(JSON.stringify(data)), fieldData, enumList, [], [])

                                setReqDetailList(newPrintData)

                                let res: any = []
                                data.forEach((item: any) => {
                                    if (item.COMMODITY_IDS.split(',') && item.COMMODITY_IDS.split(',').length > 1) {
                                        res.push(item)
                                    }
                                })
                                console.log('resresresresresres', res);

                                return { data: data, success: true }
                            }
                            return { data: [], success: true }
                        }}
                        toolbar={{
                            actions: [
                                // <span style={{ visibility: 'hidden' }}>
                                //     <ReactHTMLTableToExcel
                                //         buttonText={'导出excel'}
                                //         ref={downloadBtnRef}
                                //         table="table-to-xls-oneProductMultipleSizes"
                                //         filename={`一品多码统计表`}
                                //         sheet="sheet1"
                                //     />
                                // </span>,
                                <Button
                                    key="new"
                                    type="primary"
                                    onClick={(e) => {
                                        if (reqDetailList && reqDetailList.length > 0) {
                                            // 尝试一下 导出新方法 
                                            exportXlsxFromProColumnsExcelJS(currentDataType === '1' ? [...columns, ...columnsType1] : currentDataType === '2' ? [...columns, ...columnsType2] : [],
                                                reqDetailList,
                                                `一品多码统计表`,
                                                {
                                                    topTitle: `一品多码统计表`, // 顶部大标题
                                                    footerMaker: currentUser?.Name,
                                                    footerMakerTime: moment().format('YYYY-MM-DD HH:mm:ss'),
                                                    footerStatsTime: ""
                                                }
                                            )
                                        } else {
                                            message.error('暂无数据可导出！')
                                        }

                                        // if (reqDetailList && reqDetailList.length > 0) {
                                        //     setShowLoading(true)
                                        //     setTimeout(() => {
                                        //         setShowExportTable(true)
                                        //         setTimeout(() => {
                                        //             exportTable(e)
                                        //         }, 100)
                                        //     }, 100)
                                        // } else {
                                        //     message.error('暂无数据可导出！')
                                        // }
                                    }}
                                >
                                    导出excel
                                </Button>
                            ]
                        }}
                    />
                </div>
            </div>

            {/* 一品多码 只有一个码的时候显示 这个 */}
            {/* 进销存明细的悬浮框 */}
            <InventoryDetailModal onShow={showDetail} parentRow={currentRow} onCancel={handleModalCancel} />


            {/* 一品多码 多个码的时候显示 */}
            <Modal
                title={
                    <div
                        className="oneProductMultipleSizesTitle"
                        style={{
                            width: '100%',
                            cursor: 'move',
                        }}
                        onMouseOver={() => {
                            if (disabled) {
                                setDraggleDisabled(false)
                            }
                        }}
                        onMouseOut={() => {
                            setDraggleDisabled(true)
                        }}

                        onFocus={() => { }}
                        onBlur={() => { }}
                    >进销存明细表</div>
                }
                destroyOnClose={true}
                width={'80%'}
                bodyStyle={{
                    height: '700px', // 你可以根据需要调整高度
                    overflowY: 'auto',
                }}
                visible={showMoreDetal}
                onCancel={() => {
                    setShowMoreDetail(false)
                    setCurrentRow(null)
                }}
                footer={false}
                modalRender={(modal) => {
                    return <Draggable
                        disabled={disabled}
                        bounds={bounds}
                        onStart={(event, uiData) => onDraggaleStart(event, uiData)}
                        handle=".oneProductMultipleSizesTitle"
                    >
                        <div ref={draggleRef}>{modal}</div>
                    </Draggable>
                }}
            >
                <InventoryDetails isComponents={true} parentRow={currentRow} />
            </Modal>
        </div>
    )
}

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