// 积分记录查询
import { connect } from "umi";
import type { CurrentUser } from "umi";
import type { ConnectState } from "@/models/connect";
import React, { useImperativeHandle, useRef, useState } from "react";
import ProCard from "@ant-design/pro-card";
import { MenuFoldOutlined } from "@ant-design/icons";
import type { FormInstance } from "antd";
import { Button, message, Space, Spin, Tree } from "antd";
import useRequest from "@ahooksjs/use-request";
import { getServerpartTree } from "@/services/options";
import type { ActionType } from "@ant-design/pro-table";
import ProTable from "@ant-design/pro-table";
import ReactHTMLTableToExcel from "react-html-table-to-excel";
import LeftSelectTree from "@/pages/reports/settlementAccount/component/leftSelectTree";
import { handeGetNestingAUTOTYPEList, handleGetCONSUMPTIONRECORDList, handleGetPOINTRECORDList } from "../service";
import PageTitleBox from "@/components/PageTitleBox";
import moment from 'moment'
import session from "@/utils/session";
import { handleSetlogSave } from "@/utils/format";
import OrderDetailModal from "../BookingMealOrder/components/orderDetailModal";
import MemberDetail from "../memberInfor/component/memberDetail";
import { highlightText } from "@/utils/highlightText";


const PointsRecordSearch: React.FC<{ currentUser: CurrentUser, isComponent?: Boolean, parentDetail?: any, searchReq?: any, onRef?: any, height?: any }> = (props) => {
    // searchReq 传入的自定义参数
    const { currentUser, isComponent, parentDetail, searchReq, onRef, height } = props
    const downloadBtnRef = useRef<any>()
    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    const [reqDetailList, setReqDetailList] = useState<any>(); // 合计项数据源
    const [printOut, setPrintOut] = useState<any>(); // 打印数据的内容
    const [collapsible, setCollapsible] = useState<boolean>(false)
    const [treeView, setTreeView] = useState<any>()
    const [printIndex, setPrintIndex] = useState<number>(new Date().getTime())

    let POINTTYPEObj = session.get('POINTTYPEObj')
    let SCORETYPETree = session.get('SCORETYPETree')
    let MEMBERSHIPLEVELYNObj = session.get('MEMBERSHIPLEVELYNObj')
    let MEMBERSHIPTYPEYNObj = session.get('MEMBERSHIPTYPEYNObj')

    // 树相关的属性和方法
    const [selectedId, setSelectedId] = useState<string>()
    // 导出的加载效果
    const [showLoading, setShowLoading] = useState<boolean>(false)
    // 是否显示打印的表格
    const [showExportTable, setShowExportTable] = useState<boolean>(false)
    // 查询的条件
    const [searchParams, setSearchParams] = useState<any>()

    // 显示订单详情的悬浮框
    const [showOrderModal, setShowOrderModal] = useState<boolean>(false)
    const [currentRow, setCurrentRow] = useState<any>()
    // 显示详情抽屉
    const [showDetailDrawer, setShowDetailDrawer] = useState<boolean>(false)
    // 当前查询的文字
    const [currentSearchText, setCurrentSearchText] = useState<string>('')

    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 isComponent && !searchReq ? record?.MEMBERSHIP_NAME || "" : record?.MEMBERSHIP_NAME ? <a onClick={() => {
                    setCurrentRow(record)
                    setShowDetailDrawer(true)
                    handleSetlogSave(`查看${record?.MEMBERSHIP_NAME}【${record?.MEMBERSHIP_ID}】会员信息`)
                }}>
                    {/* {record?.MEMBERSHIP_NAME} */}
                    {highlightText(record?.MEMBERSHIP_NAME, currentSearchText)}
                </a> : "-"
            }
        },
        {
            title: "会员等级",
            width: 150,
            dataIndex: "MEMBERSHIP_LEVEL",
            hideInSearch: true,
            align: 'center',
            ellipsis: true,
            valueType: 'select',
            valueEnum: MEMBERSHIPLEVELYNObj,
            sorter: true
        },
        {
            title: "会员类型",
            width: 120,
            dataIndex: "MEMBERSHIP_TYPE",
            ellipsis: true,
            hideInSearch: true,
            align: 'center',
            valueType: 'select',
            valueEnum: {
                ...MEMBERSHIPTYPEYNObj,
            },
            sorter: true
        },
        {
            title: '会员标签',
            dataIndex: "MEMBERSHIP_TARGET",
            valueType: 'treeSelect',
            align: 'center',
            width: 120,
            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',
                }
            }
        },
        {
            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: 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') : "-"
            },
            sorter: true,
            defaultSortOrder: 'descend',
        },
        {
            title: "本次积分",
            width: 120,
            dataIndex: "CURRENT_POINT",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
            valueType: "digit",
            sorter: true
        },
        {
            title: "累计积分",
            width: 120,
            dataIndex: "MEMBERSHIP_POINT",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
            valueType: "digit",
            sorter: true
        },
        {
            title: "实付金额",
            width: 120,
            dataIndex: "PAY_AMOUNT",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
            valueType: "digit",
            sorter: true
        },
        {
            title: "门店名称",
            width: 150,
            dataIndex: "SHOPNAME",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
            render: (_, record) => {
                return highlightText(record?.SHOPNAME, currentSearchText)
            }
        },
        {
            title: "服务区名称",
            width: 150,
            dataIndex: "SERVERPART_NAME",
            hideInSearch: true,
            align: 'center',
            ellipsis: true,
        },
    ]

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

    useImperativeHandle(onRef, () => ({
        actionRef
    }));


    return (
        <div ref={(el) => {
            // 打印报表
            if (!reqDetailList || reqDetailList.length === 0) return;
            setPrintOut(el);
        }} >

            <div style={{ backgroundColor: '#fff', display: 'flex' }}>
                <div style={{
                    width: '100%',
                    paddingTop: 0,
                    paddingBottom: 0,
                    paddingRight: 0
                }}>
                    <ProTable
                        actionRef={actionRef}
                        formRef={formRef}
                        columns={columns}
                        bordered
                        expandable={{
                            expandRowByClick: true
                        }}
                        headerTitle={isComponent ? '' : <PageTitleBox props={props} />}
                        search={isComponent ? false : { span: 6, defaultCollapsed: false }}
                        scroll={{ x: '100%', y: isComponent ? height ? `${height}` : '300px' : 'calc(100vh - 480px)' }}
                        options={isComponent ? false : {
                            density: true,
                            reload: true,
                            setting: true
                        }}
                        request={async (params, sorter) => {

                            const sortstr = Object.keys(sorter).map(n => {
                                const value = sorter[n]
                                return value ? `${n} ${value.replace('end', '')}` : ''
                            })

                            const req: any = isComponent ? searchReq ? {
                                ...searchReq,
                                PageIndex: params?.current,
                                PageSize: 20,
                            } : {
                                SearchParameter: {
                                    OWNERUNIT_ID: 911,
                                    MEMBERSHIP_IDS: parentDetail?.MEMBERSHIP_ID,
                                    MEMBERSHIP_TARGET: params?.MEMBERSHIP_TARGET && params?.MEMBERSHIP_TARGET.length > 0 ? params?.MEMBERSHIP_TARGET.toString() : ""
                                },
                                PageIndex: params?.current,
                                PageSize: 20,
                                // sortstr: "OPERATE_DATE desc",
                                sortStr: sortstr.toString()
                            } : {
                                SearchParameter: {
                                    // PROVINCE_CODE: currentUser?.ProvinceCode || "",
                                    OPERATE_DATE_Start: params?.OPERATE_DATE_Start || "",
                                    OPERATE_DATE_End: params?.OPERATE_DATE_End || "",
                                    OWNERUNIT_ID: 911,
                                    POINT_TYPE: params?.POINT_TYPE === '0' ? '' : params?.POINT_TYPE,
                                    POINT_SOURCE: params?.POINT_SOURCE === '0' ? '' : params?.POINT_SOURCE,
                                    MEMBERSHIP_TARGET: params?.MEMBERSHIP_TARGET && params?.MEMBERSHIP_TARGET.length > 0 ? params?.MEMBERSHIP_TARGET.toString() : ""
                                },
                                PageIndex: params?.current,
                                PageSize: 20,
                                // sortstr: "OPERATE_DATE desc",
                                sortStr: sortstr.toString(),
                                keyWord: {
                                    Key: "MEMBERSHIP_NAME,SHOPNAME",
                                    Value: params?.searchText
                                }
                            }
                            const data = await handleGetPOINTRECORDList(req)
                            setCurrentSearchText(params?.searchText || "")
                            handleSetlogSave(`点击查询按钮`)

                            if (data.List && data.List.length > 0) {
                                data.List.forEach((item: any) => {
                                    item.MEMBERSHIP_TARGET = item.MEMBERSHIP_TARGET ? [Number(item.MEMBERSHIP_TARGET)] : ""
                                })
                                return { data: data.List, success: true, total: data.TotalCount }
                            }
                            return { data: [], success: true }
                        }}
                        toolbar={{
                            actions: [

                            ]
                        }}
                    />
                </div>
            </div>

            <OrderDetailModal modalVisible={showOrderModal} handleCloseModal={handleCloseModal} currentRow={currentRow} />

            {/* 会员详情 */}
            <MemberDetail showDetailDrawer={showDetailDrawer}
                currentRow={currentRow}
                handleCloseModal={handleCloseModal}
                currentUser={currentUser} />

        </div>
    )
}

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