// 会员汇总统计 // 会员等级统计
import { ConnectState } from "@/models/connect";
import { connect, CurrentUser } from "umi";
import './MembershipLevelStatistics.less'
import ProTable, { ActionType } from "@ant-design/pro-table";
import { useEffect, useRef, useState } from "react";
import { Button, Col, Drawer, FormInstance, Row, Spin, Tabs, Tooltip } from "antd";
import { handeGetNestingAUTOTYPEList, handeGetPointGrowthSummary, handleGetMEMBERGROWTHList, handleGetPOINTRECORDList } from "../service";
import moment from 'moment'
import addIcon from '@/assets/detail/addIcon.png'
import reduceIcon from '@/assets/detail/reduceIcon.png'
import session from "@/utils/session";
import ProForm, { ProFormDateRangePicker, ProFormTreeSelect } from "@ant-design/pro-form";
import { handleSetlogSave } from "@/utils/format";
import PointsRecordSearch from "../PointsRecordSearch";
import GrowthValueRecordSearch from "../GrowthValueRecordSearch";



const MembershipLevelStatistics: React.FC<{ currentUser: CurrentUser | undefined }> = (props) => {
    const { currentUser } = props
    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    const PointsRecordSearchRef = useRef<any>();
    const GrowthValueRecordSearchRef = useRef<any>();
    // 顶部内容的对象值
    const [topData, setTopData] = useState<any>()
    // 当前顶部的选择到了第几个
    const [selectTab, setSelectTab] = useState<number>(1)
    // 搜索参数
    const [searchParams, setSearchParams] = useState<any>({
        StartDate: moment().startOf('M').format('YYYY-MM-DD'),
        EndDate: moment().format('YYYY-MM-DD')
    })
    // 选择的大的tab
    const [selectBigTab, setSelectBigTab] = useState<string>('1')
    // 大tab能切换的内容
    const [tabList, setTabList] = useState<any>([])
    // 判断是不是第一次进入页面
    const [isFirst, setIsFirst] = useState<boolean>(true)
    // 数据的加载效果
    const [topLoading, setTopLoading] = useState<boolean>(false)
    // 当前选中的是第几个数据
    const [currentIndex, setCurrentIndex] = useState<any>()
    const [currentRow, setCurrentRow] = useState<any>()
    // 抽屉显示的值
    const [currentDrawerTitle, setCurrentDrawerTitle] = useState<string>('')

    let SCORETYPETree = session.get('SCORETYPETree')
    let MEMBERSHIPLEVELYNObj = session.get('MEMBERSHIPLEVELYNObj')
    let MEMBERSHIPTYPEYNObj = session.get('MEMBERSHIPTYPEYNObj')
    // 主表隐藏的字段
    const [columnsStateMap, setColumnsStateMap] = useState<any>({
        TotalPointQOQData: { show: false },
        EarnPointQOQData: { show: false },
        ConsumePointQOQData: { show: false },
        TotalGrowthQOQData: { show: false },
        EarnGrowthQOQData: { show: false },
        ConsumeGrowthQOQData: { show: false },
    })
    // 显示详情抽屉
    const [showDetail, setShowDetail] = useState<boolean>(false)
    // 顶部的数组内容
    const [topListData, setTopListData] = useState<any>([])
    // 传入给子组件的搜索内容
    const [toChildrenSearchParams, setToChildrenSearchParams] = useState<any>()
    // 积分的columns
    const columns: any = [
        {
            title: '查询内容',
            dataIndex: 'searchText',
            hideInTable: true
        },
        // {
        //     title: '查询时间',
        //     dataIndex: 'search_date',
        //     valueType: 'dateRange',
        //     hideInTable: true,
        //     hideInDescriptions: true,
        //     search: {
        //         transform: (value: any) => {
        //             return {
        //                 StartDate: value[0],
        //                 EndDate: value[1],
        //             };
        //         },
        //     },
        //     initialValue: [moment().startOf('M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
        // },
        {
            title: "服务区名称",
            width: 150,
            dataIndex: "SERVERPART_NAME",
            hideInSearch: true,
            align: 'center',
            ellipsis: true,
        },
        {
            title: "门店名称",
            width: 150,
            dataIndex: "SHOPNAME",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
        },
        {
            title: "积分方式",
            width: 120,
            dataIndex: "POINT_TYPE",
            ellipsis: true,
            valueType: 'select',
            align: 'center',
            valueEnum: {
                "-2": "全部",
                "1": "累计",
                "-1": "消耗"
            },
            initialValue: "-2"
        },
        {
            title: "积分来源",
            width: 120,
            dataIndex: "POINT_SOURCE",
            ellipsis: true,
            valueType: 'treeSelect',
            align: 'center',
            request: () => {
                return SCORETYPETree
            }
            // valueEnum: {
            //     "0": "全部",
            //     "1000": "消费赠送",
            //     "2000": "消费抵扣",
            //     "3000": "注册赠送"
            // },
            // initialValue: "0"
        },
        {
            title: "本次积分",
            width: 120,
            dataIndex: "CURRENT_POINT",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
            valueType: "digit"
        },
        {
            title: "累计积分",
            width: 120,
            dataIndex: "MEMBERSHIP_POINT",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
            valueType: "digit"
        },
        {
            title: "获取时间",
            width: 150,
            dataIndex: "CREATE_DATE",
            hideInSearch: true,
            align: 'center',
            ellipsis: true,
            render: (_, record) => {
                return record?.CREATE_DATE ? moment(record?.CREATE_DATE).format('YYYY-MM-DD HH:mm:ss') : "-"
            }
        },
    ]
    // 成长值的columns
    const growthColumns: any = [
        {
            title: '查询内容',
            dataIndex: 'searchText',
            hideInTable: true
        },
        // {
        //     title: '查询时间',
        //     dataIndex: 'search_date',
        //     valueType: 'dateRange',
        //     hideInTable: true,
        //     hideInDescriptions: true,
        //     search: {
        //         transform: (value: any) => {
        //             return {
        //                 StartDate: value[0],
        //                 EndDate: value[1],
        //             };
        //         },
        //     },
        //     initialValue: [moment().startOf('M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
        // },
        {
            title: "服务区名称",
            width: 150,
            dataIndex: "SERVERPART_NAME",
            hideInSearch: true,
            align: 'center',
            ellipsis: true,
        },
        {
            title: "门店名称",
            width: 150,
            dataIndex: "SHOPNAME",
            hideInSearch: true,
            align: 'center',
            ellipsis: true,
        },
        {
            title: "会员昵称",
            width: 150,
            dataIndex: "MEMBERSHIP_NAME",
            hideInSearch: true,
            align: 'center',
            ellipsis: true,
        },
        {
            title: "累计成长值",
            width: 120,
            dataIndex: "MEMBERSHIP_GROWTH",
            hideInSearch: true,
            align: 'center',
            ellipsis: true,
            valueType: 'digit'
        },
        {
            title: "本次成长值",
            width: 120,
            dataIndex: "CURRENT_GROWTH",
            hideInSearch: true,
            align: 'center',
            ellipsis: true,
            valueType: 'digit'
        },
        {
            title: "成长来源",
            width: 120,
            dataIndex: "GROWTH_SOURCE",
            align: 'center',
            ellipsis: true,
            valueType: 'treeSelect',
            request: () => {
                return SCORETYPETree
            },
            fieldProps: {
                allowClear: true, // 允许清除已选中的值
                treeDefaultExpandAll: true, // 默认展开所有节点（可选）
                showSearch: true, // 允许搜索（可选）
                treeNodeFilterProp: 'title', // 按 title 搜索（可选）
            }
            // valueEnum: {
            //     "0": "全部",
            //     "1000": "消费赠送",
            //     "2000": "消费抵扣",
            //     "3000": "注册赠送",
            // },
        },
        {
            title: "成长方式",
            width: 120,
            dataIndex: "GROWTH_TYPE",
            ellipsis: true,
            align: 'center',
            valueType: 'select',
            valueEnum: {
                "-2": "全部",
                "1": "积累",
                "-1": "消耗",
            },
            initialValue: "-2"
        },
        {
            title: "操作时间",
            width: 180,
            dataIndex: "OPERATE_DATE",
            align: 'center',
            hideInSearch: true,
            render: (_, record) => {
                return record?.OPERATE_DATE ? moment(record?.OPERATE_DATE).format('YYYY-MM-DD HH:mm:ss') : "-"
            }
        },
    ]

    useEffect(() => {
        const initData = async () => {
            await handleGetTopData();
            // 使用最新的selectBigTab值触发表格加载
            // actionRef.current?.reload();
        };
        initData();
    }, [])

    // 获取顶部的数据
    const handleGetTopData = async (StartDate?: string, EndDate?: string, MEMBERSHIP_TARGET?: string) => {
        const req: any = {
            CalcType: 2, // 1 汇总  2 会员等级  3 会员类型
            OwnerUnitId: currentUser?.OwnerUnitId,
            StartDate: StartDate ? StartDate : searchParams?.StartDate ? searchParams?.StartDate : "",
            EndDate: EndDate ? EndDate : searchParams?.EndDate ? searchParams?.EndDate : "",
            PointSource: "",
            ServerpartId: "",
            MemberShipId: "",
            MembershipType: "",
            MembershipLevel: "",
            MembershipTarget: MEMBERSHIP_TARGET || ""
        }
        setTopLoading(true)
        const data = await handeGetPointGrowthSummary(req)
        setTopLoading(false)
        console.log('datadatadatadatadata', data);
        let sumObj: any = data[0]
        setTopListData(data)
        setTopData(sumObj)

        let list: any = []
        if (data && data.length > 0) {
            data.forEach((item: any) => {
                list.push({ label: item.StatisticalName && MEMBERSHIPLEVELYNObj && MEMBERSHIPLEVELYNObj[item.StatisticalName] ? MEMBERSHIPLEVELYNObj[item.StatisticalName.toString()] : "", value: item.StatisticalName, key: item.StatisticalName })
            })
        }
        console.log('listlistlistlist', list);

        // 使用函数形式的setState确保获取到最新值
        return new Promise<string>((resolve) => {
            setTabList(list);
            const newTabKey = list[0]?.key || '1';
            setSelectBigTab(newTabKey);
            resolve(newTabKey);
        });
    }

    // 改变顶部的选择
    const handleChangeTab = (value: number) => {
        // 立即更新状态
        setSelectTab(value);
        // 使用setTimeout确保状态更新后再触发表格重新加载
        setTimeout(() => {
            actionRef.current?.reload();
        }, 0);
    }

    // 判断当前是点击看哪个的详情
    const handleShowDetail = (index: number, obj: any) => {
        setCurrentIndex(index)
        setCurrentRow(obj)
        let item: any = topListData[index]
        let type: string = obj.TotalPoint ? '总积分' : obj.EarnPoint ? '赚取积分' : obj.ConsumePoint ? '消耗积分' : obj.TotalGrowth ? '总成长值' : obj.EarnGrowth ? '赚取成长值' : obj.ConsumeGrowth ? '消耗成长值' : ''
        let typeTab: number = obj.TotalPoint ? 1 : obj.EarnPoint ? 2 : obj.ConsumePoint ? 3 : obj.TotalGrowth ? 4 : obj.EarnGrowth ? 5 : obj.ConsumeGrowth ? 6 : 0
        console.log('typetypetype', type);

        setSelectTab(typeTab)
        let str: string = `${item.StatisticalName && MEMBERSHIPLEVELYNObj && MEMBERSHIPLEVELYNObj[item.StatisticalName] ? MEMBERSHIPLEVELYNObj[item.StatisticalName.toString()] : ""}${type}`
        setCurrentDrawerTitle(str)


        let req: any = {}
        // 确保使用最新的状态值
        const currentTabValue = topListData[index].StatisticalName;

        if (typeTab <= 3) {
            req = {
                SearchParameter: {
                    MEMBERSHIP_TYPE: currentTabValue || "",
                    // PROVINCE_CODE: currentUser?.ProvinceCode || "",
                    OPERATE_DATE_Start: searchParams?.StartDate || "",
                    OPERATE_DATE_End: searchParams?.EndDate || "",
                    OWNERUNIT_ID: 911,
                    POINT_TYPE: typeTab === 1 ? '' : typeTab === 2 ? '1' : typeTab === 3 ? '-1' : '',
                    POINT_SOURCE: ''
                },
                keyWord: {
                    Key: "MEMBERSHIP_NAME",
                    Value: searchParams?.searchText || ""
                },
                PageIndex: searchParams?.current,
                PageSize: 20,
                sortstr: "OPERATE_DATE desc",
            }
        } else {
            req = {
                searchParameter: {
                    // PROVINCE_CODE: currentUser?.ProvinceCode || "",
                    OPERATE_DATE_Start: searchParams?.StartDate || "",
                    OPERATE_DATE_End: searchParams?.EndDate || "",
                    OWNERUNIT_ID: 911,
                    SCORESETTING_STATE: 1,
                    GROWTH_SOURCES: "",
                    GROWTH_TYPE: typeTab === 4 ? '' : typeTab === 5 ? '1' : typeTab === 6 ? '-1' : ''
                },
                PageIndex: searchParams?.current,
                PageSize: 20,
                sortstr: "OPERATE_DATE desc",
                keyWord: {
                    Key: "MEMBERSHIP_NAME",
                    Value: searchParams?.searchText || ""
                },
            }
        }
        setToChildrenSearchParams(req)


        setShowDetail(true)
    }


    return (
        <div className="MembershipLevelStatisticsMain">

            {/* <Tabs
                activeKey={selectBigTab}
                onChange={(e: any) => {
                    // 立即更新状态，确保UI立即响应
                    setSelectBigTab(e);
                    // 使用setTimeout确保状态更新后再触发表格重新加载
                    setTimeout(() => {
                        actionRef.current?.reload();
                    }, 0);
                }}
                items={tabList}
            /> */}
            {
                topLoading ?
                    <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 style={{ width: '100%', boxSizing: 'border-box', padding: '0 16px' }}>
                <Row style={{ marginTop: "16px" }}>
                    <Col span={18}>
                        <ProForm
                            layout={'horizontal'}
                            formRef={formRef}
                            submitter={false}
                            onFinish={async (values: any) => {
                                console.log('values', values);
                                let [StartDate, EndDate] = ['', '']
                                if (values.searchTime && values.searchTime.length > 0) {
                                    [StartDate, EndDate] = values.searchTime
                                }
                                handleGetTopData(StartDate, EndDate, values.MEMBERSHIP_TARGET)
                                setSearchParams({
                                    StartDate: StartDate,
                                    EndDate: EndDate
                                })
                                actionRef.current?.reload()
                            }}
                        >
                            <Row gutter={8}>
                                <Col span={8}>
                                    <ProFormDateRangePicker
                                        label={"查询时间"}
                                        name={"searchTime"}
                                        initialValue={[moment().startOf('M'), moment()]}
                                        fieldProps={{
                                            ranges: {
                                                "本月": [moment().startOf('M'), moment()],
                                                "上月": [moment().subtract(1, 'M').startOf('M'), moment().subtract(1, 'M').endOf('M')],
                                                "近三月": [moment().subtract(3, 'M').startOf('M'), moment().endOf('M')],
                                                "近半年": [moment().subtract(6, 'M').startOf('M'), moment().endOf('M')],
                                            }
                                        }}
                                    />
                                </Col>
                                <Col span={8}>
                                    <ProFormTreeSelect
                                        label={"会员标签"}
                                        name={"MEMBERSHIP_TARGET"}
                                        request={async () => {
                                            const req = {
                                                AUTOTYPE_TYPEID: '2000',
                                                AUTOTYPE_PID: "",
                                                OWNERUNIT_ID: currentUser?.OwnerUnitId,
                                                AUTOTYPE_VALID: 1,
                                                SearchKey: ""
                                            }
                                            const data = await handeGetNestingAUTOTYPEList(req);
                                            console.log('datadatadatadatadata', data);
                                            return data
                                        }}
                                        fieldProps={{
                                            allowClear: true,
                                            showSearch: true,
                                            filterTreeNode: (input, node) => {
                                                // ✅ 输入时根据 AUTOTYPE_NAME 模糊匹配
                                                return node?.AUTOTYPE_NAME?.toLowerCase()?.includes(input.toLowerCase());
                                            },
                                            treeDefaultExpandAll: true,
                                            fieldNames: {
                                                label: 'AUTOTYPE_NAME',
                                                value: 'AUTOTYPE_ID',
                                            }
                                        }}
                                    />
                                </Col>
                            </Row>

                        </ProForm>
                    </Col>
                    <Col span={6}>
                        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                            <Button style={{ marginRight: '8px' }} onClick={() => {
                                formRef.current?.resetFields()
                            }}>重置</Button>
                            <Button type={"primary"} onClick={() => {
                                formRef.current?.submit()
                            }}>查询</Button>
                        </div>
                    </Col>
                </Row>
            </div>

            {
                topListData && topListData.length > 0 ?
                    topListData.map((item: any, index: number) => {
                        return <div className="MembershipLevelStatisticsTop">
                            <div className="MembershipLevelStatisticsTitleBox">
                                <div className="MembershipLevelStatisticsTitle">{item.StatisticalName && MEMBERSHIPLEVELYNObj && MEMBERSHIPLEVELYNObj[item.StatisticalName] ? MEMBERSHIPLEVELYNObj[item.StatisticalName.toString()] : ""}</div>
                            </div>

                            <div className="MembershipLevelStatisticsContentBox">
                                <div className="MembershipLevelStatisticsItemOther">
                                    <div className={'MembershipLevelStatisticsOtherItem MembershipLevelStatisticsOtherItemSelect'} onClick={() => {
                                        handleShowDetail(index, {
                                            TotalPoint: item?.TotalPoint
                                        })
                                    }}>
                                        <div className="otherItemTitle">总积分</div>
                                        <div className="otherItemValue">{item && item?.TotalPoint ? item?.TotalPoint.summaryData : "-"}</div>
                                        <div className="otherItemAddBox">
                                            <span className="addLabel">环比增长</span>
                                            {
                                                item && item?.TotalPoint && item?.TotalPoint.QOQData && item?.TotalPoint.summaryData ?
                                                    <img className="addIcon" src={((item?.TotalPoint.summaryData - item?.TotalPoint.QOQData) / item?.TotalPoint.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                            }
                                            {
                                                item && item?.TotalPoint && item?.TotalPoint.QOQData && item?.TotalPoint.summaryData ?
                                                    // <span className="addValue">{item && item?.TotalPoint ? item?.TotalPoint.QOQData : "-"}</span>
                                                    <Tooltip title={`((${item?.TotalPoint.summaryData} - ${item?.TotalPoint.QOQData}) / ${item?.TotalPoint.QOQData}) * 100`}>
                                                        <span className="addValue">{(((item?.TotalPoint.summaryData - item?.TotalPoint.QOQData) / item?.TotalPoint.QOQData) * 100).toFixed(2) + '%'}</span>
                                                    </Tooltip>
                                                    : "-"
                                            }
                                        </div>
                                    </div>

                                    <div className={'MembershipLevelStatisticsOtherItem'} onClick={() => {
                                        handleShowDetail(index, {
                                            EarnPoint: item?.EarnPoint
                                        })
                                    }}>
                                        <div className="otherItemTitle">赚取积分</div>
                                        <div className="otherItemValue">{item && item?.EarnPoint ? item?.EarnPoint.summaryData : "-"}</div>
                                        <div className="otherItemAddBox">
                                            <span className="addLabel">环比增长</span>
                                            {
                                                item && item?.EarnPoint && item?.EarnPoint.QOQData && item?.EarnPoint.summaryData ?
                                                    <img className="addIcon" src={((item?.EarnPoint.summaryData - item?.EarnPoint.QOQData) / item?.EarnPoint.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                            }
                                            {
                                                item && item?.EarnPoint && item?.EarnPoint.QOQData && item?.EarnPoint.summaryData ?
                                                    // <span className="addValue">{item && item?.EarnPoint ? item?.EarnPoint.QOQData : "-"}</span> 
                                                    <Tooltip title={`((${item?.EarnPoint.summaryData} - ${item?.EarnPoint.QOQData}) / ${item?.EarnPoint.QOQData}) * 100`}>
                                                        <span className="addValue">{(((item?.EarnPoint.summaryData - item?.EarnPoint.QOQData) / item?.EarnPoint.QOQData) * 100).toFixed(2) + '%'}</span>
                                                    </Tooltip>
                                                    : ""
                                            }
                                        </div>
                                        {/* <div className="otherBgIcon"></div> */}
                                    </div>

                                    <div className={'MembershipLevelStatisticsOtherItem'} onClick={() => {
                                        handleShowDetail(index, {
                                            ConsumePoint: item?.ConsumePoint
                                        })
                                    }}>
                                        <div className="otherItemTitle">消耗积分</div>
                                        <div className="otherItemValue">{item && item?.ConsumePoint ? item?.ConsumePoint.summaryData : "-"}</div>
                                        <div className="otherItemAddBox">
                                            <span className="addLabel">环比增长</span>
                                            {
                                                item && item?.ConsumePoint && item?.ConsumePoint.QOQData && item?.ConsumePoint.summaryData ?
                                                    <img className="addIcon" src={((item?.ConsumePoint.summaryData - item?.ConsumePoint.QOQData) / item?.ConsumePoint.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                            }
                                            {
                                                item && item?.ConsumePoint && item?.ConsumePoint.QOQData && item?.ConsumePoint.summaryData ?
                                                    // <span className="addValue">{item && item?.ConsumePoint ? item?.ConsumePoint.QOQData : "-"}</span> 
                                                    <Tooltip title={`((${item?.ConsumePoint.summaryData} - ${item?.ConsumePoint.QOQData}) / ${item?.ConsumePoint.QOQData}) * 100`}>
                                                        <span className="addValue">{(((item?.ConsumePoint.summaryData - item?.ConsumePoint.QOQData) / item?.ConsumePoint.QOQData) * 100).toFixed(2) + '%'}</span>
                                                    </Tooltip>
                                                    : ""
                                            }
                                        </div>
                                        {/* <div className="otherBgIcon"></div> */}
                                    </div>

                                    <div className={'MembershipLevelStatisticsOtherItem MembershipLevelStatisticsOtherItemSelect'} onClick={() => {
                                        handleShowDetail(index, {
                                            TotalGrowth: item?.TotalGrowth
                                        })
                                    }}>
                                        <div className="otherItemTitle">总成长值</div>
                                        <div className="otherItemValue">{item && item?.TotalGrowth ? item?.TotalGrowth.summaryData : "-"}</div>
                                        <div className="otherItemAddBox">
                                            <span className="addLabel">环比增长</span>
                                            {
                                                item && item?.TotalGrowth && item?.TotalGrowth.QOQData && item?.TotalGrowth.summaryData ?
                                                    <img className="addIcon" src={((item?.TotalGrowth.summaryData - item?.TotalGrowth.QOQData) / item?.TotalGrowth.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                            }
                                            {
                                                item && item?.TotalGrowth && item?.TotalGrowth.QOQData && item?.TotalGrowth.summaryData ?
                                                    // <span className="addValue">{item && item?.TotalGrowth ? item?.TotalGrowth.QOQData : "-"}</span> 
                                                    <Tooltip title={`((${item?.TotalGrowth.summaryData} - ${item?.TotalGrowth.QOQData}) / ${item?.TotalGrowth.QOQData}) * 100`}>
                                                        <span className="addValue">{(((item?.TotalGrowth.summaryData - item?.TotalGrowth.QOQData) / item?.TotalGrowth.QOQData) * 100).toFixed(2) + '%'}</span>
                                                    </Tooltip>
                                                    : ""
                                            }
                                        </div>
                                    </div>

                                    <div className={'MembershipLevelStatisticsOtherItem'} onClick={() => {
                                        handleShowDetail(index, {
                                            EarnGrowth: item?.EarnGrowth
                                        })
                                    }}>
                                        <div className="otherItemTitle">赚取成长值</div>
                                        <div className="otherItemValue">{item && item?.EarnGrowth ? item?.EarnGrowth.summaryData : "-"}</div>
                                        <div className="otherItemAddBox">
                                            <span className="addLabel">环比增长</span>
                                            {
                                                item && item?.EarnGrowth && item?.EarnGrowth.QOQData && item?.EarnGrowth.summaryData ?
                                                    <img className="addIcon" src={((item?.EarnGrowth.summaryData - item?.EarnGrowth.QOQData) / item?.EarnGrowth.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                            }
                                            {
                                                item && item?.EarnGrowth && item?.EarnGrowth.QOQData && item?.EarnGrowth.summaryData ?
                                                    // <span className="addValue">{item && item?.EarnGrowth ? item?.EarnGrowth.QOQData : "-"}</span>
                                                    <Tooltip title={`((${item?.EarnGrowth.summaryData} - ${item?.EarnGrowth.QOQData}) / ${topData?.EarnGrowth.QOQData}) * 100`}>
                                                        <span className="addValue">{(((item?.EarnGrowth.summaryData - item?.EarnGrowth.QOQData) / item?.EarnGrowth.QOQData) * 100).toFixed(2) + '%'}</span>
                                                    </Tooltip>

                                                    : ""
                                            }
                                        </div>
                                        {/* <div className="otherBgIcon"></div> */}
                                    </div>

                                    <div className={'MembershipLevelStatisticsOtherItem'} onClick={() => {
                                        handleShowDetail(index, {
                                            ConsumeGrowth: item?.ConsumeGrowth
                                        })
                                    }}>
                                        <div className="otherItemTitle">消耗成长值</div>
                                        <div className="otherItemValue">{item && item?.ConsumeGrowth ? item?.ConsumeGrowth.summaryData : "-"}</div>
                                        <div className="otherItemAddBox">
                                            <span className="addLabel">环比增长</span>
                                            {
                                                item && item?.ConsumeGrowth && item?.ConsumeGrowth.QOQData && item?.ConsumeGrowth.summaryData ?
                                                    <img className="addIcon" src={((item?.ConsumeGrowth.summaryData - item?.ConsumeGrowth.QOQData) / item?.ConsumeGrowth.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                            }
                                            {
                                                item && item?.ConsumeGrowth && item?.ConsumeGrowth.QOQData && item?.ConsumeGrowth.summaryData ?
                                                    // <span className="addValue">{item && item?.ConsumeGrowth ? item?.ConsumeGrowth.QOQData : "-"}</span>
                                                    <Tooltip title={`((${item?.ConsumeGrowth.summaryData} - ${item?.ConsumeGrowth.QOQData}) / ${item?.ConsumeGrowth.QOQData}) * 100`}>
                                                        <span className="addValue">{(((item?.ConsumeGrowth.summaryData - item?.ConsumeGrowth.QOQData) / item?.ConsumeGrowth.QOQData) * 100).toFixed(2) + '%'}</span>
                                                    </Tooltip>
                                                    : ""
                                            }
                                        </div>
                                        {/* <div className="otherBgIcon"></div> */}
                                    </div>
                                </div>
                            </div>
                        </div>
                    }) : ""
            }


            <Drawer
                width={'80%'}
                title={currentDrawerTitle || ""}
                visible={showDetail}
                destroyOnClose
                closable={false}
                onClose={() => {
                    setCurrentIndex(null)
                    setCurrentRow(null)
                    setSelectTab(0)
                    setCurrentDrawerTitle('')
                    setShowDetail(false)
                }}
            >

                {
                    selectTab <= 3 ?
                        <PointsRecordSearch onRef={PointsRecordSearchRef} isComponent={true} searchReq={toChildrenSearchParams} height={'calc(100vh - 200px)'} /> :
                        selectTab > 3 ?
                            <GrowthValueRecordSearch onRef={GrowthValueRecordSearchRef} isComponent={true} searchReq={toChildrenSearchParams} height={'calc(100vh - 200px)'} /> : ""
                }

                {/* <ProTable
                    actionRef={actionRef}
                    // formRef={formRef}
                    columns={selectTab <= 3 ? columns : growthColumns}
                    bordered
                    scroll={{ x: "100%", y: 'calc(100vh - 400px)' }}
                    request={async (params) => {
                        // 判断当前选择的  1、2、3为积分的  4、5、6 为成长值的
                        let req: any = {}
                        let data: any = {}

                        // 确保使用最新的状态值
                        const currentTabValue = topListData[currentIndex].StatisticalName;
                        const currentSelectTab = selectTab;

                        if (selectTab <= 3) {
                            req = {
                                SearchParameter: {
                                    MEMBERSHIP_TYPE: currentTabValue || "",
                                    // PROVINCE_CODE: currentUser?.ProvinceCode || "",
                                    OPERATE_DATE_Start: searchParams?.StartDate || "",
                                    OPERATE_DATE_End: searchParams?.EndDate || "",
                                    OWNERUNIT_ID: 911,
                                    POINT_TYPE: selectTab === 1 ? '' : selectTab === 2 ? '1' : selectTab === 3 ? '-1' : '',
                                    POINT_SOURCE: ''
                                },
                                keyWord: {
                                    Key: "MEMBERSHIP_NAME",
                                    Value: params?.searchText || ""
                                },
                                PageIndex: params?.current,
                                PageSize: 20,
                                sortstr: "OPERATE_DATE desc",
                            }
                            data = await handleGetPOINTRECORDList(req)
                        } else {
                            req = {
                                searchParameter: {
                                    // PROVINCE_CODE: currentUser?.ProvinceCode || "",
                                    OPERATE_DATE_Start: searchParams?.StartDate || "",
                                    OPERATE_DATE_End: searchParams?.EndDate || "",
                                    OWNERUNIT_ID: 911,
                                    SCORESETTING_STATE: 1,
                                    GROWTH_SOURCES: "",
                                    GROWTH_TYPE: selectTab === 4 ? '' : selectTab === 5 ? '1' : selectTab === 6 ? '-1' : ''
                                },
                                PageIndex: params?.current,
                                PageSize: 20,
                                sortstr: "OPERATE_DATE desc",
                                keyWord: {
                                    Key: "MEMBERSHIP_NAME",
                                    Value: params?.searchText || ""
                                },
                            }
                            data = await handleGetMEMBERGROWTHList(req);
                        }
                        handleSetlogSave(`查询${selectTab === 1 ? '总积分' : selectTab === 2 ? '赚取积分' : selectTab === 3 ? '消耗积分' : selectTab === 4 ? '总成长值' : selectTab === 5 ? '赚取成长值' : selectTab === 6 ? '消耗成长值' : ''}会员等级汇总`)

                        if (data.List && data.List.length > 0) {
                            return { data: data.List, success: true, total: data.TotalCount }
                        }
                        return { data: [], success: true }
                    }}
                    columnsState={{
                        value: columnsStateMap,
                        onChange: setColumnsStateMap,
                    }}
                /> */}
            </Drawer>

        </div>
    )
}

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