import {Button, Table} from "antd";
import {useEffect, useState} from "react";
import ModalHooks from "./components/modal.jsx";
import "./informationOfFacilities.scss";
import axios from "@/utils/axios.js";

const {Column} = Table;

export default function InformationOfFacilities() {
    // 页面数据
    const [data, setData] = useState([]);
    // 是否展示弹框
    const [isModalOpen, setIsModalOpen] = useState(false);
    // 一行的数据

    const [row, setRow] = useState({});
    // 设置下拉框绑定的值
    const [val, setVal] = useState('')


    // 新增用户页面
    function addUser() {
        setRow([]);
        setIsModalOpen(true);
    }

    // 关闭页面
    function closeModal() {
        setIsModalOpen(false);
        getData()
    }

    // 点击修改的回调
    function modify(data) {
        setRow(data);
        setIsModalOpen(true);

    }


    // 获取数据
    async function getData() {

        let {data} = await axios.get("/facilityStatistics/getFacilityStatistics");

        setData(data);

    }

    // 设置类型文字
    function setType(text) {
        switch (text) {
            case 1:
                return "行驶中";
            case 2:
                return "维保";
            case 3:
                return "固定包车";
            case 4:
                return "临时包车";
            case 5:
                return "充电";
            case 6:
                return "公务";

        }
    }

    useEffect(() => {
        getData()
    }, [])
    return (
        <div className="passenger">
            <div className="top">

                <div className="button">
                    <Button type="primary" onClick={addUser}>
                        新增区域设施统计
                    </Button>
                </div>
            </div>
            <Table
                dataSource={data}
                bordered={true}
                rowKey="id"
                pagination={false}
            >
                <Column title="区域" dataIndex="area" key="id"></Column>
                <Column title="损坏数量" dataIndex="damageNum" key="id"></Column>
                <Column title="电子站牌" dataIndex="stationNum" key="id"></Column>
                <Column title="车辆" dataIndex="vehicleNum" key="id"></Column>
                <Column title="洗车机" dataIndex="carWasherNum" key="id"></Column>
                <Column title="充电桩" dataIndex="chargingStationNum" key="id"></Column>


                <Column
                    title="操作"
                    width="170px"
                    dataIndex="id"
                    key="id"
                    render={(text, record) => (
                        <div className="btn">
                            <Button type="primary" onClick={() => modify(record)}>
                                修改
                            </Button>
                            {/*<DeleteButton url='/editFacilityStatistics/delFacilityVehicleComponents' id={text}*/}
                            {/*              getData={getData}></DeleteButton>*/}
                        </div>
                    )}
                />
            </Table>
            <ModalHooks
                isModalOpen={isModalOpen}
                closeModal={closeModal}
                row={row}

                val={val}
            ></ModalHooks>
        </div>
    );
}