// 注册留存分析 用户行为记录分析 

import { connect, Link } from "umi";
import type { CurrentUser } from "umi";
import type { ConnectState } from "@/models/connect";
import React, { useEffect, useRef, useState } from "react";
import ProCard from "@ant-design/pro-card";
import { MenuFoldOutlined } from "@ant-design/icons";
import { FormInstance, Tooltip } 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 moment from 'moment'
import PageTitleBox from "@/components/PageTitleBox";
import { handleGetBEHAVIORRECORDList, handleGetBEHAVIORRECORDListCloud } from "@/pages/Setting/OperationLog/service";
import MemberDetail from "../memberInfor/component/memberDetail";
import { handleSetlogSave } from "@/utils/format";
import { handeGetNestingFIELDENUMListNoEncryption } from "../service";
import { highlightText } from "@/utils/highlightText";


const RegistrationRetentionAnalysis: React.FC<{ currentUser: CurrentUser, isComponent?: Boolean, parentDetail?: any }> = (props) => {
    const { dispatch, children, currentUser, isComponent, parentDetail } = props
    const downloadBtnRef = useRef<any>()
    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    const [reqDetailList, setReqDetailList] = useState<any>(); // 合计项数据源
    const [printOut, setPrintOut] = useState<any>(); // 打印数据的内容
    const [printIndex, setPrintIndex] = useState<number>(new Date().getTime())


    // 树相关的属性和方法
    const [selectedId, setSelectedId] = useState<string>()
    // 导出的加载效果
    const [showLoading, setShowLoading] = useState<boolean>(false)
    // 是否显示打印的表格
    const [showExportTable, setShowExportTable] = useState<boolean>(false)
    // 查询的条件
    const [searchParams, setSearchParams] = useState<any>()
    // 表格数据
    const [tableData, setTableData] = useState<any>()
    // 表格加载效果
    const [tableLoading, setTableLoading] = useState<boolean>(false)
    // 判断是否是第一次
    const [isFirst, setIsFirst] = useState<boolean>(true)
    // 当前查询的文字
    const [currentSearchText, setCurrentSearchText] = useState<string>('')

    const [columnsStateMap, setColumnsStateMap] = useState<any>({
        BEHAVIORRECORD_ID: { show: false },
        OPERATING_SYSTEM: { show: false },
        BROWSER_VERSION: { show: false },
    });

    // 改变panes
    const handleTabsPanes = (payload: any): void => {
        if (dispatch) {
            dispatch({
                type: 'global/changeTabsRoutes',
                payload: { data: payload, action: 'add' },
            });
        }
    };
    // 显示详情抽屉
    const [showDetailDrawer, setShowDetailDrawer] = useState<boolean>(false)
    // 当前行数据
    const [currentRow, setCurrentRow] = useState<any>()

    const columns: any = [
        {
            title: '查询内容',
            hideInTable: true,
            dataIndex: 'searchValue',
            fieldProps: {
                placeholder: '请输入操作人员/访问页面'
            }
        },
        {
            title: '查询时间',
            dataIndex: 'search_date',
            valueType: 'dateRange',
            hideInTable: true,
            hideInDescriptions: true,
            search: {
                transform: (value) => {
                    return {
                        BEHAVIORRECORD_TIME_Start: value[0],
                        BEHAVIORRECORD_TIME_End: value[1],
                    };
                },
            },
            fieldProps: {
                ranges: {
                    "当日": [moment(), moment()],
                    "本月": [moment().startOf('M'), moment()],
                }
            },
            initialValue: [moment(), moment()],
            // initialValue: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
        },
        {
            title: '日志编号',
            width: 120,
            hideInSearch: true,
            dataIndex: 'BEHAVIORRECORD_ID'
        },

        {
            title: '访问页面',
            width: 150,
            hideInSearch: true,
            ellipsis: true,
            dataIndex: 'BEHAVIORRECORD_ROUTNAME',
            render: (_, record) => {
                return highlightText(record?.BEHAVIORRECORD_ROUTNAME, currentSearchText)
            }
            // render: (_, record) => {
            // return record?.BEHAVIORRECORD_ROUTNAME ? <a onClick={() => {
            //     console.log('record', record);
            //     const req: any = {
            //         key: record.BEHAVIORRECORD_ROUT,
            //         path: record.BEHAVIORRECORD_ROUT,
            //         title: record.BEHAVIORRECORD_ROUTNAME,
            //         children: children
            //     }
            //     console.log('req', req);
            //     handleTabsPanes(req)
            // }}>
            //     {record?.BEHAVIORRECORD_ROUTNAME || ""}
            // </a> : "-"
            // return record?.BEHAVIORRECORD_ROUTNAME ? <Link to={record.BEHAVIORRECORD_ROUT}>
            //     {record?.BEHAVIORRECORD_ROUTNAME}
            // </Link> : ""
            // }
        },
        {
            title: '操作类型',
            dataIndex: 'BEHAVIORRECORD_TYPE',
            // hideInSearch: true,
            width: 100,
            valueType: 'treeSelect',
            align: 'center',
            request: async () => {
                const req = {
                    FIELDEXPLAIN_FIELD: 'BEHAVIORRECORD_TYPE',
                    FIELDEXPLAIN_ID: "",
                    FIELDENUM_PID: "",
                    FIELDENUM_STATUS: 1,
                    SearchKey: ""
                }
                const data = await handeGetNestingFIELDENUMListNoEncryption(req);
                console.log('djskadjsaivbsjavbcv', data);

                return data
            },
            // valueEnum: {
            //     "1000": '操作',
            //     "1001": '编辑',
            //     "1002": '删除',
            //     "2000": '查询'
            // },
            // initialValue: 1000,  
            fieldProps: {
                fieldNames: {
                    label: 'FIELDENUM_NAME',
                    value: 'FIELDENUM_VALUE',
                    children: 'children'
                },
                treeDefaultExpandAll: true,
            }
        },
        {
            title: '操作人员',
            hideInSearch: true,
            align: 'center',
            dataIndex: 'USER_NAME',
            ellipsis: true,
            width: 120,
            render: (_, record) => {
                return isComponent ? record?.USER_NAME : <a onClick={() => {
                    setCurrentRow(record)
                    setShowDetailDrawer(true)
                    handleSetlogSave(`查看${record?.MEMBERSHIP_NAME}【${record?.MEMBERSHIP_ID}】会员信息`)
                }}>
                    {/* {record?.USER_NAME || '-'} */}
                    {highlightText(record?.USER_NAME, currentSearchText)}
                </a>
            }
        },
        {
            title: '操作地址',
            hideInSearch: true,
            // hideInTable: isComponent,
            hideInTable: true,
            dataIndex: 'USER_LOGINIP',
            align: 'center',
            width: 150,
        },
        {
            title: '操作地点',
            hideInSearch: true,
            dataIndex: 'USER_LOGINPLACE',
            align: 'center',
            width: 160,
            ellipsis: true,
        },
        // {
        //     title: '响应时间(s)',
        //     hideInSearch: true,
        //     dataIndex: 'BEHAVIORRECORD_DURATION',
        //     width: 120,
        //     align: 'center',
        //     sorter: (a, b) => a.BEHAVIORRECORD_DURATION - b.BEHAVIORRECORD_DURATION,
        //     render: (_, record) => {
        //         return `${record?.BEHAVIORRECORD_DURATION ? record?.BEHAVIORRECORD_DURATION : ""}`
        //     }
        // },
        {
            title: <div style={{ textAlign: 'center' }}>操作内容</div>,
            hideInSearch: true,
            dataIndex: 'BEHAVIORRECORD_EXPLAIN',
            width: 250,
            align: 'left',
            ellipsis: true,
        },
        // {
        //     title: '操作状态',
        //     dataIndex: 'status',
        //     hideInSearch: true,
        //     width: 100,
        //     render: (_, record) => {
        //         return '成功'
        //     }
        // },
        {
            title: '操作日期',
            width: 160,
            valueType: 'date',
            align: 'center',
            dataIndex: 'BEHAVIORRECORD_TIME',
            hideInSearch: true,
            sorter: true,
            render: (_, record) => {
                return record?.BEHAVIORRECORD_TIME
            }
        },
        {
            title: '操作平台',
            width: 160,
            dataIndex: 'SOURCE_PLATFORM',
            valueType: 'select',
            align: 'center',
            valueEnum: {
                "出行平台": "出行平台",
                // "数智化看板": "数智化看板",
                // "驿行畅旅": "驿行畅旅",
                // "驿付商家版": "驿付商家版",
                // "微信公众号": "微信公众号",
                // "驿商云客户端": "驿商云客户端",
                "彩云驿出行": "彩云驿出行",
            },
            initialValue: '彩云驿出行'
        },
        {
            title: '操作系统',
            width: 150,
            hideInSearch: true,
            dataIndex: 'OPERATING_SYSTEM',
        },
        {
            title: '浏览器版本',
            width: 150,
            hideInSearch: true,
            dataIndex: 'BROWSER_VERSION',
        },
        // {
        //     title: '接口信息',
        //     width: 150,
        //     hideInSearch: true,
        //     dataIndex: 'REQUEST_INFO',
        //     ellipsis: true,
        // },
        // {
        //     title: '调用入参',
        //     width: 150,
        //     hideInSearch: true,
        //     dataIndex: 'BEHAVIORRECORD_DESC',
        //     ellipsis: true,
        // },
        // {
        //     title: '操作',
        //     width: 120,
        //     dataIndex: 'options'
        // }
    ]

    const exportTable = (e) => {
        e.stopPropagation();                                            // 防止Collapse组件收起
        const main = document.getElementsByClassName(`saleReportHideBox${printIndex}`)[0]
        const thead = main.querySelector('thead').cloneNode(true);  // 深克隆DOM节点
        const tbody = main.querySelector('tbody').cloneNode(true);  // 深克隆DOM节点
        const container = document.querySelector('#hiddenBox');

        const tempTable = document.createElement('table');
        tempTable.appendChild(thead);
        tempTable.appendChild(tbody);

        tempTable.setAttribute('id', 'table-to-xls-saleRankReport');                    // 给table添加id，值与按钮上的table字段对应

        container.appendChild(tempTable);                                // 把创建的节点添加到页面容器中

        setShowLoading(false)

        downloadBtnRef.current.handleDownload();
        setShowExportTable(false)
        tempTable.remove() // 防止重复打印一个内容
    }

    const handleGetTableData = async (paramsObj?: any) => {
        let result: any = {}

        const res: any = formRef ? formRef?.current?.getFieldsValue() : {}
        console.log('resresres', res);
        let [start, end] = ['', '']
        // let [start, end] = res?.search_date
        let params: any = {}
        if (res) {
            [start, end] = res?.search_date
            params = {
                BEHAVIORRECORD_TIME: res && res.BEHAVIORRECORD_TIME ? moment(res.BEHAVIORRECORD_TIME._d).format('YYYY-MM-DD') : "",
                SOURCE_PLATFORM: res && res.SOURCE_PLATFORM ? res.SOURCE_PLATFORM : "",
                BEHAVIORRECORD_TYPE: res && res.BEHAVIORRECORD_TYPE ? res.BEHAVIORRECORD_TYPE : "",
                start: start,
                end: end,
                ...res
            }
        }


        setTableLoading(true)
        console.log('isComponentisComponent', isComponent);
        console.log('paramsparamsparamsparamsparams', params);

        const req: any = isComponent ? {
            SearchParameter: {
                SOURCE_PLATFORMS: '彩云驿出行',
                USER_MOBILEPHONE: parentDetail?.MEMBERSHIP_MOBILEPHONE
            },
            SortStr: 'BEHAVIORRECORD_TIME desc',
            PageIndex: paramsObj.current || 1,
            PageSize: paramsObj?.pageSize || 999999
        } : {
            SearchParameter: {
                BEHAVIORRECORD_TIME_Start: moment(params?.start).format('YYYY-MM-DD'),
                BEHAVIORRECORD_TIME_End: moment(params?.end).format('YYYY-MM-DD'),
                SOURCE_PLATFORMS: params?.SOURCE_PLATFORM,
                // BEHAVIORRECORD_TYPE: params?.BEHAVIORRECORD_TYPE
            },
            SortStr: 'BEHAVIORRECORD_TIME desc',
            KeyWord: {
                Key: 'BEHAVIORRECORD_ROUTNAME,USER_NAME,VISIT_CHANNELS,BEHAVIORRECORD_PREROUT',
                Value: params?.searchValue || ''
            },
            PageIndex: paramsObj.current || 1,
            PageSize: paramsObj?.pageSize || 999999
        }
        console.log('reqreqreqreq', req);

        setSearchParams(params)
        const data = await handleGetBEHAVIORRECORDList(req)
        console.log('dhsjdhasjdhs', data);

        setReqDetailList(data.List)
        setTableData(data.List)
        setTableLoading(false)
        result = { data: data.List, success: true, total: data.TotalCount }

        // if (isComponent) {

        // } else {
        //     const allReq: any = {
        //         SearchParameter: {
        //             BEHAVIORRECORD_TIME_Start: moment(params?.start).format('YYYY-MM-DD'),
        //             BEHAVIORRECORD_TIME_End: moment(params?.end).format('YYYY-MM-DD'),
        //             SOURCE_PLATFORMS: params?.SOURCE_PLATFORM,
        //             // BEHAVIORRECORD_TYPE: params?.BEHAVIORRECORD_TYPE
        //         },
        //         SortStr: 'BEHAVIORRECORD_TIME desc',
        //         KeyWord: {
        //             Key: 'BEHAVIORRECORD_ROUTNAME,USER_NAME,VISIT_CHANNELS,BEHAVIORRECORD_PREROUT',
        //             Value: params?.searchValue || ''
        //         },
        //         PageIndex: 1,
        //         PageSize: 999999
        //     }
        //     const allData = await handleGetBEHAVIORRECORDList(allReq)
        //     setReqDetailList(data)
        //     setTableData(allData)
        //     setIsFirst(false)
        // }
    }

    // 悬浮框的关闭方法
    const handleCloseModal = () => {
        setShowDetailDrawer(false)
        setCurrentRow(undefined);
    }

    // useEffect(async () => {
    //     handleGetTableData()
    // }, [])

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

            {
                showLoading ?
                    <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 className={`saleReportHideBox${printIndex}`} style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }}>
                {
                    showExportTable && reqDetailList && reqDetailList.length > 0 ?
                        <ProTable
                            columns={columns}
                            dataSource={reqDetailList}
                            pagination={false}
                            expandable={{
                                defaultExpandAllRows: true
                            }}
                        /> : ''
                }
            </div>
            <div id='hiddenBox' style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }} />

            <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
                        }}
                        scroll={{ x: '100%', y: isComponent ? '300px' : 'calc(100vh - 470px)' }}
                        search={isComponent ? false : { span: 6, defaultCollapsed: false }}
                        // dataSource={tableData}
                        // loading={tableLoading}
                        options={isComponent ? false : {
                            density: true,
                            reload: true,
                            setting: true
                        }}
                        request={async (params) => {
                            console.log('paramsparamsparamsparams', params);

                            const req: any = isComponent ? {
                                SearchParameter: {
                                    SOURCE_PLATFORMS: '彩云驿出行',
                                    USER_MOBILEPHONE: parentDetail?.MEMBERSHIP_MOBILEPHONE,
                                    USER_ID: parentDetail?.MEMBERSHIP_ID
                                },
                                SortStr: 'BEHAVIORRECORD_TIME desc',
                                PageIndex: params?.current || 1,
                                PageSize: params?.pageSize || 999999
                            } : {
                                SearchParameter: {
                                    BEHAVIORRECORD_TIME_Start: moment(params?.BEHAVIORRECORD_TIME_Start).format('YYYY-MM-DD'),
                                    BEHAVIORRECORD_TIME_End: moment(params?.BEHAVIORRECORD_TIME_End).format('YYYY-MM-DD'),
                                    SOURCE_PLATFORMS: params?.SOURCE_PLATFORM,
                                    BEHAVIORRECORD_TYPE: params?.BEHAVIORRECORD_TYPE
                                },
                                SortStr: 'BEHAVIORRECORD_TIME desc',
                                KeyWord: {
                                    Key: 'BEHAVIORRECORD_ROUTNAME,USER_NAME,VISIT_CHANNELS,BEHAVIORRECORD_PREROUT',
                                    Value: params?.searchValue || ''
                                },
                                PageIndex: 1,
                                PageSize: 999999
                            }

                            setSearchParams(params)
                            let data = []
                            if (isComponent) {
                                data = await handleGetBEHAVIORRECORDList(req)
                            } else {
                                if (params?.SOURCE_PLATFORM === '出行平台') {
                                    data = await handleGetBEHAVIORRECORDList(req)
                                } else if (params?.SOURCE_PLATFORM === '彩云驿出行') {
                                    data = await handleGetBEHAVIORRECORDListCloud(req)
                                }
                            }


                            setCurrentSearchText(params?.searchValue || "")

                            setReqDetailList(data.List)
                            setTableData(data.List)
                            setTableLoading(false)


                            if (data.List && data.List.length > 0) {
                                return { data: data.List, success: true, total: data.TotalCount }
                            }
                            return { data: [], success: true }
                            // const data = await handleGetTableData(params)
                            // return data


                            // if (!isFirst) {
                            //     handleGetTableData()
                            // }

                            // console.log('data', data);
                            // if (data && data.length > 0) {
                            //     setReqDetailList(data)
                            //     return { data, success: true } 
                            // }
                            // return { data: [], success: true }
                        }}
                        toolbar={{
                            actions: isComponent ? [] : [
                                <span style={{ visibility: 'hidden' }}>
                                    <ReactHTMLTableToExcel
                                        buttonText={'导出excel'}
                                        ref={downloadBtnRef}
                                        table="table-to-xls-saleRankReport"
                                        filename={`操作日志列表`}
                                        sheet="sheet1"
                                    />
                                </span>,
                                <Button
                                    key="new"
                                    type="primary"
                                    onClick={(e) => {
                                        if (reqDetailList && reqDetailList.length > 0) {
                                            setShowLoading(true)
                                            setTimeout(() => {
                                                setShowExportTable(true)
                                                setTimeout(() => {
                                                    exportTable(e)
                                                }, 100)
                                            }, 100)
                                        } else {
                                            message.error('暂无数据可导出！')
                                        }
                                    }}
                                >
                                    导出excel
                                </Button>
                            ]
                        }}
                        columnsState={{
                            value: columnsStateMap,
                            onChange: setColumnsStateMap,
                        }}
                        onChange={(pagination, filters, sorter, extra) => {
                            if (extra.action === 'sort') {
                                return;
                            }
                        }}
                    />
                </div>
            </div>


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

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