import React, { useState, useEffect } from "react";
import { ResultFlowResult } from "@/components";
import { Select, Input, Button, Table, message, Pagination, DatePicker, Modal, Cascader, Tooltip } from "antd";
import { Icon } from "@/components"
import { useSessionStorageState } from "ahooks";
import { lineChartOption, ringChartOption } from "../echarts.config";
import moment from "moment";
import ReactEcharts from "echarts-for-react";
import "./index.scss";
import ajax from "@/services";
//停车时段分析
function ParkingAlyPeriod() {
    // session缓存
    const [defaultParams, setDefaultParams] = useSessionStorageState(
        "formData_parkingAlyPeriod",
        { 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',
    };
    // 分页数据
    const [pageInfo, setPageInfo] = useState({
        pn: defaultParams ? defaultParams?.pn : 1,
        page_size: defaultParams ? defaultParams?.page_size : 15,
    });
    // 表单数据
    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 [revenueData, setRevenueData] = useState({});
    //停车饱和度趋势分析
    const [parkData, setParkData] = useState({});
    const [searchSelectList, setSearchSelectList] = useState([]); //搜索下拉数据
    const [sessionTabList, setSessionTabList] = useSessionStorageState('parkingAlyPeriod', {
        value: {
        }
    })
    useEffect(() => {
        if (sessionTabList && Object.values(sessionTabList).length > 0) {
            setFormData({
                ...formData, ...sessionTabList
            })
            getCheck({
                ...sessionTabList
            })
        } else {
            getCheck()
        }
    }, [isAjax])
    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) => {
        const areaNames = data[0].name ? [...new Set(data.map((item) => item.name))] : ['入场车次', '出场车次'];
        // 获取所有横坐标
        const dates = [...new Set(data.map((item) => item.hour))].sort(
            (a, b) => a.hour - b.hour
        );
        // 构建数据对象
        const seriesData = areaNames.map((areaName, index) => {
            // 获取数据
            const areaData = data[0].name ? data.filter((item) => item.name === areaName) : data
            // 构建数据对象
            return {
                name: areaNames.length > 1 ? areaName : '',
                type: "line",
                itemStyle: {
                    label: {
                        show: true, //开启显示
                        position: 'top', //在上方显示
                        color: 'white',//字体颜色
                        fontSize: 10//字体大小
                    },
                },
                data: dates.map((item) => {
                    for (const { hour, total_in_records, total_out_records } of areaData) {
                        if (hour === item) return index == 1 ? total_in_records : total_out_records;
                    }
                    return 0;
                }),
            };
        });
        // 构建X轴数据
        const xAxisData = dates.map((date) => {
            return {
                value: date,
                align: "center",
                lineStyle: {
                    color: "skyblue", // 设置线的颜色为天蓝色
                    shadowBlur: 6,
                },

            };
        });
        setRevenueData(lineChartOption(areaNames, xAxisData, "车次数（个）", seriesData));
    };
    //停车饱和趋势分析分析 折线图
    const getParkOption = (data) => {
        // data = [
        //     {
        //         "hour": 0,
        //         "occupancy_rate": "0.01%",
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 1,
        //         "occupancy_rate": 0,
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 2,
        //         "occupancy_rate": 0,
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 3,
        //         "occupancy_rate": 0,
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 4,
        //         "occupancy_rate": 0,
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 5,
        //         "occupancy_rate": 0,
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 6,
        //         "occupancy_rate": 0,
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 7,
        //         "occupancy_rate": 0,
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 8,
        //         "occupancy_rate": 0,
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 9,
        //         "occupancy_rate": "0.1%",
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 10,
        //         "occupancy_rate": "0.01%",
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 11,
        //         "occupancy_rate": "0.04%",
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 12,
        //         "occupancy_rate": "0.06%",
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 13,
        //         "occupancy_rate": "0.04%",
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 14,
        //         "occupancy_rate": "0.06%",
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 15,
        //         "occupancy_rate": "0.01%",
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 16,
        //         "occupancy_rate": "0.04%",
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 17,
        //         "occupancy_rate": "0.04%",
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 18,
        //         "occupancy_rate": "0.07%",
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 19,
        //         "occupancy_rate": 0,
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 20,
        //         "occupancy_rate": 0,
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 21,
        //         "occupancy_rate": "0.01%",
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 22,
        //         "occupancy_rate": 0,
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     },
        //     {
        //         "hour": 23,
        //         "occupancy_rate": 0,
        //         "charge_type": "2",
        //         "charge_type_name": "二类区"
        //     }
        // ]
        const areaNames = data[0].charge_type_name ? [...new Set(data.map((item) => item.charge_type_name))] : [''];
        // 获取所有横坐标
        const dates = [...new Set(data.map((item) => item.hour))].sort(
            (a, b) => a.hour - b.hour
        );
        // 构建数据对象
        const seriesData = areaNames.map((areaName, index) => {
            // 获取数据
            const areaData = data[0].charge_type_name ? data.filter((item) => item.charge_type_name === areaName) : data
            // 构建数据对象
            return {
                name: areaName,
                type: "line",
                itemStyle: {
                    label: {
                        show: true, //开启显示
                        position: 'top', //在上方显示
                        color: 'white',//字体颜色
                        fontSize: 10//字体大小
                    },
                },
                data: dates.map((item) => {
                    for (const { hour, occupancy_rate } of areaData) {
                        if (hour === item) return parseFloat(occupancy_rate);
                    }
                    return 0;
                }),
            };
        });
        // 构建X轴数据
        const xAxisData = dates.map((date) => {
            return {
                value: date,
                align: "center",
                lineStyle: {
                    color: "skyblue", // 设置线的颜色为天蓝色
                    shadowBlur: 6,
                },

            };
        });

        setParkData(lineChartOption(areaNames, xAxisData, "饱和度", seriesData));
    };

    function getParkingIncome(data) {
        ajax
            .getParkingAlyPeriodLine(data)
            .then((res) => {
                if (res.status === 20000) {
                    getRevenueOption(res.data.list);
                    setResultData(res.data)
                }
            })
            .catch((err) => console.error(err));
    }
    function getParkingData(data) {
        ajax
            .getParkingAlyPeriodParkLine(data)
            .then((res) => {
                if (res.status === 20000) {
                    getParkOption(res.data.list);
                }
            })
            .catch((err) => console.error(err));
    }
    // 获取下拉数据
    const getSelectList = () => {
        ajax.getOperator().then((e) => {
            setSearchSelectList([
                ...searchSelectList,
                ...e.data
            ])
        })
    };


    // 携带参数处理
    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
        }
        setLoading(false);
        setTabLoading(false);
        let params = { ...postData, ...v, ...pageInfo }
        //请求接口
        getParkingIncome(params)
        getParkingData(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("暂无数据");
        }
    };
    // useEffect(() => {
    //     getParkingIncome();
    // }, []);
    //区域下拉框数据
    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.area_id}
                                onChange={(v, option) => {
                                    setFormData({ ...formData, area_id: 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 period-result">
                    <div className="result">
                        <div className="result-hd">
                            <div className="result-header rea">
                                <div className="result-icon"><Icon type="shijian" /></div>
                                <div className="result-content">
                                    <div className="title">停车高峰时段</div>
                                    <div className="time">{resultData.peak_hours || "--"}</div>
                                </div>
                            </div>
                            <div className="result-header reb">
                                <div className="result-icon"><Icon type="shijian" /></div>
                                <div className="result-content">
                                    <div className="title">入场压力时段</div>
                                    <div className="time">{resultData.entry_pressure_hours || "--"}</div>
                                </div>
                            </div>
                            <div className="result-header rec">
                                <div className="result-icon"><Icon type="shijian" /></div>
                                <div className="result-content">
                                    <div className="title">出场压力时段</div>
                                    <div className="time">{resultData.exit_pressure_hours || "--"}</div>
                                </div>
                            </div>
                        </div>
                        <div className="result-box">
                            <div className="result-box-title">出入场车流量分析</div>
                            <Tooltip
                                placement="topLeft"
                                title={<span>展示所选日期内各时段的车辆出入场数量，用来分析一天内入场车流量与出场车流量的变化情况</span>}
                            >
                                <i>?</i>
                            </Tooltip>
                            <ReactEcharts
                                option={revenueData}
                                style={{ height: "300px", width: "100%", overflow: "hidden" }}
                            />
                        </div>
                        <div className="result-box">
                            <div className="result-box-title">停车饱和度趋势分析</div>
                            <Tooltip
                                placement="topLeft"
                                title={<span>展示所选日期内各个时间段的停车场饱和度变化情况，用来分析停车高峰与低谷时段，入场与出场压力较大的时段</span>}
                            >
                                <i>?</i>
                            </Tooltip>
                            <div className="bhd-select">
                                <Select
                                    className="form-con"
                                    placeholder="请选择"
                                    defaultValue={'0'}
                                    options={[
                                        {
                                            label: '按时间对比',
                                            value: '0',
                                        },
                                        {
                                            label: '按计费类型对比',
                                            value: '1',
                                        },
                                    ]}
                                    value={formData.pay_me}
                                    onChange={(v) =>
                                        setFormData({ ...formData, pay_me: v })
                                    }
                                />
                            </div>
                            <ReactEcharts
                                option={parkData}
                                style={{ height: "300px", width: "100%", overflow: "hidden" }}
                            />
                        </div>

                    </div>
                </div>
            </div>
        </>
    );
}

export default ParkingAlyPeriod;