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

const {Column} = Table;

export default function LineFlowRanking() {
    // 页面数据
    const [data, setData] = useState([]);
    // 是否展示弹框
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [row, setRow] = useState([]);
    // 请求回来的数据
    const [resData, setResData] = useState({})


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

    /**
     * 子组件传过来的值
     * @param str 数据
     */
    async function submitValue(str) {
        const reqData = JSON.parse(JSON.stringify(resData))
        reqData.lineFlowRanking = str
        let {code} = await axios.post('/homePageEdit/editBusStatistics', reqData)
        if (code === 200) {
            closeModal()
        }
    }

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

    }

    // 设置单元格合并问题
    function setRowspan(_, index) {
        if (index === 0) {
            return {
                rowSpan: data.length,
            }
        } else {

            return {
                rowSpan: 0,
            }
        }
    }

    // 获取数据
    async function getData() {
        let {data} = await axios.get("/homePage/getBusStatistics");
        setResData(data)
        setData(JSON.parse(data.lineFlowRanking));
    }

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

            <Table
                dataSource={data}
                pagination={false}
                scroll={{y: 700}}
                bordered={true}
                rowKey="id"
            >
                <Column title="占比次数" dataIndex="name"/>
                <Column title="数值" dataIndex="value"/>

                <Column
                    title="操作"
                    width="170px"
                    dataIndex="id"
                    key="id"
                    onCell={setRowspan}
                    render={(text, record) => (
                        <div className="btn">
                            <Button type="primary" onClick={() => modify()}>
                                修改
                            </Button>

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