import React, { useState, useEffect } from "react";
import { ResultFlowResult } from "@/components";
import { Select, Input, Button, Table, message, Pagination, DatePicker, Modal, Cascader, Tooltip, Tabs } from "antd";
import { useSessionStorageState } from "ahooks";
import { dictionary } from "@/config/common";
import { useNavigate } from "react-router-dom";
import { setTabList } from "@/store/common.js";
import { useSelector, useDispatch } from "react-redux";
import { QuestionCircleFilled } from "@ant-design/icons"
import moment from "moment";
import ReactEcharts from "echarts-for-react";
import echarts from "echarts";
import "./index.scss";
import ajax from "@/services";
//停车时长分析
function ParkingAlyDuration() {
    // session缓存
    const [defaultParams, setDefaultParams] = useSessionStorageState(
        "formData_parkingAlyDuration",
        { defaultValue: null }
    );
    //区域的下拉数据
    const [areaList, setAreaList] = useState([]);
    // 默认数据
    const defaultData = {
        start_time: moment().subtract('days').startOf('day').format("YYYY-MM-DD"),
        end_time: moment().endOf("day").format("YYYY-MM-DD"),
        date_type: '1',
        //date_type: 1,
    };
    // 分页数据
    const [pageInfo, setPageInfo] = useState({
        pn: 1,
        page_size: 10
    });
    // 表单数据
    const [formData, setFormData] = useState({
        ...defaultData,
        ...defaultParams,
    });
    // 搜索提交数据-存储
    const [holdData, setHoldData] = useState(formData);
    // 访问接口，isAjax改变时执行
    const [isAjax, setIsAjax] = useState(false);
    // 检索按钮加载状态
    const [loading, setLoading] = useState(false);
    // 表格加载状态
    const [tabLoading, setTabLoading] = useState(false);
    // 表格返回数据
    const [resultData, setResultData] = useState({
        total: 0,
        list: [],
    });
    // 泊位周转排行榜返回数据
    const [tableData, setTableData] = useState({
        area_list: [],
        road_list: [],
    });
    // 停车排行榜返回数据setTableCarData
    const [tableCarData, setTableCarData] = useState({
        area_list: [],
        road_list: [],
    });
    //停车场收入概览数据
    const [revenueData, setRevenueData] = useState({});
    const [searchSelectList, setSearchSelectList] = useState([]); //搜索下拉数据
    const [sessionTabList, setSessionTabList] = useSessionStorageState('parkingAlyDuration', {
        value: {
        }
    })
    useEffect(() => {
        if (sessionTabList && Object.values(sessionTabList).length > 0) {
            setFormData({
                ...formData, ...sessionTabList
            })
            // getData({
            //     ...sessionTabList
            // })
            getCheck({
                ...sessionTabList
            })
        } else {
            //getData()
            getCheck()
        }
    }, [isAjax])
    const [tabKey, setTabKey] = useState("1");
    const [tabCarKey, setTabCarKey] = useState("1");
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 100,
            render: (text, record, index) => index + 1
        },
        {
            title: '区域',
            dataIndex: 'area_name',
            key: 'area_name',
            width: 280,
        },
        {
            title: '泊位数（个）',
            dataIndex: 'area_total_berths',
            key: 'area_total_berths',
            //width: 200,
        },
        {
            title: '利用率',
            dataIndex: 'area_rate',
            key: 'area_rate',
            width: 120,
        },

    ]
    const parkColumns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 100,
            render: (text, record, index) => index + 1
        },
        {
            title: '停车场',
            dataIndex: 'road_name',
            key: 'road_name',
            width: 280,
        },
        {
            title: '泊位数（个）',
            dataIndex: 'road_total_berths',
            key: 'road_total_berths',
            //width: 200,
        },
        {
            title: '利用率',
            dataIndex: 'road_rate',
            key: 'road_rate',
            width: 120,
        },

    ]
    const columns1 = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 100,
            render: (text, record, index) => index + 1
        },
        {
            title: '区域',
            dataIndex: 'area_name',
            key: 'area_name',
            width: 280,
        },
        {
            title: '泊位数（个）',
            dataIndex: 'area_total_parkings',
            key: 'area_total_parkings',
            //width: 200,
        },
        {
            title: '利用率',
            dataIndex: 'area_rate',
            key: 'area_rate',
            width: 120,
        },

    ]
    const parkColumns1 = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 100,
            render: (text, record, index) => index + 1
        },
        {
            title: '停车场',
            dataIndex: 'road_name',
            key: 'road_name',
            width: 280,
        },
        {
            title: '泊位数（个）',
            dataIndex: 'road_total_parkings',
            key: 'road_total_parkings',
            //width: 200,
        },
        {
            title: '利用率',
            dataIndex: 'road_rate',
            key: 'road_rate',
            width: 120,
        },

    ]
    const paginationProps = {
        className: "pagination-common",
        showQuickJumper: true,
        showSizeChanger: true,
        current: pageInfo.pn,
        //total: resultData?.totalRecords,
        pageSize: pageInfo.page_size,
        pageSizeOptions: Array.from(
            new Set([...[15], ...(dictionary?.pageSizeOptions || [])])
        ),
        onChange: (current, size) => {
            setPageInfo({
                ...pageInfo,
                ...{ pn: current, length: size }
            });
            setIsAjax(!isAjax)
            //getListData({})
        },
    }

    // useEffect(() => {
    //     getData()
    // }, [pageInfo])
    useEffect(() => {
        setSessionTabList({
            ...formData
        })
    }, [formData])
    useEffect(() => {
        getSelectList();
    }, []);

    // 访问接口，获取表格
    // useEffect(() => {
    //   getData();
    // }, [isAjax]);
    //时间状态切换
    const TimeChange = () => {
        let e = formData.date_type;
        let str = "day";
        let mat = "YYYY-MM-DD";
        if (e == 4) {
            str = "year";
            mat = "YYYY";
        } else if (e == 3) {
            str = "month";
            mat = "YYYY-MM";
        } else if (e == 2) {
            str = "week";
            mat = "YYYY-MM-DD";
        }
        return { str, mat };
    };
    //切换时间变化
    const SetTimeNow = (e) => {
        let start = "";
        let end = "";
        if (e == 4) {
            start = moment().format("YYYY");
            end = moment().format("YYYY");
        } else if (e == 3) {
            start = moment().startOf('month').format("YYYY-MM-DD");
            end = moment().endOf("month").format("YYYY-MM-DD");
        } else if (e == 2) {
            start = moment().day(1).format("YYYY-MM-DD");
            end = moment().day(7).format("YYYY-MM-DD");
        } else {
            start = moment().startOf("day").format("YYYY-MM-DD");
            end = moment().endOf("day").format("YYYY-MM-DD");
        }
        setFormData({
            ...formData,
            date_type: e,
            start_time: start,
            end_time: end,
        });
    };
    //停车场收入概览 柱状图
    const getRevenueOption = (data) => {
        console.log(data)
        // data = [
        //     {
        //       "hour": "0",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "1",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "2",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "3",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "4",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "5",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "6",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "7",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "8",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "9",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "10",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "11",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "12",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "13",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "14",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "15",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "16",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "17",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "18",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "19",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "20",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "21",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "22",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     },
        //     {
        //       "hour": "23",
        //       "record_count": "0",
        //       "total_duration": "0"
        //     }
        //   ]
        let ac = [
            {
                "hour": "0",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "1",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "2",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "3",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "4",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "5",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "6",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "7",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "8",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "9",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "10",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "11",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "12",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "13",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "14",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "15",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "16",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "17",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "18",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "19",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "20",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "21",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "22",
                "record_count": "0",
                "total_duration": "0"
            },
            {
                "hour": "23",
                "record_count": "0",
                "total_duration": "0"
            }
        ]
        let leftData = []
        let rightData = []
        let yData = []
        data.map(item => {
            yData.push(item.houer)
            leftData.push(item.record_count)
            leftData.push(item.total_duration)
        })
        data.sort((a, b) => {
            return new Date(a.hour) - new Date(b.hour);
        });
        const areaNames = ['停车次数', '停车时长'];
        // 获取所有日期
        // const dates = [...new Set(data.map((item) => item.pay_date))].sort(
        //     (a, b) => a.pay_date - b.pay_date
        // );
        // 构建数据对象
        // const seriesData = areaNames.map((areaName, index) => {
        //     // 获取该地区的数据
        //     const areaData = data.filter((item) => item.area_name === areaName);
        //     // 构建该地区的数据对象
        //     return {
        //         name: areaName,
        //         type: "bar",
        //         // itemStyle: {
        //         //     normal: {
        //         //         label: {
        //         //             show: true, //开启显示
        //         //             position: 'top', //在上方显示
        //         //             textStyle: { //数值样式
        //         //                 color: 'white',//字体颜色
        //         //                 fontSize: 10//字体大小
        //         //             }
        //         //         },
        //         //     },
        //         // },
        //         data: dates.map((item) => {
        //             for (const { pay_date, income } of areaData) {
        //                 if (pay_date === item) return income;
        //             }
        //             return 0;
        //         }),
        //         yAxisIndex: index == 1 ? 1 : null,
        //     };
        // });

        setRevenueData({
            title: {
                text: "",
                textStyle: {
                    color: "#fff",
                },
            },
            tooltip: {
                trigger: "axis",
            },
            legend: {
                type: "scroll",
                x: "center",
                data: areaNames,
                itemWidth: 18,
                itemHeight: 12,
                textStyle: {
                    fontSize: 14,
                    color: "#fff",
                },
            },
            xAxis: {
                //data: xAxisData,
                data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: "#bbb",
                    },
                },
                axisLabel: {
                    textStyle: {
                        color: "#bbb",
                    },
                },
                axisTick: {
                    show: false,
                }
            },
            yAxis: [{
                type: "value",
                name: '停车次数（次）',
                min: 0,
                interval: 10,
                splitNumber: 6, //设置坐标轴的分割段数
                axisLabel: {
                    textStyle: {
                        color: "#ffffffa6",
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: "#ffffffa6",
                    },
                },
                splitLine: {
                    show: true,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
                    interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
                    lineStyle: {
                        color: ['#cccccc42'],    // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
                        width: 2,    // 分隔线线宽
                        type: 'dashed',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
                    },
                },
            },
            {
                type: "value",
                name: '停车时长（时）',
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: "#ffffffa6",
                    },
                },
                splitLine: {
                    show: true,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
                    interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
                    lineStyle: {
                        color: ['#cccccc42'],    // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
                        width: 1.3,    // 分隔线线宽
                        type: 'dashed',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
                    },
                },
            },
            ],
            color: ["#4DC3FF", "#FFD767"],
            series: [
                {
                    name: "停车次数",
                    type: "bar",
                    data: leftData,
                    //data:[1,24,6,8,4,32,5,2,5,25,6,34],
                    barWidth: 12,
                    itemStyle: {
                        barBorderRadius: [2, 2, 0, 0], // （顺时针左上，右上，右下，左下）
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#99EBFF' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#3AA9FF' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },

                    },
                },
                {
                    name: "停车时长",
                    type: "bar",
                    yAxisIndex: 1,
                    data: rightData,
                    //data:[1,24,6,8,4,32,5,2,5,25,6,34],
                    barWidth: 12,
                    itemStyle: {
                        barBorderRadius: [2, 2, 0, 0], // （顺时针左上，右上，右下，左下）
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#FFB8B8' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#F481F8' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        }
                    },
                }
            ],
            grid: {
                x: 50,
                y: 55,
                x2: 70,
                y2: 30,
            },
        });
    };

    //获取柱状图数据
    function getParkingIncome(data) {
        ajax
            .getParkingAlyDurationBar(data)
            .then((res) => {
                if (res.status === 20000) {
                    console.log(res)
                    getRevenueOption(res.data.list);
                }
            })
            .catch((err) => console.error(err));
    }

    // 获取下拉数据
    const getSelectList = () => {
        ajax.getOperator().then((e) => {
            setSearchSelectList([
                ...searchSelectList,
                ...e.data
            ])
        })
    };

    // 获取日均泊位列表数据
    const getData = (v, pn = {}) => {
        ajax.getParkingAlyDurationBerthList({ ...v, ...pn }).then(
            (res) => {
                if (parseInt(res?.status) === 20000) {
                    setTableData(res?.data || {});
                } else {
                    message.error(res?.message);
                }
                setLoading(false);
                setTabLoading(false);
            },
            (err) => {
                console.log(err);
                setLoading(false);
                setTabLoading(false);
            }
        );
    };
    // 获取停车时长列表数据
    const getListData = (v, pn = {}) => {
        let postData = { ...formData, sort: 2 };
        if (!loading) {
            postData = { ...holdData };
        }
        setDefaultParams({ ...postData, ...pageInfo });
        setTabLoading(true);
        ajax.getParkingAlyDurationParkingList({ ...postData, ...v, ...pageInfo, ...pn }).then(
            (res) => {
                if (parseInt(res?.status) === 20000) {
                    setTableCarData(res?.data || {});
                } else {
                    message.error(res?.message);
                }
                setLoading(false);
                setTabLoading(false);
            },
            (err) => {
                console.log(err);
                setLoading(false);
                setTabLoading(false);
            }
        );
    };
    // 携带参数处理
    const getCheck = (v) => {
        let postData = { ...formData };
        if (!loading) {
            postData = { ...holdData };
        }
        setDefaultParams({ ...postData, ...pageInfo });
        if (moment(formData.end_time) - moment(formData.start_time) > 1000 * 31 * 24 * 3600) {
            message.error("时间范围限制为31天！")
            setLoading(false);
            setTabLoading(false);
            return
        }
        setTabLoading(true);
        let params = { ...postData, ...v, ...pageInfo }
        //请求接口
        getParkingIncome(params)
        getData(params)
        getListData(params)
    };
    // 检索数据
    const handleSearch = () => {
        setLoading(true);
        setPageInfo({ ...pageInfo, ...{ pn: 1 } });
        setHoldData(formData);
        setIsAjax(!isAjax);
    };

    // 日均周转次数导出
    const handleExport = () => {
        if (tableData.list.area_list?.length > 0) {
            let { pn, page_size, ...params } = defaultParams;
            ajax.getParkingAlyDurationParkingExp(defaultParams).then(
                (res) => {
                    if (res) {
                        window.open(res.data.export_url)
                    } else {
                        message.error(res?.message);
                    }
                },
                (err) => {
                    console.log(err);
                }
            );
        } else {
            message.error("暂无数据");
        }
    };
    // 停车排行导出
    const handleExportCar = () => {
        if (tableData.list.area_list?.length > 0) {
            let { pn, page_size, ...params } = defaultParams;
            ajax.getParkingAlyDurationExp(defaultParams).then(
                (res) => {
                    if (res) {
                        window.open(res.data.export_url)
                    } else {
                        message.error(res?.message);
                    }
                },
                (err) => {
                    console.log(err);
                }
            );
        } else {
            message.error("暂无数据");
        }
    };
    //区域下拉框数据
    useEffect(() => {
        ajax
            .getAreaTree()
            .then((res) => {
                if (res.status === 20000) {
                    setAreaList(res.data);
                }
            })
            .catch((err) => {
                console.error(err);
            });
    }, []);
    return (
        <>
            <div className="edit-order-inquiry">
                <div className="paid-search">
                    <div className="title">查询条件</div>
                    <div className="form-Wrap">
                        <div className="yisa-search">
                            <label>区域</label>
                            <Cascader
                                className="form-con"
                                popupClassName="start-exception-deal-cascader"
                                options={areaList}
                                placeholder="请选择区域"
                                expandTrigger="hover"
                                fieldNames={{
                                    label: "name",
                                    value: "id",
                                    children: "children",
                                }}
                                value={formData.region}
                                onChange={(v, option) => {
                                    setFormData({ ...formData, region: v ? v : null });
                                }}
                            />
                        </div>
                        <div className="yisa-search">
                            <label>运营商</label>
                            <Select
                                className="form-con"
                                placeholder="请选择"
                                options={searchSelectList || []}
                                value={formData.operator_id}
                                onChange={(v) =>
                                    setFormData({ ...formData, operator_id: v })
                                }
                            />
                        </div>
                        <div className="yisa-search">
                            <label>车场类型</label>
                            <Select
                                className="form-con"
                                placeholder="请选择车场类型"
                                options={[
                                    {
                                        label: '全部',
                                        value: '0',
                                    },
                                    {
                                        label: '路内车场',
                                        value: '1',
                                    },
                                    {
                                        label: '路外车场',
                                        value: '2',
                                    },
                                ]}
                                value={formData.car_parking_type}
                                onChange={(v) =>
                                    setFormData({ ...formData, car_parking_type: v })
                                }
                            />
                        </div>
                        <div className="yisa-search">
                            <label>停车场</label>
                            <Input
                                className="form-con"
                                placeholder="请输入"
                                value={formData?.road_name}
                                onChange={(e) =>
                                    setFormData({ ...formData, road_name: e.target.value })
                                }
                            />
                        </div>

                        <div className="yisa-search">
                            <label>日期
                                <div className="daf">
                                    <Select
                                        value={formData.date_type}
                                        // style={{
                                        //   width: "100%",
                                        // }}
                                        placeholder="请选择"
                                        options={[
                                            {
                                                value: "1",
                                                label: "日",
                                            },
                                            {
                                                value: "2",
                                                label: "周",
                                            },
                                            {
                                                value: "3",
                                                label: "月",
                                            },
                                        ]}
                                        onChange={(e) => SetTimeNow(e)}
                                    />
                                </div>
                            </label>
                            <DatePicker
                                style={{ width: "100%" }}
                                // showTime
                                format={TimeChange().mat}
                                picker={TimeChange().str}
                                allowClear={false}
                                value={formData.start_time ? moment(formData.start_time) : null}
                                onChange={(date, dateString) => {
                                    if (TimeChange().str == "week") {
                                        setFormData({
                                            ...formData,
                                            start_time: date
                                                ? moment(date).day(1).format("YYYY-MM-DD")
                                                : null,
                                        });
                                    } else if (TimeChange().str == "day") {
                                        if (date > moment(formData.end_time)) {
                                            setFormData({
                                                ...formData,
                                                end_time: dateString,
                                                start_time: formData.end_time,
                                            });
                                        } else {
                                            setFormData({
                                                ...formData,
                                                start_time: dateString,
                                            });
                                        }
                                    } else if (TimeChange().str == "month") {
                                        setFormData({ ...formData, start_time: moment(date).format("YYYY-MM-DD"), end_time: moment(date).endOf("month").format("YYYY-MM-DD") });
                                    } else {
                                        setFormData({ ...formData, start_time: dateString });
                                    }
                                }}
                                disabledDate={(current) => current > moment(formData.end_time)}
                            />

                        </div>
                        <div className="yisa-search">
                            <label>至</label>
                            <DatePicker
                                style={{ width: "100%" }}
                                // showTime
                                format={TimeChange().mat}
                                picker={TimeChange().str}
                                allowClear={false}
                                value={formData.end_time ? moment(formData.end_time) : null}
                                onChange={(date, dateString) => {
                                    if (TimeChange().str == "week") {
                                        setFormData({
                                            ...formData,
                                            end_time: date
                                                ? moment(date).day(7).format("YYYY-MM-DD")
                                                : null,
                                        });
                                    } else if (TimeChange().str == "day") {
                                        if (date < moment(formData.start_time)) {
                                            setFormData({
                                                ...formData,
                                                start_time: dateString,
                                                end_time: formData.start_time,
                                            });
                                        } else {
                                            setFormData({
                                                ...formData,
                                                end_time: dateString,
                                            });
                                        }
                                    } else if (TimeChange().str == "month") {
                                        setFormData({ ...formData, start_time: moment(date).startOf('month').format("YYYY-MM-DD"), end_time: moment(date).format("YYYY-MM-DD") });
                                    } else {
                                        setFormData({ ...formData, end_time: dateString });
                                    }
                                }}
                                disabledDate={(current) =>
                                    current < moment(formData.start_time)
                                }
                            />
                        </div>
                        <div className="form-btn">
                            <Button
                                className="reset"
                                onClick={() => setFormData(defaultData)}
                            >
                                重置
                            </Button>
                            <Button
                                className="submit"
                                type="primary"
                                onClick={handleSearch}
                                loading={loading}
                            >
                                查询
                            </Button>
                        </div>
                    </div>
                </div>
                <div className="paid-result soll-result">
                    <div className="result">
                        <div className="result-box">
                            <div className="result-box-title">停车时长分析</div>
                            <Tooltip
                                placement="topLeft"
                                title={<span>停车次数: 展示统计期间内，各个停车时长区间内的停车记录数<br />
                                    停车时长: 展示统计时间段内，在各个停车时长区间内的停车记录的总时木</span>}
                            >
                                <i>?</i>
                            </Tooltip>
                            <ReactEcharts
                                option={revenueData}
                                style={{ height: "300px", width: "100%", overflow: "hidden" }}
                            />
                        </div>
                        <div className="duration-box">
                            <div className="result-box duration-left">
                                <div className="result-box-title">日均泊位周转次数排行榜</div>
                                <div className="export-btn" onClick={handleExport}>导出</div>
                                <Tabs
                                    defaultActiveKey="2"
                                    activeKey={tabKey}
                                    onChange={(key) => {
                                        setTabKey(key);
                                        setPageInfo({ ...pageInfo, ...{ pn: 1 } });
                                        getData({}, { pn: 1 })
                                    }}
                                    items={[
                                        {
                                            label: `序号`,
                                            key: '0',
                                            disabled: "true"
                                        },
                                        {
                                            label: <div className="tab-title">
                                                <div className="title">区域</div>
                                                <div className="btn">
                                                    <div onClick={() => {
                                                        message.success('升序');
                                                        setPageInfo({ ...pageInfo, ...{ pn: 1 } });
                                                        getData({ sort: 1 }, { pn: 1 })
                                                    }}>▲</div>
                                                    <div onClick={() => {
                                                        message.success('降序');
                                                        setPageInfo({ ...pageInfo, ...{ pn: 1 } });
                                                        getData({ sort: 2 }, { pn: 1 })
                                                    }}>▼</div>
                                                </div>
                                            </div>,
                                            key: '1',
                                            children: <><Table
                                                showHeader={false}
                                                columns={columns}
                                                dataSource={tableData?.list?.area_list || []}
                                                rowKey={'area_name'}
                                                bordered
                                                pagination={false}
                                                size="middle"
                                            />
                                                <Pagination {...paginationProps} className="pagination-common" total={tableData?.area_total_records} />
                                            </>,
                                        },
                                        {
                                            label: <div className="tab-title">
                                                <div className="title">停车场</div>
                                                <div className="btn">
                                                    <div onClick={() => {
                                                        message.success('升序');
                                                        setPageInfo({ ...pageInfo, ...{ pn: 1 } });
                                                        getData({ sort: 1 }, { pn: 1 })
                                                    }}>▲</div>
                                                    <div onClick={() => {
                                                        message.success('降序');
                                                        setPageInfo({ ...pageInfo, ...{ pn: 1 } });
                                                        getData({ sort: 2 }, { pn: 1 })
                                                    }}>▼</div>
                                                </div>
                                            </div>,
                                            key: '2',
                                            children: <><Table
                                                showHeader={false}
                                                columns={parkColumns}
                                                dataSource={tableData?.list?.road_list}
                                                rowKey={'area_name'}
                                                bordered
                                                pagination={false}
                                                size="middle"
                                            //scroll={{ y: 305 }}
                                            // scroll={{
                                            //     x: 'calc(700px + 50%)',
                                            //     y: 240,
                                            // }}
                                            />
                                                <Pagination {...paginationProps} className="pagination-common" total={tableData?.area_total_records} />
                                            </>,
                                        },
                                        {
                                            label: `泊位数（个）`,
                                            key: '3',
                                            disabled: "true"
                                        },
                                        {
                                            label: `利用率`,
                                            key: '4',
                                            disabled: "true"
                                        },
                                    ]}
                                />
                            </div>
                            <div className="result-box duration-right">
                                <div className="result-box-title">平均停车时长排行榜</div>
                                <div className="export-btn" onClick={() => { handleExportCar() }}>导出</div>
                                <Tabs
                                    defaultActiveKey="2"
                                    activeKey={tabCarKey}
                                    onChange={(key) => {
                                        setTabCarKey(key);
                                        setPageInfo({ ...pageInfo, ...{ pn: 1 } });
                                        getListData({}, { pn: 1 })
                                    }}
                                    items={[
                                        {
                                            label: `序号`,
                                            key: '0',
                                            disabled: "true"
                                        },
                                        {
                                            label: <div className="tab-title">
                                                <div className="title">区域</div>
                                                <div className="btn">
                                                    <div onClick={() => {
                                                        message.success('升序');
                                                        setPageInfo({ ...pageInfo, ...{ pn: 1 } });
                                                        getListData({ sort: 1 }, { pn: 1 })
                                                    }}>▲</div>
                                                    <div onClick={() => {
                                                        message.success('降序');
                                                        setPageInfo({ ...pageInfo, ...{ pn: 1 } });
                                                        getListData({ sort: 2 }, { pn: 1 })
                                                    }}>▼</div>
                                                </div>
                                            </div>,
                                            key: '1',
                                            children: <><Table
                                                showHeader={false}
                                                columns={columns1}
                                                dataSource={tableCarData?.list?.area_list || []}
                                                rowKey={'area_name'}
                                                bordered
                                                pagination={false}
                                                size="middle"
                                            />
                                                <Pagination {...paginationProps} className="pagination-common" total={tableData?.area_total_records} />
                                            </>,
                                        },
                                        {
                                            label: <div className="tab-title">
                                                <div className="title">停车场</div>
                                                <div className="btn">
                                                    <div onClick={() => {
                                                        message.success('升序');
                                                        setPageInfo({ ...pageInfo, ...{ pn: 1 } });
                                                        getListData({ sort: 1 }, { pn: 1 })
                                                    }}>▲</div>
                                                    <div onClick={() => {
                                                        message.success('降序');
                                                        setPageInfo({ ...pageInfo, ...{ pn: 1 } });
                                                        getListData({ sort: 2 }, { pn: 1 })
                                                    }}>▼</div>
                                                </div>
                                            </div>,
                                            key: '2',
                                            children: <><Table
                                                showHeader={false}
                                                columns={parkColumns1}
                                                dataSource={tableCarData?.list?.road_list}
                                                rowKey={'area_name'}
                                                bordered
                                                pagination={false}
                                                size="middle"
                                            //scroll={{ y: 305 }}
                                            // scroll={{
                                            //     x: 'calc(700px + 50%)',
                                            //     y: 240,
                                            // }}
                                            />
                                                <Pagination {...paginationProps} className="pagination-common" total={tableData?.area_total_records} />
                                            </>,
                                        },
                                        {
                                            label: `停车次数`,
                                            key: '3',
                                            disabled: "true"
                                        },
                                        {
                                            label: `平均停车时长`,
                                            key: '4',
                                            disabled: "true"
                                        },
                                    ]}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}

export default ParkingAlyDuration;