// 商品上架管理
import React, { useRef, useState, Suspense } from 'react';
import moment from 'moment'; // 时间相关引用，没有使用可以删除
import numeral from "numeral"; // 数字相关引用，没有使用可以删除
import { connect } from 'umi';

import useRequest from '@ahooksjs/use-request'; // 请求数据的引用
import Draggable from 'react-draggable';
import SubMenu from "antd/lib/menu/SubMenu";
import ProTable from '@ant-design/pro-table';
import ProDescriptions from '@ant-design/pro-descriptions';
import ProForm, { ProFormDatePicker, ProFormDateRangePicker, ProFormDateTimePicker, ProFormDigit, ProFormMoney, ProFormSelect, ProFormText, ProFormTextArea, ProFormTreeSelect, ProFormUploadButton } from '@ant-design/pro-form';
import { MenuFoldOutlined, PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Col, Drawer, message, Row, Popconfirm, Space, Image, Modal, Form, Switch, Upload, Tooltip, Descriptions, TreeSelect, Divider, Input } from 'antd';

import type { CurrentUser } from "umi";
import type { ConnectState } from '@/models/connect';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import type { FormInstance } from 'antd';

import { getFieldEnumTree, getFieldEnumName } from "@/services/options"; // 枚举的引用，没有使用可以删除
import { getList, delcommodity, updatecommodity } from './service'; // 接口相关对象的引用
import PageTitleBox from "@/components/PageTitleBox";
import LeftSelectMallType from './component/LeftSelectMallType';
import { handeDeleteCOMMODITY, handeDeleteRTCOMMODITY_MULTI, handeGetCOMMODITY_MULTIList, handeGetCOMMODITYDetail, handeGetCOMMODITYList, handeGetMERCHANTSList, handeGetRTCOMMODITY_MULTIList, handeSetCommodityState, handeSynchroCOMMODITY, handeSynchroRTCOMMODITYMULTIList, handleGetBRANDList, handlGetUSERDEFINEDTYPEList } from '../service';
import session from '@/utils/session';
import { deleteAHYDPicture, deletePicture, uploadAHYDPicture, uploadPicture } from '@/services/picture';
import { handleSetlogSave } from '@/utils/format';
import { highlightText } from '@/utils/highlightText';


const beforeUpload = (file: any) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('请上传JPEG、jpg、png格式的图片文件!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('图片大小不超过 2MB!');
    }
    return isJpgOrPng && isLt2M;
}

const COMMODITYTable: React.FC<{ currentUser: CurrentUser | undefined }> = (props) => {
    const { currentUser } = props
    const { confirm } = Modal;
    const actionRef = useRef<ActionType>();
    const ruleActionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    const [currentRow, setCurrentRow] = useState<any>();
    const [showDetail, setShowDetail] = useState<boolean>();
    const [modalVisible, handleModalVisible] = useState<boolean>();
    const [confirmLoading, handleConfirmLoading] = useState<boolean>(false) // 弹出框的内容表单是否在提交
    const [searchParams, setSearchParams] = useState<any>();
    const [collapsible, setCollapsible] = useState<boolean>(false)
    // 弹出框拖动效果
    const [bounds, setBounds] = useState<{ left: number, right: number, top: number, bottom: number }>() // 移动的位置
    const [disabled, setDraggleDisabled] = useState<boolean>() // 是否拖动
    const draggleRef = React.createRef<any>()
    // 商品属性
    const COMMODITYNATUREObj = session.get('COMMODITYNATUREObj')
    const COMMODITYNATUREList = session.get('COMMODITYNATUREList')
    // 消费模式
    const PAYMETHODObj = session.get('PAYMETHODObj')
    const PAYMETHODList = session.get('PAYMETHODList')
    // 税率
    const DUTYPARAGRAPHObj = session.get('DUTYPARAGRAPHObj')
    const DUTYPARAGRAPHList = session.get('DUTYPARAGRAPHList')
    // 质量等级
    const COMMODITYGRADEList = session.get('COMMODITYGRADEList')
    // 在proform里面的品牌查询列表
    const [BRAND_NAMEList, setBRAND_NAMEList] = useState<any>()
    // 供货商户数据
    const [COMMODITYSUPPLIERLIST, setCOMMODITYSUPPLIERLIST] = useState<any>()
    // 拿到左侧树的数据
    const [leftTreeData, setLeftTreeData] = useState<any>()
    // 多规格
    const [showMoreSpecs, setShowMoreSpecs] = useState<boolean>(false)
    // 新增规格的 悬浮框
    const [showAddSpecsModal, setShowAddSpecsModal] = useState<boolean>(false)
    // 树相关的属性和方法
    const [selectedId, setSelectedId] = useState<string>()
    // 选择的规格内容
    const [selectedRowKeys, setSelectedRowKeys] = useState<any>()
    const [selectedRows, setSelectedRows] = useState<any>()
    // 当前商品关联的规格数据
    const [specsData, setSpecsData] = useState<any>()
    // 主图图片
    const [mainImgList, setMainImgList] = useState<any>()
    // 头部轮播框
    const [headerImgList, setHeaderImgList] = useState<any>()
    // 详情图
    const [detailImgList, setDetailImgList] = useState<any>()
    // 文件列表
    const [fileList, setFileList] = useState<any>([])
    const [imagePreviewVisible, setImagePreviewVisible] = useState<boolean>(false) // 预览图片
    // 选择的商品id
    const [selectShopRowKey, setSelectShopRowKey] = useState<any>([])
    // 上下架的加载效果
    const [toListLoading, setToListLoading] = useState<boolean>(false)
    // 当前查询的文字
    const [currentSearchText, setCurrentSearchText] = useState<string>('')

    // 预览上传后的图片
    const handlePreview = async (type: number) => {
        if (type === 1) {
            setFileList(mainImgList)
        } else if (type === 2) {
            setFileList(headerImgList)
        } else if (type === 3) {
            setFileList(detailImgList)
        }
        setImagePreviewVisible(true)
    };
    const handleChangePreview = (val: any) => {
        setImagePreviewVisible(val)
    }
    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 = [
        {
            dataIndex: 'searchText',
            title: '查询内容',
            align: 'center',
            hideInTable: true,
            width: 120,
            ellipsis: true,
            fieldProps: {
                placeholder: "请输入商品名称/品牌名称"
            }
        },
        {
            dataIndex: 'index',
            title: '序号',
            align: 'center',
            width: 70,
            ellipsis: true,
            valueType: 'index',
            hideInSearch: true,
        },
        {
            dataIndex: 'USERDEFINEDTYPE_NAME',
            title: '商城类别',
            align: 'center',
            hideInSearch: true,
            width: 120,
            ellipsis: true,
        },
        {
            dataIndex: 'BRAND_NAME',
            title: '品牌名称',
            align: 'center',
            hideInSearch: true,
            width: 120,
            ellipsis: true,
            render: (_, record) => {
                return highlightText(record?.BRAND_NAME, currentSearchText)
            }
        },
        {
            dataIndex: 'COMMODITY_INDEX',
            title: '商品索引',
            align: 'center',
            hideInSearch: true,
            width: 120,
            ellipsis: true,
        },
        {
            dataIndex: 'COMMODITY_NAME',
            title: '商品名称',
            align: 'center',
            hideInSearch: true,
            hideInDescriptions: true,
            width: 300,
            ellipsis: true,
            render: (_, record) => {
                return record?.COMMODITY_NAME ? <a onClick={() => {
                    handleSetlogSave(`查看商品【${record?.COMMODITY_NAME}】信息`)
                    setCurrentRow({ ...record });
                    handleModalVisible(true);
                }}>
                    {/* {record?.COMMODITY_NAME} */}
                    {highlightText(record?.COMMODITY_NAME, currentSearchText)}
                </a> : "-"
            }
        },
        {
            dataIndex: 'COMMODITY_NATURE',
            title: '商品属性',
            align: 'center',
            hideInSearch: true,
            width: 120,
            ellipsis: true,
            valueType: 'select',
            valueEnum: COMMODITYNATUREObj
        },

        {
            dataIndex: 'PAY_METHOD',
            title: '消费模式',
            align: 'center',
            hideInSearch: true,
            width: 180,
            ellipsis: true,
            valueType: 'select',
            valueEnum: PAYMETHODObj
        },
        {
            dataIndex: 'COMMODITY_MEMBERPRICE',
            title: '会员价格',
            align: 'center',
            hideInSearch: true,
            width: 120,
            ellipsis: true,
        },
        {
            dataIndex: 'COMMODITY_POINT',
            title: '商品积分',
            align: 'center',
            hideInSearch: true,
            width: 120,
            ellipsis: true,
        },
        {
            dataIndex: 'DUTY_PARAGRAPH',
            title: '税率(%)',
            align: 'center',
            width: 120,
            ellipsis: true,
            valueEnum: {
                ...DUTYPARAGRAPHObj,
                "-1": "全部",
            },
            initialValue: "-1"
        },
        {
            dataIndex: 'UPPER_STATE',
            title: '上架状态',
            align: 'center',
            width: 120,
            ellipsis: true,
            valueType: "select",
            valueEnum: {
                "0": "未上架",
                "1": "已上架",
                "2": "已驳回"
            },
            initialValue: "1"
        },
        {
            dataIndex: 'MERCHANTS_NAME',
            title: '商户名称',
            align: 'center',
            hideInSearch: true,
            width: 200,
            ellipsis: true,
        },
        // {
        //     dataIndex: 'option',
        //     title: '操作',
        //     valueType: 'option',
        //     align: 'center',
        //     hideInSearch: true,
        //     width: 120,
        //     fixed: "right",
        //     ellipsis: true,
        //     render: (_, record) => {
        //         return (
        //             <Space>
        //                 <a
        //                     onClick={() => {
        //                         console.log('recordrecordrecord', record);

        //                         setCurrentRow({ ...record });
        //                         handleModalVisible(true);
        //                     }}
        //                 >
        //                     编辑
        //                 </a>
        //                 <Popconfirm
        //                     title="确认删除该商品管理列表信息吗?"
        //                     onConfirm={async () => {
        //                         await handelDelete(record.COMMODITY_ID);
        //                     }}
        //                 >
        //                     <a>删除</a>
        //                 </Popconfirm>
        //             </Space>
        //         );
        //     },
        // },
    ];

    // 多规格表格的字段
    const specsColumns: any = [
        {
            dataIndex: 'index',
            title: '序号',
            align: 'center',
            width: 70,
            ellipsis: true,
            valueType: 'index',
        },
        {
            dataIndex: 'USERDEFINEDTYPE_NAME',
            title: '规格分类',
            align: 'center',
            width: 120,
            ellipsis: true,
        },
        {
            dataIndex: 'COMMODITY_NAME',
            title: '规格名称',
            align: 'center',
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'COMMODITY_STOCK',
            title: '商品库存',
            align: 'center',
            width: 120,
            ellipsis: true,
            render: (_, record) => {
                return <Input value={record.COMMODITY_STOCK} onChange={(e: any) => {
                    let oldData: any = JSON.parse(JSON.stringify(specsData))
                    let list: any = []
                    oldData.forEach((item: any) => {
                        if (item.COMMODITY_MULTI_ID === record?.COMMODITY_MULTI_ID) {
                            item.COMMODITY_STOCK = e.target.value
                        }
                        list.push(item)
                    })
                    setSpecsData(list)
                }} />
            }
        },
        {
            dataIndex: 'COMMODITY_RETAILPRICE',
            title: '商品原价',
            align: 'center',
            width: 120,
            ellipsis: true,
            render: (_, record) => {
                return <Input value={record.COMMODITY_RETAILPRICE} onChange={(e: any) => {
                    let oldData: any = JSON.parse(JSON.stringify(specsData))
                    let list: any = []
                    oldData.forEach((item: any) => {
                        if (item.COMMODITY_MULTI_ID === record?.COMMODITY_MULTI_ID) {
                            item.COMMODITY_RETAILPRICE = e.target.value
                        }
                        list.push(item)
                    })
                    setSpecsData(list)
                }} />
            }
        },
        {
            dataIndex: 'COMMODITY_MEMBERPRICE',
            title: '零售价格',
            align: 'center',
            width: 120,
            ellipsis: true,
            render: (_, record) => {
                return <Input value={record.COMMODITY_MEMBERPRICE} onChange={(e: any) => {
                    let oldData: any = JSON.parse(JSON.stringify(specsData))
                    let list: any = []
                    oldData.forEach((item: any) => {
                        if (item.COMMODITY_MULTI_ID === record?.COMMODITY_MULTI_ID) {
                            item.COMMODITY_MEMBERPRICE = e.target.value
                        }
                        list.push(item)
                    })
                    setSpecsData(list)
                }} />
            }
        },
        {
            dataIndex: 'COMMODITY_PURCHASEPRICE',
            title: '商品成本',
            align: 'center',
            width: 120,
            ellipsis: true,
            render: (_, record) => {
                return <Input value={record.COMMODITY_PURCHASEPRICE} onChange={(e: any) => {
                    let oldData: any = JSON.parse(JSON.stringify(specsData))
                    let list: any = []
                    oldData.forEach((item: any) => {
                        if (item.COMMODITY_MULTI_ID === record?.COMMODITY_MULTI_ID) {
                            item.COMMODITY_PURCHASEPRICE = e.target.value
                        }
                        list.push(item)
                    })
                    setSpecsData(list)
                }} />
            }
        },
        {
            dataIndex: 'option',
            title: '操作',
            valueType: 'option',
            align: 'center',
            hideInSearch: true,
            width: 120,
            ellipsis: true,
            render: (_, record) => {
                return (
                    <Space>
                        <Popconfirm
                            title="确认删除该商品规格嘛?"
                            onConfirm={async () => {
                                console.log('recordrecordrecord', record);
                                const data = await handeDeleteRTCOMMODITY_MULTI({ RTCOMMODITY_MULTIId: record?.RTCOMMODITY_MULTI_ID })
                                if (data.Result_Code !== 100) {
                                    message.error(`${data.Result_Desc}` || `${data.Result_Code}:删除失败`);
                                } else {
                                    message.success('删除成功！');
                                    ruleActionRef.current?.reload()
                                }
                            }}
                        >
                            <a>删除</a>
                        </Popconfirm>
                    </Space>
                );
            },
        },
    ]

    // 新增多规格的表格
    const addSpecsCoumns: any = [
        {
            title: '查询内容',
            dataIndex: 'searchText',
            ellipsis: true,
            hideInTable: true,
            fieldProps: {
                placeholder: "输入规格名称"
            }
        },
        {
            dataIndex: 'index',
            title: '序号',
            align: 'center',
            width: 70,
            ellipsis: true,
            valueType: 'index',
            hideInSearch: true,
        },
        {
            dataIndex: 'USERDEFINEDTYPE_NAME',
            title: '规格分类',
            align: 'center',
            width: 150,
            ellipsis: true,
            hideInSearch: true,
        },
        {
            dataIndex: 'COMMODITY_NAME',
            title: '规格名称',
            align: 'center',
            width: 200,
            ellipsis: true,
            hideInSearch: true,
        },
        {
            dataIndex: 'supplier',
            title: '供应商',
            align: 'center',
            width: 200,
            ellipsis: true,
            hideInSearch: true,
        },
    ]

    const handelDelete = async (commodityid: number) => {
        const result = await handeDeleteCOMMODITY({ COMMODITYId: commodityid });

        if (result.Result_Code !== 100) {
            message.error(`${result.Result_Desc}` || `${result.Result_Code}:删除失败`);
        } else {
            message.success('删除成功！');
            handleSetlogSave(`删除商品【${currentRow?.COMMODITY_NAME}】`)
            handleConfirmLoading(false)
            handleModalVisible(false)
            setMainImgList([])
            setHeaderImgList([])
            setDetailImgList([])
            actionRef.current?.reload()
        }
    };

    const handleAddUpdate = async (res: any) => {
        let req: any = {}
        if (currentRow?.USERDEFINEDTYPE_ID) {
            req = {
                ...currentRow,
                ...res,
                UserDefinedTypeIds: res.USERDEFINEDTYPE_ID ? res.USERDEFINEDTYPE_ID.toString() : "",
                BRAND_ID: res.BRAND_ID.split('-')[1],
                BRAND_NAME: res.BRAND_ID.split('-')[0],
                MERCHANTS_ID: res.MERCHANTS_ID.split('-')[1],
                MERCHANTS_NAME: res.MERCHANTS_ID.split('-')[0],
                OWNERUNIT_ID: currentUser?.OwnerUnitId,
                OWNERUNIT_NAME: currentUser?.OwnerUnitName,
                PROVINCE_CODE: currentUser?.ProvinceCode,
                OPERATE_PERSON: currentUser?.Name,
                SELLER_ID: currentUser?.ID,
                COMMODITY_TYPE: 4000,
                COMMODITY_STATE: 1,
                USERDEFINEDTYPE_ID: "",
                OPERATE_TIME: moment().format('YYYY-MM-DD HH:mm:ss'),
                UPPER_DATE: res.UPPER_DATE && res.UPPER_DATE.length > 0 ? moment(res.UPPER_DATE[0]).format('YYYY-MM-DD HH:mm:ss') : "",
                OFF_DATE: res.UPPER_DATE && res.UPPER_DATE.length > 0 ? moment(res.UPPER_DATE[1]).format('YYYY-MM-DD HH:mm:ss') : "",
            }
        } else {
            req = {
                ...res,
                UserDefinedTypeIds: res.USERDEFINEDTYPE_ID ? res.USERDEFINEDTYPE_ID.toString() : "",
                BRAND_ID: res.BRAND_ID.split('-')[1],
                BRAND_NAME: res.BRAND_ID.split('-')[0],
                MERCHANTS_ID: res.MERCHANTS_ID.split('-')[1],
                MERCHANTS_NAME: res.MERCHANTS_ID.split('-')[0],
                OWNERUNIT_ID: currentUser?.OwnerUnitId,
                OWNERUNIT_NAME: currentUser?.OwnerUnitName,
                PROVINCE_CODE: currentUser?.ProvinceCode,
                OPERATE_PERSON: currentUser?.Name,
                SELLER_ID: currentUser?.ID,
                COMMODITY_TYPE: 4000,
                COMMODITY_STATE: 1,
                USERDEFINEDTYPE_ID: "",
                OPERATE_TIME: moment().format('YYYY-MM-DD HH:mm:ss'),
                UPPER_DATE: res.UPPER_DATE && res.UPPER_DATE.length > 0 ? moment(res.UPPER_DATE[0]).format('YYYY-MM-DD HH:mm:ss') : "",
                OFF_DATE: res.UPPER_DATE && res.UPPER_DATE.length > 0 ? moment(res.UPPER_DATE[1]).format('YYYY-MM-DD HH:mm:ss') : "",
            }
        }
        console.log('reqreqreqreq', req);

        const data = await handeSynchroCOMMODITY(req)
        handleConfirmLoading(false)
        if (data.Result_Code === 100) {

            await handleUploadShopImg(res, data.Result_Data)

            handleSetlogSave(`${currentRow?.USERDEFINEDTYPE_ID ? '更新' : '新增'}商品【${data.Result_Data?.COMMODITY_NAME}】`)

            message.success("新增成功！")
            setCurrentRow(undefined)
            formRef?.current?.resetFields()
            handleModalVisible(false)
            actionRef.current?.reload()
            // 清空一下 商品关联表的数据
            setSpecsData([])
            // 清空一下 商品关联表的选择行
            setSelectedRowKeys([])
            setSelectedRows([])
            setMainImgList([])
            setHeaderImgList([])
            setDetailImgList([])
        } else {
            message.error(data.Result_Desc)
        }
    };

    // 上传商品图片
    const handleUploadShopImg = async (formRes: any, shopData: any) => {
        // formRes 当前表单的全部数据  shopData 商品数据
        // 主图
        if (formRes.mainImgList && formRes.mainImgList.length > 0) {
            const formData = new FormData();
            formRes.mainImgList.forEach((file: any) => {
                formData.append('files[]', file.originFileObj);
                formData.append('ImageName', typeof file !== 'string' ? file?.name : '');
            });
            formData.append('TableId', shopData.COMMODITY_ID);
            formData.append('imageType', "1000");
            formData.append('TableType', "1207");

            console.log('formData', formData);
            let res = await uploadAHYDPicture(formData)
        }

        // 头部轮播图
        if (formRes.headerImgList && formRes.headerImgList.length > 0) {
            const formData = new FormData();
            formRes.headerImgList.forEach((file: any) => {
                formData.append('files[]', file.originFileObj);
                formData.append('ImageName', typeof file !== 'string' ? file?.name : '');
            });
            formData.append('TableId', shopData.COMMODITY_ID);
            formData.append('imageType', "2000");
            formData.append('TableType', "1207");

            console.log('formData', formData);
            let res = await uploadAHYDPicture(formData)
        }

        // 头部轮播图
        if (formRes.detailImgList && formRes.detailImgList.length > 0) {
            const formData = new FormData();
            formRes.detailImgList.forEach((file: any) => {
                formData.append('files[]', file.originFileObj);
                formData.append('ImageName', typeof file !== 'string' ? file?.name : '');
            });
            formData.append('TableId', shopData.COMMODITY_ID);
            formData.append('imageType', "5000");
            formData.append('TableType', "1207");

            console.log('formData', formData);
            let res = await uploadAHYDPicture(formData)
        }
    }

    //  拿到类别列表里面得规格
    const collectItemsWithCommodityMultiId = (data: any, result = []) => {
        // 检查输入是否为数组
        if (!Array.isArray(data)) {
            return result;
        }

        // 遍历数组中的每一项
        for (const item of data) {
            // 检查是否是对象且包含 COMMODITY_MULTI_ID 属性
            if (typeof item === 'object' && item !== null && 'COMMODITY_MULTI_ID' in item && item.COMMODITY_MULTI_ID) {
                result.push(item);
            }

            // 递归检查所有可能包含子数组的属性
            for (const key in item) {
                if (Array.isArray(item[key])) {
                    collectItemsWithCommodityMultiId(item[key], result);
                }
            }
        }

        return result;
    }

    // 商品批量上下架
    const handleBatchShopShelves = async (type: number) => {
        if (!(selectShopRowKey && selectShopRowKey.length > 0)) {
            message.error('请先选择商品！')
            return
        }

        // type  1  上架   2  下架
        const req: any = {
            CommodityIds: selectShopRowKey.toString(),
            UpperState: type === 1 ? '1' : type === 2 ? '0' : "",
            CommodityState: "1"
        }
        setToListLoading(true)
        const data = await handeSetCommodityState(req)
        setToListLoading(false)
        if (data.Result_Code === 100) {
            message.success(type === 1 ? '上架成功！' : '下架成功！')
            setSelectShopRowKey([])
            actionRef.current?.reload()
        } else {
            message.error(data.Result_Desc)
        }
    }

    return (
        <div>
            <div style={{ backgroundColor: '#fff', display: 'flex' }}>
                <LeftSelectMallType setSelectedId={setSelectedId} setCollapsible={setCollapsible} collapsible={collapsible} setData={setLeftTreeData} />
                <div style={{
                    width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
                    paddingTop: 0,
                    paddingBottom: 0,
                    paddingRight: 0
                }}>
                    {/* 最外层的列表 */}
                    <ProTable
                        scroll={{ x: "100%", y: 'calc(100vh - 370px)' }}
                        rowKey={(record) => {
                            return `${record?.COMMODITY_ID}`
                        }}
                        formRef={formRef}
                        bordered
                        headerTitle={<PageTitleBox props={props} />} // 列表表头
                        actionRef={actionRef}
                        search={{ span: 6, labelWidth: 'auto' }}
                        // 请求数据
                        request={async (params, sorter) => {
                            if (!selectedId) {
                                return
                            }
                            const req = {
                                searchParameter: {
                                    OWNERUNIT_ID: currentUser?.OwnerUnitId,
                                    PROVINCE_CODE: currentUser?.ProvinceCode,
                                    USERDEFINEDTYPE_IDS: selectedId,
                                    UPPER_STATE: params?.UPPER_STATE,
                                    DUTY_PARAGRAPH: params?.DUTY_PARAGRAPH === "-1" ? "" : params?.DUTY_PARAGRAPH,
                                    COMMODITY_TYPE: 4000,
                                    COMMODITY_STATE: 1,
                                },

                                keyWord: {
                                    Key: "COMMODITY_NAME,BRAND_NAME,USERDEFINEDTYPE_NAME",
                                    Value: params?.searchText || ""
                                },
                                PageIndex: 1,
                                PageSize: 999999,
                            }
                            const data = await handeGetCOMMODITYList(req);
                            setCurrentSearchText(params?.searchText || "")

                            console.log('datadatadatadatadata', data);
                            handleSetlogSave(`点击查询按钮`)
                            setSelectShopRowKey([])
                            if (data.List && data.List.length > 0) {
                                return { data: data.List, success: true, total: data.TotalCount }
                            }
                            return { data: [], success: true }
                        }}
                        columns={columns}
                        toolbar={{
                            actions: [
                                // 新增按钮
                                <Button
                                    key="new"
                                    icon={<PlusOutlined />}
                                    type="primary"
                                    onClick={() => {
                                        handleModalVisible(true);
                                    }}
                                >
                                    新增商品
                                </Button>,
                                <Button
                                    key="new"
                                    type="primary"
                                    loading={toListLoading}
                                    onClick={() => {
                                        handleBatchShopShelves(1)
                                    }}
                                >
                                    审核上架
                                </Button>,
                                <Button
                                    key="new"
                                    type="primary"
                                    loading={toListLoading}
                                    onClick={() => {
                                        handleBatchShopShelves(2)
                                    }}
                                >
                                    下架
                                </Button>
                            ],
                        }}
                        pagination={{ defaultPageSize: 10 }}
                        rowSelection={{
                            type: 'checkbox',
                            selectedRowKeys: selectShopRowKey,
                            onChange: (rowKeys, rowDetail) => {
                                console.log('rowKeysrowKeysrowKeys', rowKeys);
                                setSelectShopRowKey(rowKeys)
                            },
                        }}
                    />
                </div>

                {fileList && fileList.length > 0 && <div style={{ display: 'none' }}>
                    <Image.PreviewGroup
                        preview={{
                            visible: imagePreviewVisible,
                            onVisibleChange: vis => {
                                setImagePreviewVisible(vis)
                            }

                        }}>
                        {
                            fileList.map((n) =>
                                <Image src={n.url} key={n.url} />
                            )
                        }

                    </Image.PreviewGroup>
                </div>}

                {/* 添加商品的悬浮框 */}
                <Modal
                    // title={currentRow ? '更新商品管理' : '新建商品管理'}
                    title={
                        <div
                            className='productListing'
                            style={{
                                width: '100%',
                                cursor: 'move',
                            }}
                            onMouseOver={() => {
                                if (disabled) {
                                    setDraggleDisabled(false)
                                }
                            }}
                            onMouseOut={() => {
                                setDraggleDisabled(true)
                            }}

                            onFocus={() => { }}
                            onBlur={() => { }}
                        >
                            {currentRow ? '更新商品管理' : '新建商品管理'}
                        </div>
                    }
                    destroyOnClose={true}
                    width={1400}
                    bodyStyle={{
                        height: '700px', // 你可以根据需要调整高度
                        overflowY: 'auto',
                    }}
                    visible={modalVisible}
                    confirmLoading={confirmLoading}
                    afterClose={() => {
                        formRef.current?.resetFields();
                        setCurrentRow(undefined);
                    }}
                    onCancel={() => {
                        handleConfirmLoading(false)
                        handleModalVisible(false)
                        setMainImgList([])
                        setHeaderImgList([])
                        setDetailImgList([])
                        // setBRAND_NAMEList([])
                    }}
                    footer={<div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <div>
                            {
                                currentRow ?
                                    <div>
                                        <Button type={"primary"} onClick={() => {
                                            setShowMoreSpecs(true)
                                        }}>多规格管理</Button>

                                        <Popconfirm
                                            title="确认删除该商品?"
                                            onConfirm={async (e: any) => {
                                                await handelDelete(currentRow?.COMMODITY_ID);
                                            }}
                                        >
                                            <Button danger>
                                                删除
                                            </Button>
                                        </Popconfirm>

                                    </div>
                                    : ""
                            }
                        </div>
                        <div>
                            <Button onClick={() => {
                                handleConfirmLoading(false)
                                handleModalVisible(false)
                                // setBRAND_NAMEList([])
                                // 清空一下 商品关联表的数据
                                setSpecsData([])
                                // 清空一下 商品关联表的选择行
                                setSelectedRowKeys([])
                                setSelectedRows([])
                                setMainImgList([])
                                setHeaderImgList([])
                                setDetailImgList([])
                            }}>取 消</Button>
                            <Button type={"primary"} loading={confirmLoading} onClick={() => {
                                formRef?.current?.validateFields().then(() => {
                                    handleConfirmLoading(true)
                                    formRef?.current?.submit()
                                })
                            }}>确 定</Button>
                        </div>
                    </div>}
                    onOk={async () => { // 提交框内的数据
                        formRef?.current?.validateFields().then(() => {
                            handleConfirmLoading(true)
                            formRef?.current?.submit()
                        })
                    }}
                    modalRender={(modal) => {
                        return <Draggable
                            disabled={disabled}
                            bounds={bounds}
                            onStart={(event, uiData) => onDraggaleStart(event, uiData)}
                            handle='.productListing'
                        >
                            <div ref={draggleRef}>{modal}</div>
                        </Draggable>
                    }}
                >
                    <ProForm
                        layout={'horizontal'}
                        formRef={formRef}
                        autoFocusFirstInput
                        submitter={false}
                        labelCol={{ style: { width: 80 } }}
                        preserve={false}
                        request={async () => {
                            if (currentRow?.COMMODITY_ID) {
                                const data = await handeGetCOMMODITYDetail({ COMMODITYId: currentRow?.COMMODITY_ID })

                                let mainImgList: any = []
                                let headerImgList: any = []
                                let detailImgList: any = []
                                // 主图
                                if (data.IconList && data.IconList.length > 0) {
                                    data.IconList.forEach((item: any) => {
                                        let obj = JSON.parse(JSON.stringify(item))
                                        obj.url = obj.ImageUrl
                                        obj.name = obj.ImageName
                                        obj.uid = item.ImageId
                                        obj.status = 'done'
                                        mainImgList.push(obj)
                                    })
                                }
                                // 轮播框图
                                if (data.GalleryImgList && data.GalleryImgList.length > 0) {
                                    data.GalleryImgList.forEach((item: any) => {
                                        let obj = JSON.parse(JSON.stringify(item))
                                        obj.url = obj.ImageUrl
                                        obj.name = obj.ImageName
                                        obj.uid = item.ImageId
                                        obj.status = 'done'
                                        headerImgList.push(obj)
                                    })
                                }
                                // 详情图
                                if (data.DetailImgList && data.DetailImgList.length > 0) {
                                    data.DetailImgList.forEach((item: any) => {
                                        let obj = JSON.parse(JSON.stringify(item))
                                        obj.url = obj.ImageUrl
                                        obj.name = obj.ImageName
                                        obj.uid = item.ImageId
                                        obj.status = 'done'
                                        detailImgList.push(obj)
                                    })
                                }


                                setMainImgList(mainImgList)
                                setHeaderImgList(headerImgList)
                                setDetailImgList(detailImgList)

                                return {
                                    ...data,
                                    USERDEFINEDTYPE_ID: data.UserDefinedTypeIds ? data.UserDefinedTypeIds.split(',').map(Number) : [],
                                    BRAND_ID: `${data?.BRAND_NAME}-${data?.BRAND_ID}`,
                                    MERCHANTS_ID: `${data?.MERCHANTS_NAME}-${data?.MERCHANTS_ID}`,
                                    UPPER_DATE: data.UPPER_DATE && data.OFF_DATE ? [data.UPPER_DATE, data.OFF_DATE] : [],
                                    // mainImgList: mainImgList,
                                    // headerImgList: headerImgList,
                                    // detailImgList: detailImgList,
                                }
                            } else {
                                return {
                                    OPERATE_PERSON: currentUser?.Name,
                                    UPPER_STATE: currentUser?.SupplierID ? 0 : ""
                                }
                            }
                        }
                        }


                        // initialValues={currentRow ? {
                        //     ...currentRow,
                        //     BRAND_ID: `${currentRow?.BRAND_NAME}-${currentRow?.BRAND_ID}`,
                        //     MERCHANTS_ID: `${currentRow?.MERCHANTS_NAME}-${currentRow?.MERCHANTS_ID}`,
                        // } : {
                        //     OPERATE_PERSON: currentUser?.Name,
                        //     UPPER_STATE: currentUser?.SupplierID ? 0 : ""
                        // }}
                        onFinish={async (values) => {
                            let newValue: any = { ...values };
                            if (currentRow) {
                                // 编辑数据
                                newValue = { ...values, COMMODITY_ID: currentRow.COMMODITY_ID };
                            }
                            // 如果有开关，要把开关的代码写进去
                            await handleAddUpdate(newValue);

                            handleModalVisible(false);
                        }}
                    >
                        <Row gutter={8}>
                            <Divider orientation="left" style={{ margin: 0 }}>基本信息</Divider>
                            <Col span={12}>
                                <ProFormText
                                    name="COMMODITY_NAME"
                                    label="商品名称"
                                    rules={[
                                        {
                                            required: true,
                                            message: "请输入商品名称！"
                                        }
                                    ]}
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormSelect
                                    name="COMMODITY_NATURE"
                                    label="商品性质"
                                    options={COMMODITYNATUREList}
                                    rules={[
                                        {
                                            required: true,
                                            message: "请选择商品性质！"
                                        }
                                    ]}
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormSelect
                                    name="BRAND_ID"
                                    label="商品品牌"
                                    request={async () => {
                                        if (BRAND_NAMEList && BRAND_NAMEList.length > 0) {
                                            return BRAND_NAMEList
                                        } else {
                                            const req: any = {
                                                searchParameter: {
                                                    OWNERUNIT_ID: currentUser?.OwnerUnitId,
                                                    PROVINCE_CODE: currentUser?.ProvinceCode,
                                                    BRAND_STATE: 1,
                                                    BRAND_CATEGORY: 2000
                                                },
                                                PageIndex: 1,
                                                PageSize: 999999,
                                                SortStr: "BRAND_INDEX,OPERATE_DATE"
                                            }
                                            const data = await handleGetBRANDList(req)
                                            if (data.List && data.List.length > 0) {
                                                let list: any = []
                                                data.List.forEach((item: any) => {
                                                    list.push({ label: item.BRAND_NAME, value: `${item.BRAND_NAME}-${item.BRAND_ID}` })
                                                })

                                                setBRAND_NAMEList(list)
                                                return list
                                            }
                                            return []
                                        }
                                    }}
                                    fieldProps={{
                                        // fieldNames: {
                                        //     label: 'BRAND_NAME',
                                        //     value: 'BRAND_ID'
                                        // },
                                        showSearch: true,
                                        filterOption: (input, node) =>
                                            (node.label || '').toLowerCase().includes(input.toLowerCase())
                                    }}
                                    rules={[
                                        {
                                            required: true,
                                            message: "请选择商品品牌！"
                                        }
                                    ]}
                                />
                            </Col>
                            <Col span={12}>
                                <ProFormTreeSelect
                                    name="USERDEFINEDTYPE_ID"
                                    label="商品分类"
                                    request={async () => {
                                        console.log('leftTreeDataleftTreeDataleftTreeData', leftTreeData);

                                        return leftTreeData
                                    }}
                                    fieldProps={{
                                        fieldNames: {
                                            label: "USERDEFINEDTYPE_NAME",
                                            value: "USERDEFINEDTYPE_ID"
                                        },
                                        showSearch: true,
                                        multiple: true, // 支持多选
                                        allowClear: true, // 允许清除和删除
                                        filterTreeNode: (input, node) =>
                                            (node.USERDEFINEDTYPE_NAME || '').toLowerCase().includes(input.toLowerCase())
                                    }}
                                />
                            </Col>
                            <Col span={12}>
                                <ProFormTreeSelect
                                    name="MERCHANTS_ID"
                                    label="供货商户"
                                    request={async () => {
                                        if (COMMODITYSUPPLIERLIST && COMMODITYSUPPLIERLIST.length > 0) {
                                            return COMMODITYSUPPLIERLIST
                                        } else {
                                            const req = {
                                                searchParameter: {
                                                    OWNERUNIT_ID: currentUser?.OwnerUnitId,
                                                    PROVINCE_CODE: currentUser?.ProvinceCode,
                                                    MERCHANTS_TYPE: ""
                                                },
                                                PageIndex: 1,
                                                PageSize: 999999,
                                            }
                                            const data = await handeGetMERCHANTSList(req);
                                            console.log('datadatadatadatadata', data);
                                            if (data.List && data.List.length > 0) {
                                                let list: any = []
                                                data.List.forEach((item: any) => {
                                                    list.push({ label: item.MERCHANTS_NAME, value: `${item.MERCHANTS_NAME}-${item.MERCHANTS_ID}` })
                                                })
                                                setCOMMODITYSUPPLIERLIST(list)
                                                return list
                                            }
                                            setCOMMODITYSUPPLIERLIST([])
                                            return []
                                        }
                                    }}
                                    fieldProps={{
                                        // fieldNames: {
                                        //     label: 'MERCHANTS_NAME',
                                        //     value: 'MERCHANTS_ID'
                                        // },
                                        showSearch: true,
                                        filterTreeNode: (input, node) =>
                                            (node.MERCHANTS_NAME || '').toLowerCase().includes(input.toLowerCase())
                                    }}
                                    rules={[
                                        {
                                            required: true,
                                            message: "请选择供货商户"
                                        }
                                    ]}

                                />
                            </Col>
                            <Divider orientation="left">商品信息</Divider>
                            <Col span={6}>
                                <ProFormText
                                    name="COMMODITY_BARCODE"
                                    label="商品条码"
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormText
                                    name="COMMODITY_ORI"
                                    label="商品产地"
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormText
                                    name="COMMODITY_UNIT"
                                    label="商品单位"
                                    rules={[
                                        {
                                            required: true,
                                            message: "请输入商品单位！"
                                        }
                                    ]}
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormText
                                    name="COMMODITY_RULE"
                                    label="商品规格"
                                    rules={[
                                        {
                                            required: true,
                                            message: "请输入商品规格！"
                                        }
                                    ]}
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormDigit
                                    name="COMMODITY_STOCK"
                                    label="商品库存"
                                    rules={[
                                        {
                                            required: true,
                                            message: "请输入商品库存！"
                                        }
                                    ]}
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormDigit
                                    name="COMMODITY_EN"
                                    label="已售数量"
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormSelect
                                    name="COMMODITY_GRADE"
                                    label="质量等级"
                                    options={COMMODITYGRADEList}
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormDigit
                                    name="COMMODITY_INDEX"
                                    label="排序索引"
                                />
                            </Col>
                            <Col span={24}>
                                <ProFormTextArea
                                    name="COMMODITY_DESC"
                                    label="商品简称"
                                />
                            </Col>
                            <Divider orientation="left">商品价值</Divider>
                            <Col span={6}>
                                <ProFormSelect
                                    name="PAY_METHOD"
                                    label="消费模式"
                                    options={PAYMETHODList}
                                    rules={[
                                        {
                                            required: true,
                                            message: "请选择消费模式！"
                                        }
                                    ]}
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormSelect
                                    name="DUTY_PARAGRAPH"
                                    label="商品税率"
                                    options={DUTYPARAGRAPHList}
                                    rules={[
                                        {
                                            required: true,
                                            message: "请选择商品税率！"
                                        }
                                    ]}
                                />
                            </Col>
                            <Col span={12}></Col>
                            <Col span={6}>
                                <ProFormDigit
                                    name="COMMODITY_RETAILPRICE"
                                    label="市场价"
                                    rules={[
                                        {
                                            required: true,
                                            message: "请输入市场价！"
                                        }
                                    ]}
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormDigit
                                    name="COMMODITY_MEMBERPRICE"
                                    label="零售价格"
                                    rules={[
                                        {
                                            required: true,
                                            message: "请输入零售价格！"
                                        }
                                    ]}
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormDigit
                                    name="COMMODITY_PURCHASEPRICE"
                                    label="商品成本"
                                    rules={[
                                        {
                                            required: true,
                                            message: "请输入商品成本！"
                                        }
                                    ]}
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormDigit
                                    name="COMMODITY_POINT"
                                    label="兑换积分"
                                />
                            </Col>
                            <Divider orientation="left">配送信息</Divider>
                            <Col span={6}>
                                <ProFormSelect
                                    name="SEND_MODE"
                                    label="发货模式"
                                    options={[{ label: "自提", value: 1000 }, { label: "邮寄", value: 2000 }, { label: "免发货", value: 3000 }]}
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormText
                                    name="DELIVER_AREA"
                                    label="配送区域"
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormDigit
                                    name="REMINDER_DAY"
                                    label="发货天数"
                                />
                            </Col>
                            <Col span={12}>
                                <ProFormSelect
                                    name="AFTERSALE_NATRUE"
                                    label="售后模式"
                                    options={[{ label: "退货", value: 1000 }, { label: "换货", value: 2000 }, { label: "退换货", value: 3000 }]}
                                />
                            </Col>
                            <Divider orientation="left">上架信息</Divider>
                            <Col span={12}>
                                <ProFormDateRangePicker
                                    width={'lg'}
                                    name="UPPER_DATE"
                                    label="上架时间"
                                    rules={[{
                                        required: true,
                                        message: "请选择上架时间！"
                                    }]}
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormDigit
                                    name="LIMIT_TOTALCOUNT"
                                    label="限购总数"
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormDigit
                                    name="LIMIT_DAILYCOUNT"
                                    label="每日限购"
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormSelect
                                    name="WECHATAPPSIGN_ID"
                                    label="小程序"
                                    options={[
                                        { label: "彩云驿", value: 37 },
                                        { label: "彩云驿商城", value: 38 },
                                    ]}
                                    rules={[
                                        {
                                            required: true,
                                            message: "请输入小程序！"
                                        }
                                    ]}
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormSelect
                                    name="UPPER_STATE"
                                    label="上架状态"
                                    rules={[
                                        {
                                            required: true,
                                            message: "请输入上架状态！"
                                        }
                                    ]}
                                    options={[
                                        { label: "未上架", value: 0 },
                                        { label: "已上架", value: 1 },
                                    ]}
                                    disabled={currentUser?.SupplierID ? true : false}
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormSelect
                                    name="DATAFORMAT"
                                    label="数据形式"
                                    options={[
                                        { label: "正式数据", value: 1 },
                                        { label: "测试数据", value: 0 },
                                        { label: "品诺数据", value: 2 },
                                    ]}
                                    rules={[
                                        {
                                            required: true,
                                            message: "请选择数据形式！"
                                        }
                                    ]}
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormText
                                    name="OPERATE_PERSON"
                                    label="操作人员"
                                    disabled
                                />
                            </Col>
                            <Divider orientation="left">主图</Divider>
                            <Col span={24}>
                                <ProFormUploadButton
                                    name="mainImgList"
                                    label="主图图片"
                                    listType="picture-card"
                                    accept="image/*"
                                    fieldProps={{
                                        beforeUpload,
                                        onPreview: () => {
                                            handlePreview(1)
                                        },
                                        fileList: mainImgList, // 绑定 fileList
                                        customRequest: ({ file, onSuccess }) => {
                                            // 自定义上传，不实际发送请求
                                            setTimeout(() => {
                                                if (onSuccess) {
                                                    onSuccess({});
                                                }
                                            }, 0);
                                        },
                                        onChange: async (info: any) => {
                                            if (info.file.status === 'removed') {
                                                const index = mainImgList.findIndex(n => n.uid === info.file.uid);
                                                confirm({
                                                    title: '确认删除该文件吗？',
                                                    icon: <ExclamationCircleOutlined />,
                                                    async onOk() {
                                                        if (info.file.ImageId) {
                                                            const deleteLoading = message.loading('正在删除...')
                                                            // const success = await deletePicture(info.file?.ImagePath, info.file?.uid, '', '6000')
                                                            const success = await deleteAHYDPicture(info.file?.ImagePath, info.file?.uid, '', '6000')
                                                            deleteLoading()

                                                            if (success) {
                                                                const files = [...mainImgList]
                                                                files.splice(index, 1)
                                                                setMainImgList(files)
                                                                message.success("删除成功")
                                                                actionRef.current?.reload()
                                                            }
                                                            else {
                                                                message.error("删除失败")
                                                            }
                                                        } else {
                                                            const files = [...mainImgList];
                                                            files.splice(index, 1);
                                                            setMainImgList(files);
                                                        }
                                                    },
                                                    onCancel() {
                                                    },
                                                });
                                            } else {
                                                setMainImgList(info.fileList)
                                            }
                                        }
                                    }}
                                />
                            </Col>
                            <Divider orientation="left">头部轮播图</Divider>
                            <Col span={24}>
                                <ProFormUploadButton
                                    name="headerImgList"
                                    label="轮播框图"
                                    listType="picture-card"
                                    accept="image/*"
                                    fieldProps={{
                                        beforeUpload,
                                        onPreview: () => {
                                            handlePreview(2)
                                        },
                                        fileList: headerImgList, // 绑定 fileList
                                        customRequest: ({ file, onSuccess }) => {
                                            // 自定义上传，不实际发送请求
                                            setTimeout(() => {
                                                if (onSuccess) {
                                                    onSuccess({});
                                                }
                                            }, 0);
                                        },
                                        onChange: async (info: any) => {
                                            if (info.file.status === 'removed') {
                                                const index = headerImgList.findIndex(n => n.uid === info.file.uid);
                                                confirm({
                                                    title: '确认删除该文件吗？',
                                                    icon: <ExclamationCircleOutlined />,
                                                    async onOk() {
                                                        if (info.file.ImageId) {
                                                            const deleteLoading = message.loading('正在删除...')
                                                            const success = await deleteAHYDPicture(info.file?.ImagePath, info.file?.uid, '', '6000')
                                                            // const success = await deletePicture(info.file?.ImagePath, info.file?.uid, '', '6000')
                                                            deleteLoading()

                                                            if (success) {
                                                                const files = [...headerImgList]
                                                                files.splice(index, 1)
                                                                setHeaderImgList(files)
                                                                message.success("删除成功")
                                                                actionRef.current?.reload()
                                                            }
                                                            else {
                                                                message.error("删除失败")
                                                            }
                                                        } else {
                                                            const files = [...headerImgList];
                                                            files.splice(index, 1);
                                                            setHeaderImgList(files);
                                                        }
                                                    },
                                                    onCancel() {
                                                    },
                                                });
                                            } else {
                                                setHeaderImgList(info.fileList)
                                            }
                                        }
                                    }}
                                />
                            </Col>
                            <Divider orientation="left">详情图</Divider>
                            <Col span={24}>
                                <ProFormUploadButton
                                    name="detailImgList"
                                    label="详情图"
                                    listType="picture-card"
                                    accept="image/*"
                                    fieldProps={{
                                        beforeUpload,
                                        onPreview: () => {
                                            handlePreview(3)
                                        },
                                        fileList: detailImgList, // 绑定 fileList
                                        customRequest: ({ file, onSuccess }) => {
                                            // 自定义上传，不实际发送请求
                                            setTimeout(() => {
                                                if (onSuccess) {
                                                    onSuccess({});
                                                }
                                            }, 0);
                                        },
                                        onChange: async (info: any) => {
                                            if (info.file.status === 'removed') {
                                                const index = detailImgList.findIndex(n => n.uid === info.file.uid);
                                                confirm({
                                                    title: '确认删除该文件吗？',
                                                    icon: <ExclamationCircleOutlined />,
                                                    async onOk() {
                                                        if (info.file.ImageId) {
                                                            const deleteLoading = message.loading('正在删除...')
                                                            // const success = await deletePicture(info.file?.ImagePath, info.file?.uid, '', '6000')
                                                            const success = await deleteAHYDPicture(info.file?.ImagePath, info.file?.uid, '', '6000')
                                                            deleteLoading()

                                                            if (success) {
                                                                const files = [...detailImgList]
                                                                files.splice(index, 1)
                                                                setDetailImgList(files)
                                                                message.success("删除成功")
                                                                actionRef.current?.reload()
                                                            }
                                                            else {
                                                                message.error("删除失败")
                                                            }
                                                        } else {
                                                            const files = [...detailImgList];
                                                            files.splice(index, 1);
                                                            setDetailImgList(files);
                                                        }
                                                    },
                                                    onCancel() {
                                                    },
                                                });
                                            } else {
                                                setDetailImgList(info.fileList)
                                            }
                                        }
                                    }}
                                />
                            </Col>
                        </Row>
                    </ProForm>
                </Modal>

                {/* 多规格配置的悬浮框 */}
                <Modal
                    title={"多规格管理"}
                    destroyOnClose={true}
                    width={1200}
                    visible={showMoreSpecs}
                    onCancel={() => {
                        setShowMoreSpecs(false)
                        setSpecsData([])
                    }}
                    onOk={async () => { // 提交框内的数据
                        console.log('specsDataspecsData', specsData);
                        // 判断表格数据是不是都填了
                        let isAllOk: boolean = true
                        if (specsData && specsData.length > 0) {
                            specsData.forEach((item: any) => {
                                if (!item.COMMODITY_STOCK || !item.COMMODITY_RETAILPRICE || !item.COMMODITY_MEMBERPRICE || !item.COMMODITY_PURCHASEPRICE) {
                                    isAllOk = false
                                }
                            })
                        }
                        if (!isAllOk) {
                            message.error('请先完善表格数据！')
                        }


                        if (specsData && specsData.length > 0) {
                            let list: any = []
                            specsData.forEach((item: any) => {
                                list.push({
                                    RTCOMMODITY_MULTI_ID: item.RTCOMMODITY_MULTI_ID ? item.RTCOMMODITY_MULTI_ID : "",
                                    COMMODITY_ID: currentRow?.COMMODITY_ID,
                                    COMMODITY_MULTI_ID: item.COMMODITY_MULTI_ID,
                                    COMMODITY_STOCK: item.COMMODITY_STOCK,
                                    COMMODITY_RETAILPRICE: item.COMMODITY_RETAILPRICE,
                                    COMMODITY_PURCHASEPRICE: item.COMMODITY_PURCHASEPRICE,
                                    COMMODITY_MEMBERPRICE: item.COMMODITY_MEMBERPRICE,
                                    STAFF_ID: currentUser?.ID,
                                    STAFF_NAME: currentUser?.Name,
                                    OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss')
                                })
                            })
                            // return
                            const req: any = {
                                list: list
                            }
                            console.log('reqreqreq', req);

                            const data = await handeSynchroRTCOMMODITYMULTIList(req)
                            console.log('datadatadatadata', data);
                            if (data.Result_Code === 100) {
                                message.success("同步成功！")
                                setShowMoreSpecs(false)
                                setSpecsData([])
                            } else {
                                message.error(data.Result_Desc)
                            }
                        } else {
                            setShowMoreSpecs(false)
                            setSpecsData([])
                        }


                    }}
                >
                    <ProTable
                        actionRef={ruleActionRef}
                        search={false}
                        pagination={false}
                        options={false}
                        columns={specsColumns}
                        scroll={{ x: "100%" }}
                        bordered
                        toolbar={{
                            actions: [
                                <Button type={"primary"} onClick={() => {
                                    setShowAddSpecsModal(true)
                                }}>新增规格</Button>
                            ]
                        }}
                        dataSource={specsData}
                        request={async () => {
                            console.log('currentRowcurrentRowcurrentRow', currentRow);

                            const req: any = {
                                searchParameter: {
                                    COMMODITY_IDS: currentRow?.COMMODITY_ID,
                                    // OWNERUNIT_ID: currentUser?.OwnerUnitId,
                                    // PROVINCE_CODE: "",
                                },
                                PageIndex: 1,
                                PageSize: 999999,
                                SortStr: "COMMODITY_MULTI_ID"
                            }
                            const data = await handeGetRTCOMMODITY_MULTIList(req)
                            console.log('多规格管理', data);
                            if (data.List && data.List.length > 0) {
                                setSpecsData(data.List)
                                // return { data: data.List, success: true, total: data.TotalCount }
                            } else {
                                setSpecsData([])
                            }
                            // return { data: [], success: true }

                            // return selectedRows
                        }}
                    />

                </Modal>

                {/* 添加多规格的悬浮框 */}
                <Modal
                    title={"新增规格管理"}
                    destroyOnClose={true}
                    width={1200}
                    visible={showAddSpecsModal}
                    onCancel={() => {
                        setShowAddSpecsModal(false)
                    }}
                    onOk={async () => { // 提交框内的数据
                        setShowAddSpecsModal(false)
                        console.log('specsDataspecsDataspecsData', specsData);
                        console.log('selectedRowsselectedRowsselectedRows', selectedRows);
                        let list: any = JSON.parse(JSON.stringify(specsData))
                        // list = list.concat(selectedRows)
                        if (selectedRows && selectedRows.length > 0) {
                            selectedRows.forEach((item: any) => {
                                let filterList: any = list.filter((filterItem: any) => filterItem.COMMODITY_MULTI_ID === item.COMMODITY_MULTI_ID)
                                if (filterList && filterList.length > 0) {
                                } else {
                                    list.push(item)
                                }
                                // let obj: any = JSON.parse(JSON.stringify(item))
                            })
                        }
                        setSpecsData(list)
                    }}
                >
                    <ProTable
                        // search={false}
                        pagination={false}
                        options={false}
                        columns={addSpecsCoumns}
                        scroll={{ x: "100%", y: '400px' }}
                        rowKey={"COMMODITY_MULTI_ID"}
                        rowSelection={{
                            type: 'checkbox', // 多选，单选用 'radio'
                            onChange: (selectedRowKeys, selectedRows) => {
                                setSelectedRowKeys(selectedRowKeys)
                                setSelectedRows(selectedRows)
                            },
                        }}
                        request={async (params: any) => {
                            const req = {
                                searchParameter: {
                                    OwnerUnitId: currentUser?.OwnerUnitId,
                                    ExcludeCommodityId: currentRow?.COMMODITY_ID,
                                    // PROVINCE_CODE: currentUser?.ProvinceCode,
                                    // GOODSTYPE: 6000,
                                    COMMODITY_STATE: 1
                                },
                                PageIndex: 1,
                                PageSize: 999999,
                                SortStr: "USERDEFINEDTYPE_ID,COMMODITY_MULTI_ID",
                                keyWord: {
                                    Key: "COMMODITY_NAME",
                                    Value: params?.searchText || ""
                                },
                            }
                            const data = await handeGetCOMMODITY_MULTIList(req);
                            console.log('datadatadatadata', data);
                            let list = data.List
                            if (list && list.length > 0) {
                                return { data: list, success: true }
                            }
                            return { data: [], success: true }
                        }}
                    />

                </Modal>

            </div>
        </div>
    );
};
export default connect(({ user }: ConnectState) => ({
    currentUser: user.currentUser
}))(COMMODITYTable);