import { Button, Select, Table } from "antd"
import { StaffDto } from "@nice/common";
import { useStaff, api } from "@nice/client";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import React from "react";
import { useMainContext } from "../../layout/MainProvider";

export default function StaffTable() {
    const{form, setVisible,searchValue} = useMainContext()
    
    const { data: staffs, isLoading } = api.staff.findMany.useQuery({
        where: {
            username: {
                contains: searchValue
            }
        }
    });
    const { create, update } = useStaff();
    const {editingRecord, setEditingRecord} = useMainContext();
    const colnums = [
        {
            title: "姓名",
            dataIndex: "username",
            key: "username",
        },
        {
            title: "部门",
            dataIndex: "deptId",
            key: "deptId",
        },
        {
            title: "职务",
            dataIndex: "position",
            key: "position",
        },
        {
            title: "在位",
            dataIndex: "absent",
            key: "absent",
            render: (_, record) => (
                <Select
                    // defaultValue={record.absent ? "是" : "否"}
                    style={{ width: 120 }}
                    onChange={async (value) => {
                        try {
                            await update.mutateAsync({
                                where: { id: record.id },
                                data: { absent: value }
                            });
                            toast.success("状态更新成功");
                        } catch (error) {
                            toast.error("状态更新失败");
                        }
                    }}
                >
                    <Select.Option value="是">是</Select.Option>
                    <Select.Option value="否">否</Select.Option>
                </Select>
            )
        },
        {
            title: "应时",
            dataIndex: "trainSituation",
            key: "trainSituation",
        },
        {
            title: "操作",
            key: "action",
            render: (_, record) => (
                <Button
                    type="primary"
                    key={record.id}
                    onClick={() => handleEdit(record)}>编辑</Button>
            ),
        }
    ];
    useEffect(() => {
        if (editingRecord) {
          form.setFieldsValue(editingRecord);
          console.log(editingRecord);
        }
      }, [editingRecord]);
    const handleEdit = (record) => {
        setEditingRecord(record);
        form.setFieldsValue(editingRecord);
        setVisible(true);
      };
    return (
        <>
            {
                isLoading ? (<div>加载中...</div>) :
                    (
                        <Table
                            key={"username"}
                            columns={colnums}
                            dataSource={staffs}
                            className="table-auto w-full border-collapse border border-gray-300"
                            tableLayout="fixed"
                            pagination={{
                                position: ["bottomCenter"],
                                className: "flex justify-center mt-4",
                                pageSize: 12,

                            }}
                            onRow={(record) => ({
                                onMouseEnter: () => {
                                    const row = document.querySelector(`tr[data-row-key="${record.id}"]`);
                                    if (row) {
                                        row.classList.add("bg-gray-100");
                                    }
                                },
                                onMouseLeave: () => {
                                    const row = document.querySelector(`tr[data-row-key="${record.id}"]`);
                                    if (row) {
                                        row.classList.remove("bg-gray-100");
                                    }
                                },
                            })}
                        >
                            <thead className="bg-gray-200">
                                <tr>
                                    {colnums.map((column) => (
                                        <th
                                            key={column.key}
                                            className="px-4 py-2 border border-gray-300 text-center font-bold"
                                        >
                                            {column.title}
                                        </th>
                                    ))}
                                </tr>
                            </thead>
                            <tbody>
                                {staffs?.map((record) => (
                                    <tr
                                        key={record.id}
                                        className="border border-gray-300"
                                    >
                                        {colnums.map((column) => (
                                            <td
                                                key={column.key}
                                                className="px-4 py-2 border border-gray-300 text-center"
                                            >
                                                {column.render?.(record[column.dataIndex], record) || record[column.dataIndex]}
                                            </td>
                                        ))}
                                    </tr>
                                ))}
                            </tbody>
                        </Table>
                    )
            }
        </>
    );


}