Untitled

    import { ConfigProvider,Flex, Table } from "antd"

    import { forwardRef, useEffect, useState } from "react"

    // eslint-disable-next-line react/display-name
    const ChiTietKiemKeToPrint = forwardRef(({ data, items }, ref) => {
        const [dataSource, setDataSource] = useState([])

        useEffect(() => {
            if (data?.KiemKeTS?.length > 0 && data?.KiemKeTS) {
                setDataSource(data.KiemKeTS)
            }
        }, [data])
        const columns =
            data?.Loai === 1
                ? [
                    {
                        title: "Tên tài sản công cụ dụng cụ",
                        dataIndex: "Ten_Nhom_TS",
                        key: "Ten_Nhom_TS",
                        align: "center",
                    },

                    {
                        title: "Theo sổ kế toán",
                        align: "center",
                        children: [
                            {
                                align: "center",
                                title: "Số lượng",
                                dataIndex: "So_Luong_Ke_Toan",
                                key: "So_Luong_Ke_Toan",
                            },
                        ],
                    },
                    {
                        title: "Theo sổ kiểm kê",
                        align: "center",
                        children: [
                            {
                                align: "center",
                                title: "Số lượng",
                                //   dataIndex: "So_Luong_Thuc_Te",
                                key: "So_Luong_Thuc_Te",
                            },
                        ],
                    },

                    //   {
                    //       title: "Tỷ lệ %",
                    //       dataIndex: "Ty_Le",
                    //       key: "Ty_Le",
                    //   },

                    {
                        align: "center",
                        title: "Ghi chú",
                        //   dataIndex: "Ghi_Chu",
                        key: "Ghi_Chu",
                    },
                ]
                : [
                    {
                        align: "center",
                        title: "Tên thiết bị",
                        dataIndex: "Ten_Nhom_TS",
                        key: "Ten_Nhom_TS",
                    },

                    {
                        align: "center",
                        title: "Số lượng kiểm kê",
                        //   dataIndex: "So_Luong_Thuc_Te",
                        key: "So_Luong_Thuc_Te",
                    },

                    {
                        align: "center",
                        title: "Hư hỏng",
                        //   dataIndex: "Chat_Luong_Hong",
                        key: "Chat_Luong_Hong",
                    },
                    {
                        align: "center",
                        title: "Số lượng còn lại",
                        //   dataIndex: "So_Luong_Con_Lai",
                        key: "So_Luong_Con_Lai",
                    },

                    //   {
                    //       title: "Tỷ lệ %",
                    //       key: "Ty_Le",
                    //       editable: true,
                    //       align: "center",
                    //   },
                    {
                        align: "center",
                        title: "Ghi chú",
                        //   dataIndex: "Ghi_Chu",
                        key: "Ghi_Chu",
                    },
                ]
        return (
            <div
                ref={ref}
                className="print-source"
                style={{
                    zIndex: "-999",
                    position: "absolute",
                    width: "100%",
                    padding: 16,
                    margin: 0,
                    fontSize: "15.4px",
                    textColor: "black",
                    lineHeight: "2",
                    fontFamily: "Times New Roman, Times, serif",
                }}
            >
                <div className="fw-bold text-center" style={{ fontSize: "20px" }}>
                    BIÊN BẢN KIỂM KÊ CÔNG CỤ DỤNG CỤ
                </div>
                <div className="text-end">{`Số chứng từ: ${data?.So_Chung_Tu}`}</div>
                {/* <Descriptions column={2} items={items} /> */}
                <div> - Thời điểm kiểm kê: 00 giờ 00 ngày 21 tháng 4 năm 2022</div>
                <div>- Biên bản kiểm kê gồm:</div>
                <div
                    className="ms-2"
                    style={{
                        width: "100%",
                        wordWrap: "break-word",
                    }}
                >
                    + Ông bà:.................................................. Chức danh:...................... Đại
                    diện:..................................................
                </div>
                <div
                    className="ms-2"
                    style={{
                        width: "100%",
                        wordWrap: "break-word",
                    }}
                >
                    + Ông bà:.................................................. Chức danh:...................... Đại
                    diện:..................................................
                </div>
                <div
                    className="ms-2"
                    style={{
                        width: "100%",
                        wordWrap: "break-word",
                    }}
                >
                    + Ông bà:.................................................. Chức danh:...................... Đại
                    diện:..................................................
                </div>

                <div> Đã kiểm kê CCDC đến ngày 21 tháng 4 năm 2022, Kết quả như sau:</div>
                {/* <Divider /> */}
                {/* <ConfigProvider
                    theme={{
                        components: {
                            Table: {
                                headerBg: "#ffffff",
                                borderColor: "#000000",
                                headerSplitColor: "#000000",
                                headerBorderRadius: 0,
                            },
                        },
                        token: {
                            padding: 0,
                            borderRadius: 0,
                        },
                    }}
                >
                    <Table className="mb-2" dataSource={dataSource} columns={columns} pagination={false} bordered />
                </ConfigProvider> */}
                <table className="mb-2" style={{ width: "100%" }} border="1">
                    <thead>
                        <tr>
                            {columns.map((col) => (
                                <th
                                    key={col.key}
                                    style={{
                                        textAlign: col.align || "left",
                                        padding: "8px",
                                        border: "0.05rem solid #000000",
                                    }}
                                >
                                    {col.title}
                                </th>
                            ))}
                        </tr>
                    </thead>
                    <tbody>
                        {dataSource.map((row, rowIndex) => (
                            <tr key={rowIndex}>
                                {columns.map((col) => (
                                    <td
                                        key={col.key}
                                        style={{
                                            textAlign: col.align || "left",
                                            padding: "8px",
                                            border: "0.05rem solid #000000",
                                        }}
                                    >
                                        {col.dataIndex ? row[col.dataIndex] : ""}
                                    </td>
                                ))}
                            </tr>
                        ))}
                    </tbody>
                </table>

                <div>Kết luận sau kiểm kê:..........</div>

                <div className="px-5">
                    <Flex justify="flex-end">
                        <div className="text-center fst-italic">Ngày....... tháng........ năm.......</div>
                    </Flex>
                    <Flex justify="space-between" className="">
                        <div className="text-center">
                            <div className="fw-bold"> Giám đốc</div>
                            <div className="">(Ý kiến giải quyết số chênh lệch)</div>
                            <div className="fst-italic">(Ký, họ tên)</div>
                        </div>
                        <div className="text-center">
                            <div className="fw-bold">Kế toán trưởng</div>
                            <div className="fst-italic">(Ký, họ tên)</div>
                        </div>
                        <div className="text-center me-4">
                            <div className="fw-bold">Trưởng ban kiểm kê</div>
                            <div className="fst-italic">(Ký, họ tên)</div>
                        </div>
                    </Flex>
                </div>
            </div>
        )
    })

    export default ChiTietKiemKeToPrint