import {Table, Button, Input, Popconfirm} from "antd";
import {useState, useEffect} from "react";
import ModalHooks from "./components/dictType.jsx";
import "./dict.scss";
import axios from "@/utils/axios.js";

const {Column} = Table;

export default function Dict() {
    const [inputVal, setInputVal] = useState("");
    // 页面数据
    const [data, setData] = useState([]);
    // 是否展示弹框
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [row, setRow] = 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("/sys/select");
        setData(data);
    }

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

    useEffect(() => {
        getData();
    }, []);
    return (
        <div className="user">
            <div className="top">
                <div className="input">
                    <Input
                        value={inputVal}
                        onChange={(e) => setInputVal(e.target.value)}
                    />{" "}
                    <Button type="primary">搜索</Button>
                </div>
                <div className="button">

                    <Button type="primary" onClick={addUser}>
                        添加字典数值
                    </Button>
                </div>
            </div>
            <Table
                dataSource={data}
                pagination={{position: ["bottomRight"]}}
                bordered={true}
                rowKey="id"
            >
                <Column title="用户名" dataIndex="account" key="id" width="200px"/>
                <Column title="姓名" dataIndex="name" key="id"/>
                <Column title="手机号" dataIndex="phone" key="id"/>
                <Column
                    title="类型"
                    dataIndex="type"
                    key="id"
                    render={(type) => (
                        <>
                            <span>{type === 0 ? "管理员" : "游客"}</span>
                        </>
                    )}
                ></Column>
                <Column title="备注" dataIndex="remark" key="id"/>
                <Column
                    title="操作"
                    width="170px"
                    dataIndex="id"
                    key="id"
                    render={(text, record) => (
                        <div className="btn">
                            <Button type="primary" onClick={() => modify(record)}>
                                修改
                            </Button>
                            <Popconfirm
                                title="删除数据"
                                description="是否删除本条数据?"
                                onConfirm={() => deleteRow(record)}
                                okText="删除"
                                cancelText="取消"
                            >
                                <Button type="primary" danger>
                                    删除
                                </Button>
                            </Popconfirm>
                        </div>
                    )}
                />
            </Table>
            <ModalHooks
                isModalOpen={isModalOpen}
                closeModal={closeModal}
                row={row}
            ></ModalHooks>
        </div>
    );
}