import {Button, Table} from "antd";
import {useEffect, useState} from "react";
import ModalHooks from "./components/publicOpinionModal.jsx";
import "./publicOpinion.scss";
import axios from "@/utils/axios.js";
import {useDispatch} from 'react-redux';
import {setDictData} from '@/store/reducer.js';

const {Column} = Table;

export default function PublicOpinion() {
    // 顶部两个搜索
    const [inputVal, setInputVal] = useState("");
    const [keyVal, setKeyVal] = useState("");
    // 页面数据
    const [data, setData] = useState([]);
    // 是否展示弹框
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [row, setRow] = useState({});

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

    // 关闭页面
    function closeModal() {
        setIsModalOpen(false);
        // 置空input，然后存reduce
        setInputVal('')
        setKeyVal('')
        getData()
        dispatch(setDictData(data))
    }

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

    }

    // reduce状态
    const dispatch = useDispatch();

    // 获取数据
    async function getData() {
        let {data} = await axios.get("/homePage/getBusWarning", {params: {type: inputVal, name: keyVal}});
        data.warningSummary = JSON.parse(data.warningSummary)

        for (const item of data.warningSummary) {

            data[Object.keys(item)[0]] = item[Object.keys(item)[0]]
        }
        console.log(data)
        setData([data]);

    }

    /**
     * 删除页面
     * @param data 删除每一条数据
     * @returns {Promise<void>}
     */
    async function deleteRow(data) {
        let {code} = await axios.get('/dict/deleteKey', {params: {id: data.id}})
        if (code === 200) {
            await getData()
        }
    }

    const columns = [
        {
            title: '报警总数',
            dataIndex: 'warningNum',
            key: 'id',
        },
        {
            title: '报警企业总数',
            dataIndex: 'companyNum',
            key: 'id',
        },
        {
            title: '待反馈数量',
            dataIndex: 'feedbackNum',
            key: 'id',
        },
        {
            title: '待解除数量',
            dataIndex: 'secureNum',
            key: 'id',
        },
        {
            title: '事故',
            dataIndex: 'accident',
            key: 'id',
        },
        {
            title: '舆情',
            dataIndex: 'sentiment',
            key: 'id',
        },
        {
            title: '高风险',
            dataIndex: 'risk',
            key: 'id',
        },
        {
            title: '汛情',
            dataIndex: 'flood',
            key: 'id',
        },
        {
            title: '网络检查',
            dataIndex: 'network',
            key: 'id',
        },
        {
            title: '火险',
            dataIndex: 'fire',
            key: 'id',
        },
        {
            title: '驾驶员报警',
            dataIndex: 'warning',
            key: 'id',
        },
        {
            title: '充电',
            dataIndex: 'charge',
            key: 'id',
        },
        {
            title: '电池高温',
            dataIndex: 'battery',
            key: 'id',
        },
        {
            title: '操作',
            render: (text, record) => (
                <div className="btn">
                    <Button type="primary" onClick={() => modify(record)}>
                        修改
                    </Button>

                </div>
            )
        },

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

            <Table
                dataSource={data}
                pagination={false}
                scroll={{y: 700}}
                bordered={true}
                rowKey="id"
                columns={columns}
                // expandable={{
                //     expandedRowRender,
                //
                // }}
            >
                <Column
                    title="操作"
                    width="170px"
                    dataIndex="id"
                    key="id"
                    render={(text, record) => (
                        <div className="btn">
                            <Button type="primary" onClick={() => modify(record)}>
                                修改
                            </Button>

                        </div>
                    )}
                />
            </Table>
            <ModalHooks
                isModalOpen={isModalOpen}
                closeModal={closeModal}
                row={row}
            ></ModalHooks>
        </div>
    );
}