import { connect } from "umi";
import type { CurrentUser } from "umi";
import type { ConnectState } from "@/models/connect";
import React, { 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 { handleGetOPERATELOGList } from "./service";
import moment from 'moment'
import { exportXlsxFromProColumnsExcelJS } from "@/utils/exportExcelFun";


const saleRankReport: React.FC<{ currentUser: CurrentUser }> = (props) => {
    const { currentUser } = 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())


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

    const columns: any = [
        {
            title: '统计时间',
            dataIndex: 'search_date',
            valueType: 'dateRange',
            hideInTable: true,
            hideInDescriptions: true,
            search: {
                transform: (value) => {
                    return {
                        search_date_Start: value[0],
                        search_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: 120,
            ellipsis: true,
            dataIndex: 'searchValue',
            hideInTable: true,
        },
        // {
        //     title: '查询日期',
        //     width: 160,
        //     valueType: 'date',
        //     hideInTable: true,
        //     dataIndex: 'searchDate',
        //     initialValue: moment(),
        // },
        {
            title: '访问编码',
            width: 120,
            ellipsis: true,
            hideInSearch: true,
            dataIndex: 'OPERATELOG_ID'
        },
        {
            dataIndex: 'USER_PASSPORT',
            title: '登录账号',
            width: 200,
            ellipsis: true,
            align: 'center',
            hideInSearch: true,
        },
        {
            dataIndex: 'USER_LOGINIP',
            title: '登录地址',
            ellipsis: true,
            width: 160,
            align: 'center',
            hideInSearch: true,
        },
        {
            dataIndex: 'USER_LOGINPLACE',
            title: '登录地点',
            ellipsis: true,
            width: 160,
            align: 'center',
            hideInSearch: true,
        },
        {
            dataIndex: 'BROWSER_VERSION',
            title: '浏览器版本',
            width: 140,
            ellipsis: true,
            align: 'center',
            hideInSearch: true,
        },
        {
            dataIndex: 'OPERATING_SYSTEM',
            title: '操作系统',
            width: 120,
            align: 'center',
            hideInSearch: true,
        },
        {
            dataIndex: 'OPERATELOG_TYPE',
            title: '登录状态',
            width: 120,
            align: 'center',
            valueType: 'select',
            valueEnum: {
                1000: { text: '成功', status: 'Processing' },
                1001: { text: '失败', status: 'Default' },
            }
        },
        {
            dataIndex: 'OPERATELOG_DESC',
            title: <div style={{ textAlign: 'center' }}>备注说明</div>,
            ellipsis: true,
            width: 160,
            align: 'left',
            hideInSearch: true,
        },
        {
            dataIndex: 'OPERATE_DATE',
            title: '登录时间',
            ellipsis: true,
            width: 160,
            align: 'center',
            hideInSearch: true,
        },
    ]

    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() // 防止重复打印一个内容
    }


    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
                        }}
                        headerTitle={'登录日志列表'}
                        scroll={{ y: 'calc(100vh - 450px)' }}
                        search={{ span: 6 }}
                        pagination={{ pageSize: 100 }}
                        request={async (params) => {
                            const req: any = {
                                SearchParameter: {
                                    OPERATELOG_TYPES: params?.OPERATELOG_TYPE ? params?.OPERATELOG_TYPE : '1000,1001',
                                    OPERATE_DATE_Start: moment(params?.search_date_Start).format('YYYY-MM-DD'),
                                    OPERATE_DATE_End: moment(params?.search_date_End).format('YYYY-MM-DD'),
                                    Province_Code: '734100',
                                },
                                SortStr: 'OPERATE_DATE desc',
                                KeyWord: {
                                    Key: 'USER_NAME,USER_LOGINIP,USER_LOGINPLACE,BROWSER_VERSION,OPERATING_SYSTEM',
                                    Value: params?.searchValue || ''
                                },
                                Province_Code: '734100',
                                PageIndex: 1,
                                PageSize: 999999
                            }
                            setSearchParams(params)
                            const data = await handleGetOPERATELOGList(req)
                            console.log('login', data);
                            if (data && data.length > 0) {
                                let res: any = data
                                let ipConfig: any = {
                                    "36.4.22.102": "安徽省宿州市萧县",
                                    "36.60.46.185": "安徽省合肥市",
                                    "39.144.36.176": "安徽省宿州市",
                                    "39.144.124.27": "浙江省杭州市",
                                    "39.144.124.132": "浙江省杭州市",
                                    "39.144.158.24": "江苏省徐州市",
                                    "39.144.159.253": "安徽省滁州市",
                                    "39.144.160.136": "安徽省淮北市",
                                    "39.144.160.143": "安徽省淮北市",
                                    "39.144.160.144": "安徽省淮北市",
                                    "39.144.160.152": "安徽省淮北市",
                                    "39.144.160.157": "安徽省淮北市",
                                    "39.144.161.11": "安徽省六安市",
                                    "39.144.161.210": "安徽省宿州市",
                                    "39.144.161.233": "安徽省宿州市",
                                    "39.144.161.254": "安徽省宿州市",
                                    "39.172.4.108": "浙江省嘉兴市海宁市",
                                    "39.172.4.201": "浙江省嘉兴市海宁市",
                                    "39.172.4.213": "浙江省嘉兴市海宁市",
                                    "39.172.5.59": "浙江省嘉兴市海宁市",
                                    "39.172.5.112": "浙江省嘉兴市海宁市",
                                    "39.172.5.121": "浙江省嘉兴市海宁市",
                                    "39.172.5.127": "浙江省嘉兴市海宁市",
                                    "60.163.34.228": "浙江省嘉兴市南湖区",
                                    "60.163.46.232": "浙江省嘉兴市南湖区",
                                    "60.163.47.184": "浙江省嘉兴市海盐县",
                                    "60.163.52.122": "浙江省嘉兴市秀洲区",
                                    "60.163.53.59": "浙江省嘉兴市海宁市",
                                    "60.163.55.165": "浙江省嘉兴市海宁市",
                                    "60.163.55.167": "浙江省嘉兴市桐乡市",
                                    "60.163.58.172": "浙江省嘉兴市海宁市",
                                    "60.163.59.232": "浙江省嘉兴市海宁市",
                                    "60.163.59.236": "浙江省嘉兴市海宁市",
                                    "60.163.60.47": "浙江省嘉兴市海宁市",
                                    "60.163.60.59": "浙江省嘉兴市海宁市",
                                    "60.163.62.90": "浙江省嘉兴市桐乡市",
                                    "60.171.238.244": "安徽省宿州市萧县",
                                    "60.172.217.114": "安徽省淮北市濉溪县",
                                    "60.172.217.145": "安徽省淮北市濉溪县",
                                    "60.176.162.186": "浙江省杭州市上城区",
                                    "60.176.164.76": "江苏省常州市武进区",
                                    "60.176.164.247": "浙江省杭州市上城区",
                                    "112.32.22.113": "安徽省合肥市瑶海区",
                                    "114.96.180.180": "安徽省淮北市濉溪县",
                                    "114.96.194.20": "安徽省淮北市濉溪县",
                                    "114.100.64.31": "安徽省合肥市蜀山区",
                                    "114.101.225.25": "安徽省六安市",
                                    "115.192.49.197": "浙江省杭州市上城区",
                                    "115.192.53.9": "浙江省杭州市上城区",
                                    "115.192.107.101": "浙江省杭州市上城区",
                                    "115.193.225.226": "浙江省杭州市上城区",
                                    "115.193.227.227": "浙江省杭州市上城区",
                                    "115.193.231.250": "浙江省杭州市上城区",
                                    "115.194.85.219": "浙江省杭州市上城区",
                                    "115.194.177.186": "浙江省杭州市上城区",
                                    "115.195.193.45": "浙江省杭州市上城区",
                                    "115.196.92.254": "浙江省杭州市上城区",
                                    "115.198.179.20": "浙江省杭州市上城区",
                                    "115.204.235.249": "浙江省杭州市上城区",
                                    "115.205.166.1": "浙江省杭州市上城区",
                                    "115.205.167.144": "浙江省杭州市上城区",
                                    "115.206.6.18": "浙江省杭州市上城区",
                                    "115.227.185.89": "浙江省杭州市上城区",
                                    "115.230.232.107": "浙江省嘉兴市南湖区",
                                    "115.230.233.85": "浙江省嘉兴市南湖区",
                                    "117.64.111.55": "安徽省合肥市长丰县",
                                    "117.69.251.95": "安徽省淮北市濉溪县",
                                    "117.70.141.75": "安徽省合肥市",
                                    "117.136.100.128": "安徽省淮北市",
                                    "117.136.100.179": "安徽省淮北市",
                                    "117.136.100.200": "安徽省宿州市",
                                    "117.136.111.237": "浙江省杭州市",
                                    "120.243.183.29": "安徽省淮北市濉溪县",
                                    "122.231.76.168": "浙江省杭州市上城区",
                                    "122.235.192.101": "浙江省杭州市上城区",
                                    "122.235.199.72": "浙江省杭州市上城区",
                                    "122.235.235.125": "浙江省杭州市上城区",
                                    "122.235.236.69": "浙江省杭州市上城区",
                                    "122.235.236.102": "浙江省杭州市上城区",
                                    "122.235.237.105": "浙江省杭州市上城区",
                                    "122.238.13.42": "浙江省嘉兴市海宁市",
                                    "122.238.16.70": "浙江省嘉兴市平湖市",
                                    "122.238.19.85": "浙江省嘉兴市南湖区",
                                    "122.238.22.131": "浙江省嘉兴市海宁市",
                                    "122.238.22.208": "浙江省嘉兴市海宁市",
                                    "122.238.125.207": "浙江省嘉兴市桐乡市",
                                    "122.238.126.126": "浙江省嘉兴市海宁市",
                                    "122.238.127.172": "浙江省嘉兴市海宁市",
                                    "122.238.141.162": "浙江省嘉兴市秀洲区",
                                    "122.238.141.164": "浙江省嘉兴市秀洲区",
                                    "122.238.141.172": "浙江省嘉兴市秀洲区",
                                    "122.238.155.77": "浙江省嘉兴市南湖区",
                                    "125.118.26.195": "浙江省杭州市上城区",
                                    "125.119.7.98": "浙江省杭州市上城区",
                                    "125.119.84.18": "浙江省杭州市上城区",
                                    "125.119.84.45": "浙江省杭州市上城区",
                                    "125.120.68.105": "浙江省杭州市上城区",
                                    "125.120.92.21": "浙江省杭州市上城区",
                                    "183.157.72.118": "浙江省杭州市上城区",
                                    "218.23.8.6": "安徽省宿州市萧县",
                                    "218.72.123.102": "浙江省杭州市上城区",
                                    "218.74.48.78": "浙江省杭州市上城区",
                                    "218.109.197.191": "浙江省杭州市上城区",
                                    "220.178.52.243": "安徽省合肥市蜀山区",
                                    "220.205.224.8": "安徽省合肥市",
                                    "220.205.224.35": "安徽省合肥市",
                                    "220.205.224.39": "安徽省合肥市",
                                    "220.205.224.100": "安徽省合肥市",
                                    "220.205.224.169": "安徽省合肥市",
                                    "220.205.224.237": "安徽省合肥市",
                                    "220.205.225.1": "安徽省合肥市",
                                    "220.205.225.96": "安徽省合肥市",
                                    "220.205.225.150": "安徽省合肥市",
                                    "220.205.232.82": "安徽省合肥市",
                                    "220.205.232.106": "安徽省合肥市",
                                    "220.205.232.130": "安徽省合肥市",
                                    "220.205.232.190": "安徽省合肥市",
                                    "220.205.232.206": "安徽省合肥市",
                                    "220.205.233.36": "安徽省合肥市",
                                    "220.205.233.92": "安徽省合肥市",
                                    "220.205.233.110": "安徽省合肥市",
                                    "220.205.248.117": "安徽省合肥市",
                                    "220.205.248.142": "安徽省合肥市",
                                    "220.205.248.179": "安徽省合肥市",
                                    "220.205.248.196": "安徽省合肥市",
                                    "220.205.248.236": "安徽省合肥市",
                                    "220.205.249.113": "安徽省合肥市",
                                    "220.205.249.124": "安徽省合肥市",
                                    "220.205.249.135": "安徽省合肥市",
                                    "220.205.249.137": "安徽省合肥市",
                                    "220.205.249.171": "安徽省合肥市",
                                    "220.205.249.203": "安徽省合肥市",
                                    "220.205.249.216": "安徽省合肥市",
                                    "220.205.249.254": "安徽省合肥市",
                                    "220.205.252.25": "安徽省合肥市",
                                    "220.205.252.63": "安徽省合肥市",
                                    "220.205.252.69": "安徽省合肥市",
                                    "220.205.252.94": "安徽省合肥市",
                                    "220.205.252.187": "安徽省合肥市",
                                    "220.205.253.14": "安徽省合肥市",
                                    "220.205.253.65": "安徽省合肥市",
                                    "220.205.253.90": "安徽省合肥市",
                                    "220.205.253.102": "安徽省合肥市",
                                    "220.205.253.250": "安徽省合肥市",
                                    "220.205.253.253": "安徽省合肥市",
                                    "220.248.226.210": "安徽省合肥市蜀山区",
                                    "222.221.252.82": "云南省昆明市西山区",
                                    "223.104.34.163": "安徽省淮北市",
                                    "223.104.34.171": "安徽省淮北市",
                                    "223.104.34.175": "安徽省淮北市",
                                    "223.104.34.176": "安徽省淮北市",
                                    "223.104.34.187": "安徽省淮北市",
                                    "223.104.155.31": "江苏省徐州市",
                                    "223.104.155.88": "江苏省徐州市",
                                    "223.242.198.246": "安徽省淮北市濉溪县",
                                    "223.246.228.18": "安徽省合肥市",
                                }
                                for (let i = 0; i < res.length; i++) {
                                    if (res[i].USER_LOGINIP && !res[i].USER_LOGINPLACE) {
                                        if (ipConfig[res[i].USER_LOGINIP]) {
                                            res[i].USER_LOGINPLACE = ipConfig[res[i].USER_LOGINIP]
                                        } else {
                                            // await fetch(`/baidu-api/location/ip?ip=${res[i].USER_LOGINIP}&coor=bd09ll&ak=XrQQuNQRGxap9YH2xmvx3dzuJVkXhTzT`).then(response => response.text()).then(data => {
                                            //     let result: any = JSON.parse(data)
                                            //     console.log('resultresultresult', result);
                                            //     ipConfig[res[i].USER_LOGINIP] = result.content.address
                                            // });
                                            ipConfig[res[i].USER_LOGINIP] = ""
                                        }
                                    }
                                }

                                console.log('resresres', res);
                                console.log('ipConfigipConfigipConfig', ipConfig);


                                setReqDetailList(res)
                                return { data: res, success: true }
                            }
                            return { data: [], success: true }
                        }}
                        toolbar={{
                            actions: [
                                <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) {
                                            // 尝试一下 导出新方法 
                                            exportXlsxFromProColumnsExcelJS(columns,
                                                reqDetailList,
                                                `登录日志`,
                                                {
                                                    // topTitle: `进销存类别报表`, // 顶部大标题
                                                    // footerMaker: currentUser?.Name,
                                                    // footerMakerTime: moment().format('YYYY-MM-DD HH:mm:ss'),
                                                    // footerStatsTime: ""
                                                }
                                            )

                                            // setShowLoading(true)
                                            // setTimeout(() => {
                                            //     setShowExportTable(true)
                                            //     setTimeout(() => {
                                            //         exportTable(e)
                                            //     }, 100)
                                            // }, 100)
                                        } else {
                                            message.error('暂无数据可导出！')
                                        }
                                    }}
                                >
                                    导出excel
                                </Button>
                            ]
                        }}
                    />
                </div>
            </div>
        </div>
    )
}

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