// 会员汇总统计
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 { 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 } from "@ant-design/pro-form";



const MemberSummaryStatistics: React.FC<{ currentUser: CurrentUser | undefined }> = (props) => {
    const { currentUser } = props
    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();

    // 顶部内容的对象值
    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')
    // 主表隐藏的字段
    const [columnsStateMap, setColumnsStateMap] = useState<any>({
        TotalPointQOQData: { show: false },
        EarnPointQOQData: { show: false },
        ConsumePointQOQData: { show: false },
        TotalGrowthQOQData: { show: false },
        EarnGrowthQOQData: { show: false },
        ConsumeGrowthQOQData: { show: false },
    })

    // 积分的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,
            hideInSearch: true,
            valueType: 'select',
            align: 'center',
            valueEnum: {
                "-2": "全部",
                "1": "累计",
                "-1": "消耗"
            }
        },
        {
            title: "积分来源",
            width: 120,
            dataIndex: "POINT_SOURCE",
            ellipsis: true,
            hideInSearch: true,
            valueType: 'treeSelect',
            align: 'center',
            request: () => {
                return SCORETYPETree
            }
        },
        {
            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: "MEMBERSHIP_NAME",
            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') : "-"
            }
        },
    ]

    // 成长值的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: 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,
            hideInSearch: true,
            valueType: 'treeSelect',
            request: () => {
                return SCORETYPETree
            }
        },
        {
            title: "成长方式",
            width: 120,
            dataIndex: "GROWTH_TYPE",
            ellipsis: true,
            align: 'center',
            valueType: 'select',
            hideInSearch: true,
            valueEnum: {
                "-2": "全部",
                "1": "积累",
                "-1": "消耗",
            },
        },
        {
            title: "会员名称",
            width: 150,
            dataIndex: "MEMBERSHIP_NAME",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
        },
        {
            title: "操作时间",
            width: 120,
            dataIndex: "OPERATE_DATE",
            align: 'center',
            hideInSearch: true,
            render: (_, record) => {
                return record?.OPERATE_DATE ? moment(record?.OPERATE_DATE).format('YYYY-MM-DD') : "-"
            }
        },
    ]

    useEffect(() => {
        handleGetTopData()
    }, [])
    // 获取顶部的数据
    const handleGetTopData = async (StartDate?: string, EndDate?: string) => {
        const req: any = {
            CalcType: 1, // 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: ""
        }
        const data = await handeGetPointGrowthSummary(req)
        console.log('datadatadatadatadata', data);
        let sumObj: any = data[0]
        setTopData(sumObj)
    }

    // 改变顶部的选择
    const handleChangeTab = (value: number) => {
        setSelectTab(value)
        actionRef.current?.reload()
    }


    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)
                                setSearchParams({
                                    StartDate: StartDate,
                                    EndDate: EndDate
                                })
                                actionRef.current?.reload()
                            }}
                        >
                            <ProFormDateRangePicker
                                label={"查询时间"}
                                name={"searchTime"}
                                initialValue={[moment().startOf('M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]}
                            />
                        </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) * 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) * 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) * 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) * 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) * 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) * 100).toFixed(2) + '%'}</span>
                                        </Tooltip>
                                        : ""
                                }
                            </div>
                            {/* <div className="otherBgIcon"></div> */}
                        </div>
                    </div>
                </div>
            </div>


            <div className="MemberSummaryStatisticsBottom">
                <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);
                        }
                        // if (searchParams.StartDate !== params?.StartDate || searchParams.EndDate !== params?.EndDate) {
                        //     await handleGetTopData(params?.StartDate, params?.EndDate)
                        // }
                        setSearchParams(params)

                        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);