// 会员汇总统计   //会员积分报表
import { ConnectState } from "@/models/connect";
import { connect, CurrentUser } from "umi";
import './MemberSummaryStatistics.less'
import ProTable, { ActionType } from "@ant-design/pro-table";
import { useEffect, useRef, useState } from "react";
import { Button, Col, FormInstance, Row, 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 staticSumTotalBg from '@/assets/detail/staticSumTotalBg.png'
import session from "@/utils/session";
import ProForm, { ProFormDateRangePicker, ProFormTreeSelect } from "@ant-design/pro-form";
import { handleSetlogSave } from "@/utils/format";
import OrderDetailModal from "../BookingMealOrder/components/orderDetailModal";
import MemberDetail from "../memberInfor/component/memberDetail";
import PointsRecordSearch from "../PointsRecordSearch";
import GrowthValueRecordSearch from "../GrowthValueRecordSearch";



const MemberSummaryStatistics: 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')
    })

    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 [showOrderModal, setShowOrderModal] = useState<boolean>(false)
    const [currentRow, setCurrentRow] = useState<any>()
    // 显示详情抽屉
    const [showDetailDrawer, setShowDetailDrawer] = useState<boolean>(false)
    // 传入给子组件的搜索内容
    const [toChildrenSearchParams, setToChildrenSearchParams] = useState<any>({
        SearchParameter: {
            // PROVINCE_CODE: currentUser?.ProvinceCode || "",
            OPERATE_DATE_Start: searchParams?.StartDate || "",
            OPERATE_DATE_End: searchParams?.EndDate || "",
            OWNERUNIT_ID: 911,
            POINT_TYPE: '',
            POINT_SOURCE: '',
            MEMBERSHIP_TARGET: searchParams?.MEMBERSHIP_TARGET && searchParams?.MEMBERSHIP_TARGET.length > 0 ? searchParams?.MEMBERSHIP_TARGET.toString() : ""
        },
        keyWord: {
            Key: "MEMBERSHIP_NAME",
            Value: searchParams?.searchText || ""
        },
        PageIndex: searchParams?.current,
        PageSize: 20,
        sortstr: "OPERATE_DATE desc",
    })

    // 积分的columns
    const columns: any = [
        {
            title: '查询内容',
            dataIndex: 'searchText',
            hideInTable: true,
            fieldProps: {
                placeholder: '请输入门店名称/用户昵称'
            }
        },
        {
            title: '查询时间',
            dataIndex: 'search_date',
            valueType: 'dateRange',
            hideInTable: true,
            hideInDescriptions: true,
            search: {
                transform: (value) => {
                    return {
                        OPERATE_DATE_Start: value[0],
                        OPERATE_DATE_End: value[1],
                    };
                },
            },
            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')],
                }
            },
            initialValue: [moment().startOf('M'), moment()],
        },
        {
            title: "会员昵称",
            width: 150,
            dataIndex: "MEMBERSHIP_NAME",
            hideInSearch: true,
            align: 'center',
            ellipsis: true,
            render: (_, record) => {
                return record?.MEMBERSHIP_NAME ? <a onClick={() => {
                    setCurrentRow(record)
                    setShowDetailDrawer(true)
                    handleSetlogSave(`查看${record?.MEMBERSHIP_NAME}【${record?.MEMBERSHIP_ID}】会员信息`)
                }}>
                    {record?.MEMBERSHIP_NAME}
                </a> : "-"
            }
        },
        {
            title: "会员等级",
            width: 150,
            dataIndex: "MEMBERSHIP_LEVEL",
            hideInSearch: true,
            align: 'center',
            ellipsis: true,
            valueType: 'select',
            valueEnum: MEMBERSHIPLEVELYNObj
        },
        {
            title: "会员类型",
            width: 120,
            dataIndex: "MEMBERSHIP_TYPE",
            ellipsis: true,
            hideInSearch: true,
            align: 'center',
            valueType: 'select',
            valueEnum: {
                ...MEMBERSHIPTYPEYNObj,
            },
        },
        {
            title: "积分方式",
            width: 120,
            dataIndex: "POINT_TYPE",
            ellipsis: true,
            valueType: 'select',
            align: 'center',
            valueEnum: {
                "0": "全部",
                "1": "累计",
                "-1": "消耗"
            },
            initialValue: "0"
        },
        {
            title: "积分来源",
            width: 120,
            dataIndex: "POINT_SOURCE",
            ellipsis: true,
            valueType: 'treeSelect',
            align: 'center',
            request: () => {
                return SCORETYPETree
            },
            fieldProps: {
                allowClear: true
            }
            // valueEnum: {
            //     "0": "全部",
            //     "1000": "消费赠送",
            //     "2000": "消费抵扣",
            //     "3000": "注册赠送"
            // },
            // initialValue: "0"
        },
        {
            title: "订单编号",
            width: 250,
            dataIndex: "TICKET_CODE",
            hideInSearch: true,
            align: 'center',
            ellipsis: true,
            valueType: 'digit',
            render: (_, record) => {
                return record?.TICKET_CODE ? <a onClick={() => {
                    setCurrentRow(record)
                    setShowOrderModal(true)
                }}>{record?.TICKET_CODE}</a> : "-"
            }
        },
        {
            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: 120,
            dataIndex: "PAY_AMOUNT",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
            valueType: "digit"
        },
        {
            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: 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(() => {
        let [StartDate, EndDate] = [moment().startOf('M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
        handleGetTopData(StartDate, EndDate)
    }, [])
    // 获取顶部的数据
    const handleGetTopData = async (StartDate?: string, EndDate?: string, MEMBERSHIP_TARGET?: string) => {
        const req: any = {
            CalcType: 1, // 1 汇总  2 会员等级  3 会员类型
            OwnerUnitId: currentUser?.OwnerUnitId,
            StartDate: StartDate ? StartDate : "",
            EndDate: EndDate ? EndDate : "",
            PointSource: "",
            ServerpartId: "",
            MemberShipId: "",
            MembershipType: "",
            MembershipLevel: "",
            MembershipTarget: MEMBERSHIP_TARGET && MEMBERSHIP_TARGET.length > 0 ? MEMBERSHIP_TARGET.toString() : ""
        }
        const data = await handeGetPointGrowthSummary(req)
        console.log('datadatadatadatadata', data);
        let sumObj: any = data[0]
        setTopData(sumObj)
    }

    // 改变顶部的选择
    const handleChangeTab = (value: number) => {
        setSelectTab(value)
        let req: any = {}
        if (value <= 3) {
            req = {
                SearchParameter: {
                    // PROVINCE_CODE: currentUser?.ProvinceCode || "",
                    OPERATE_DATE_Start: searchParams?.StartDate || "",
                    OPERATE_DATE_End: searchParams?.EndDate || "",
                    OWNERUNIT_ID: 911,
                    POINT_TYPE: value === 1 ? '' : value === 2 ? '1' : value === 3 ? '-1' : '',
                    POINT_SOURCE: '',
                    MEMBERSHIP_TARGET: searchParams?.MEMBERSHIP_TARGET && searchParams?.MEMBERSHIP_TARGET.length > 0 ? searchParams?.MEMBERSHIP_TARGET.toString() : ""
                },
                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: value === 4 ? '' : value === 5 ? '1' : value === 6 ? '-1' : '',
                    MEMBERSHIP_TARGET: searchParams?.MEMBERSHIP_TARGET && searchParams?.MEMBERSHIP_TARGET.length > 0 ? searchParams?.MEMBERSHIP_TARGET.toString() : ""
                },
                PageIndex: searchParams?.current,
                PageSize: 20,
                sortstr: "OPERATE_DATE desc",
                keyWord: {
                    Key: "MEMBERSHIP_NAME",
                    Value: searchParams?.searchText || ""
                },
            }
        }

        setToChildrenSearchParams(req)
        actionRef.current?.reload()
        if (value <= 3) {
            PointsRecordSearchRef.current?.actionRef?.current?.reload()
        } else {
            GrowthValueRecordSearchRef.current?.actionRef?.current?.reload()
        }
    }

    const handleCloseModal = () => {
        setShowOrderModal(false)
        setCurrentRow(null)
        setShowDetailDrawer(false)
    }

    return (
        <div className="MemberSummaryStatisticsMain">
            <div className="MemberSummaryStatisticsTop">
                <div className="MemberSummaryStatisticsTitleBox">
                    <div className="MemberSummaryStatisticsTitle">会员数据汇总</div>
                </div>

                <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
                                })
                                let req: any = {}
                                if (selectTab <= 3) {
                                    req = {
                                        SearchParameter: {
                                            // PROVINCE_CODE: currentUser?.ProvinceCode || "",
                                            OPERATE_DATE_Start: StartDate || "",
                                            OPERATE_DATE_End: EndDate || "",
                                            OWNERUNIT_ID: 911,
                                            POINT_TYPE: selectTab === 1 ? '' : selectTab === 2 ? '1' : selectTab === 3 ? '-1' : '',
                                            POINT_SOURCE: '',
                                            MEMBERSHIP_TARGET: values?.MEMBERSHIP_TARGET && values?.MEMBERSHIP_TARGET.length > 0 ? values?.MEMBERSHIP_TARGET.toString() : ""
                                        },
                                        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: StartDate || "",
                                            OPERATE_DATE_End: EndDate || "",
                                            OWNERUNIT_ID: 911,
                                            SCORESETTING_STATE: 1,
                                            GROWTH_SOURCES: "",
                                            GROWTH_TYPE: selectTab === 4 ? '' : selectTab === 5 ? '1' : selectTab === 6 ? '-1' : '',
                                            MEMBERSHIP_TARGET: searchParams?.MEMBERSHIP_TARGET && searchParams?.MEMBERSHIP_TARGET.length > 0 ? searchParams?.MEMBERSHIP_TARGET.toString() : ""
                                        },
                                        PageIndex: searchParams?.current,
                                        PageSize: 20,
                                        sortstr: "OPERATE_DATE desc",
                                        keyWord: {
                                            Key: "MEMBERSHIP_NAME",
                                            Value: searchParams?.searchText || ""
                                        },
                                    }
                                }

                                setToChildrenSearchParams(req)
                                actionRef.current?.reload()
                                PointsRecordSearchRef.current?.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={{
                                            multiple: true,
                                            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 className="MemberSummaryStatisticsContentBox">

                    <div className="MemberSummaryStatisticsItemOther">

                        <div className={selectTab === 1 ? 'MemberSummaryStatisticsOtherItem MemberSummaryStatisticsOtherItemSelect' : 'MemberSummaryStatisticsOtherItem'}
                            onClick={() => {
                                handleChangeTab(1)
                            }}>
                            <div className="otherItemTitle">总积分</div>
                            <div className="otherItemValue">{topData && topData?.TotalPoint ? topData?.TotalPoint.summaryData : "-"}</div>
                            <div className="otherItemAddBox">
                                <span className="addLabel">环比增长</span>
                                {
                                    topData && topData?.TotalPoint && topData?.TotalPoint.QOQData && topData?.TotalPoint.summaryData ?
                                        <img className="addIcon" src={((topData?.TotalPoint.summaryData - topData?.TotalPoint.QOQData) / topData?.TotalPoint.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                }
                                {
                                    topData && topData?.TotalPoint && topData?.TotalPoint.QOQData && topData?.TotalPoint.summaryData ?
                                        // <span className="addValue">{topData && topData?.TotalPoint ? topData?.TotalPoint.QOQData : "-"}</span>
                                        <Tooltip title={`((${topData?.TotalPoint.summaryData} - ${topData?.TotalPoint.QOQData}) / ${topData?.TotalPoint.QOQData}) * 100`}>
                                            <span className="addValue">{((topData?.TotalPoint.summaryData - topData?.TotalPoint.QOQData) / topData?.TotalPoint.QOQData) > 10 ? '1000%' : (((topData?.TotalPoint.summaryData - topData?.TotalPoint.QOQData) / topData?.TotalPoint.QOQData) * 100).toFixed(2) + '%'}</span>
                                        </Tooltip>
                                        : "-"
                                }
                            </div>
                        </div>

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

                        <div className={selectTab === 3 ? 'MemberSummaryStatisticsOtherItem MemberSummaryStatisticsOtherItemSelect' : 'MemberSummaryStatisticsOtherItem'} onClick={() => {
                            handleChangeTab(3)
                        }}>
                            <div className="otherItemTitle">消耗积分</div>
                            <div className="otherItemValue">{topData && topData?.ConsumePoint ? topData?.ConsumePoint.summaryData : "-"}</div>
                            <div className="otherItemAddBox">
                                <span className="addLabel">环比增长</span>
                                {
                                    topData && topData?.ConsumePoint && topData?.ConsumePoint.QOQData && topData?.ConsumePoint.summaryData ?
                                        <img className="addIcon" src={((topData?.ConsumePoint.summaryData - topData?.ConsumePoint.QOQData) / topData?.ConsumePoint.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                }
                                {
                                    topData && topData?.ConsumePoint && topData?.ConsumePoint.QOQData && topData?.ConsumePoint.summaryData ?
                                        // <span className="addValue">{topData && topData?.ConsumePoint ? topData?.ConsumePoint.QOQData : "-"}</span> 
                                        <Tooltip title={`((${topData?.ConsumePoint.summaryData} - ${topData?.ConsumePoint.QOQData}) / ${topData?.ConsumePoint.QOQData}) * 100`}>
                                            <span className="addValue">{((topData?.ConsumePoint.summaryData - topData?.ConsumePoint.QOQData) / topData?.ConsumePoint.QOQData) > 10 ? '1000%' : (((topData?.ConsumePoint.summaryData - topData?.ConsumePoint.QOQData) / topData?.ConsumePoint.QOQData) * 100).toFixed(2) + '%'}</span>
                                        </Tooltip>
                                        : ""
                                }
                            </div>
                            {/* <div className="otherBgIcon"></div> */}
                        </div>

                        <div className={selectTab === 4 ? 'MemberSummaryStatisticsOtherItem MemberSummaryStatisticsOtherItemSelect' : 'MemberSummaryStatisticsOtherItem'} onClick={() => {
                            handleChangeTab(4)
                        }}>
                            <div className="otherItemTitle">总成长值</div>
                            <div className="otherItemValue">{topData && topData?.TotalGrowth ? topData?.TotalGrowth.summaryData : "-"}</div>
                            <div className="otherItemAddBox">
                                <span className="addLabel">环比增长</span>
                                {
                                    topData && topData?.TotalGrowth && topData?.TotalGrowth.QOQData && topData?.TotalGrowth.summaryData ?
                                        <img className="addIcon" src={((topData?.TotalGrowth.summaryData - topData?.TotalGrowth.QOQData) / topData?.TotalGrowth.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                }
                                {
                                    topData && topData?.TotalGrowth && topData?.TotalGrowth.QOQData && topData?.TotalGrowth.summaryData ?
                                        // <span className="addValue">{topData && topData?.TotalGrowth ? topData?.TotalGrowth.QOQData : "-"}</span> 
                                        <Tooltip title={`((${topData?.TotalGrowth.summaryData} - ${topData?.TotalGrowth.QOQData}) / ${topData?.TotalGrowth.QOQData}) * 100`}>
                                            <span className="addValue">{((topData?.TotalGrowth.summaryData - topData?.TotalGrowth.QOQData) / topData?.TotalGrowth.QOQData) > 10 ? '1000%' : (((topData?.TotalGrowth.summaryData - topData?.TotalGrowth.QOQData) / topData?.TotalGrowth.QOQData) * 100).toFixed(2) + '%'}</span>
                                        </Tooltip>
                                        : ""
                                }
                            </div>
                        </div>

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

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

                        <div className={selectTab === 6 ? 'MemberSummaryStatisticsOtherItem MemberSummaryStatisticsOtherItemSelect' : 'MemberSummaryStatisticsOtherItem'} onClick={() => {
                            handleChangeTab(6)
                        }}>
                            <div className="otherItemTitle">消耗成长值</div>
                            <div className="otherItemValue">{topData && topData?.ConsumeGrowth ? topData?.ConsumeGrowth.summaryData : "-"}</div>
                            <div className="otherItemAddBox">
                                <span className="addLabel">环比增长</span>
                                {
                                    topData && topData?.ConsumeGrowth && topData?.ConsumeGrowth.QOQData && topData?.ConsumeGrowth.summaryData ?
                                        <img className="addIcon" src={((topData?.ConsumeGrowth.summaryData - topData?.ConsumeGrowth.QOQData) / topData?.ConsumeGrowth.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                }
                                {
                                    topData && topData?.ConsumeGrowth && topData?.ConsumeGrowth.QOQData && topData?.ConsumeGrowth.summaryData ?
                                        // <span className="addValue">{topData && topData?.ConsumeGrowth ? topData?.ConsumeGrowth.QOQData : "-"}</span>
                                        <Tooltip title={`((${topData?.ConsumeGrowth.summaryData} - ${topData?.ConsumeGrowth.QOQData}) / ${topData?.ConsumeGrowth.QOQData}) * 100`}>
                                            <span className="addValue">{((topData?.ConsumeGrowth.summaryData - topData?.ConsumeGrowth.QOQData) / topData?.ConsumeGrowth.QOQData) > 10 ? '1000%' : (((topData?.ConsumeGrowth.summaryData - topData?.ConsumeGrowth.QOQData) / topData?.ConsumeGrowth.QOQData) * 100).toFixed(2) + '%'}</span>
                                        </Tooltip>
                                        : ""
                                }
                            </div>
                            {/* <div className="otherBgIcon"></div> */}
                        </div>
                    </div>
                </div>
            </div>


            <div className="MemberSummaryStatisticsBottom">
                {
                    selectTab <= 3 ?
                        <PointsRecordSearch onRef={PointsRecordSearchRef} isComponent={true} searchReq={toChildrenSearchParams} /> :
                        selectTab > 3 ?
                            <GrowthValueRecordSearch onRef={GrowthValueRecordSearchRef} isComponent={true} searchReq={toChildrenSearchParams} /> : ""
                }



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

                        if (selectTab <= 3) {
                            req = {
                                SearchParameter: {
                                    // PROVINCE_CODE: currentUser?.ProvinceCode || "",
                                    OPERATE_DATE_Start: params?.StartDate || "",
                                    OPERATE_DATE_End: params?.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: params?.StartDate || "",
                                    OPERATE_DATE_End: params?.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);
                        }
                     
                        setSearchParams(params)
                        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,
                    }}
                /> */}
            </div>

        </div>
    )
}

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