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 PageTitleBox from "@/components/PageTitleBox";
import { handleGetSECTIONFLOWList } from "../service";
import moment from 'moment'

const trafficAnalysis: 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 {
                        STATISTICS_DATE_Start: value[0],
                        STATISTICS_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(moment().subtract(8, 'd')), moment(moment().subtract(1, 'd'))],
        },
        {
            title: "服务区名称",
            width: 150,
            dataIndex: "SERVERPART_NAME",
            hideInSearch: true,
            ellipsis: true,
            align: 'center'
        },
        {
            title: "服务区方位",
            width: 150,
            dataIndex: "SERVERPART_REGION",
            hideInSearch: true,
            ellipsis: true,
            align: 'center'
        },
        {
            title: <div style={{ textAlign: 'center' }}>断面流量</div>,
            width: 150,
            dataIndex: "SECTIONFLOW_NUM",
            hideInSearch: true,
            valueType: 'digit',
            ellipsis: true,
            align: 'right'
        },
        {
            title: <div style={{ textAlign: 'center' }}>服务区流量</div>,
            width: 150,
            dataIndex: "SERVERPART_FLOW",
            hideInSearch: true,
            ellipsis: true,
            align: 'right'
        },
        {
            title: <div style={{ textAlign: 'center' }}>男性数量</div>,
            width: 150,
            dataIndex: "MALE_COUNT",
            hideInSearch: true,
            ellipsis: true,
            align: 'right'
        },
        {
            title: <div style={{ textAlign: 'center' }}>女性数量</div>,
            width: 150,
            dataIndex: "FEMALE_COUNT",
            hideInSearch: true,
            ellipsis: true,
            align: 'right'
        },
        {
            title: "统计日期",
            width: 150,
            dataIndex: "STATISTICS_DATE",
            hideInSearch: true,
            ellipsis: true,
            align: 'center'
        }
    ]

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

            <div style={{ backgroundColor: '#fff', display: 'flex' }}>
                <LeftSelectTree setSelectedId={setSelectedId} setCollapsible={setCollapsible} collapsible={collapsible} />
                <div style={{
                    width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
                    paddingTop: 0,
                    paddingBottom: 0,
                    paddingRight: 0
                }}>
                    <ProTable
                        actionRef={actionRef}
                        formRef={formRef}
                        columns={columns}
                        bordered
                        expandable={{
                            expandRowByClick: true
                        }}
                        scroll={{ x: "100%", y: "calc(100vh - 410px)" }}
                        headerTitle={<PageTitleBox props={props} />} // 列表表头
                        search={{ span: 6 }}
                        request={async (params) => {
                            if (!selectedId) {
                                return
                            }

                            const req: any = {
                                SearchParameter: {
                                    STATISTICS_DATE_Start: params.STATISTICS_DATE_Start,
                                    STATISTICS_DATE_End: params.STATISTICS_DATE_End,
                                    SERVERPART_IDS: selectedId,
                                },
                                PageIndex: 1,
                                PageSize: 999999
                            }

                            setSearchParams(params)

                            const data = await handleGetSECTIONFLOWList(req)
                            if (data && data.length > 0) {
                                return { data, success: true }
                            }
                            return { data: [], success: true }
                        }}
                        toolbar={{
                            actions: [

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

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