Untitled

import { Button, Collapse, Descriptions, Flex, Result, Spin, Tabs, Tag, Tooltip } from "antd"
import React, { useEffect, useState } from "react"
import { ArrowLeftOutlined } from "@ant-design/icons"
import axios from "@/axios"
import Title from "@/components/Commons/Title"
import BreadcrumbItem from "@/components/Commons/Breadcrumb"
import withRouter from "@/components/Commons/withRouter"
import { apiKeHoachLuaChonNhaThauId } from "@/api/DuAn/KeHoachLuaChonNhaThau/apiKeHoachLuaChonNhaThau"
import HoSoTableExpand from "../Expand/QuanLyHoSo/HoSoTableExpand"
import moment from "moment"

const PageChiTietKHLCNT = (props) => {
    const { id, idDetail } = props.router.params
    const [loading, setLoading] = useState(false)
    const [error, setError] = useState(null)
    const [data, setData] = useState({})
    const [activeKeys] = useState(["1", "2", "3", "4", "5"])

    const itemsDescriptions = [
        {
            key: "2",
            label: <span className="text-dark">Giai đoạn</span>,
            children: <b>{data?.ten_giai_doan}</b>,
        },
        {
            key: "5",
            label: <span className="text-dark">Người thực hiện</span>,
            children: <b> {data?.created_user} </b>,
        },
        {
            key: "4",
            label: <span className="text-dark">Ghi chú</span>,
            children: <b> {data?.ghi_chu} </b>,
        },

        {
            key: "6",
            label: <span className="text-dark">Thời gian thực hiện</span>,
            children: (
                <b> {moment(data?.created_at ? data?.created_at : data?.updated_at).format("HH:mm DD/MM/YYYY")} </b>
            ),
        },
        {
            key: "3",
            label: <span className="text-dark">Tổng giá trị các phần công việc</span>,
            children: <b> {data?.tong_gia_tri} </b>,
        },
    ]

      const items = [
        {
            key: "1",
            label: <span className="fw-bold">Hồ sơ</span>,
            children: <HoSoTableExpand data={data} phan_loai_ho_so={"kh_lua_chon_nha_thau"} />,
        },
        {
            key: "2",
            label: <span className="fw-bold">Công việc</span>,
            children: <HoSoTableExpand data={data} phan_loai_ho_so={"kh_lua_chon_nha_thau"} />,
        },
        {
            key: "3",
            label: <span className="fw-bold">Gói thầu</span>,
            children: <HoSoTableExpand data={data} phan_loai_ho_so={"kh_lua_chon_nha_thau"} />,
        },
        {
            key: "4",
            label: <span className="fw-bold">Giao việc</span>,
            children: <HoSoTableExpand data={data} phan_loai_ho_so={"kh_lua_chon_nha_thau"} />,
        },
       
    ]
    const getItems = (text) => {
        if (text === "thong-tin-chung") {
            return [
                {
                    key: "1",
                    label: <h5>Thông tin chung</h5>,
                    children: <Descriptions items={itemsDescriptions} />,
                },
            ]
        }
        if (text === "ho-so") {
            return [
                {
                    key: "2",
                    label: <h5>Hồ sơ</h5>,
                    children: <HoSoTableExpand data={data} phan_loai_ho_so={"kh_lua_chon_nha_thau"} />,
                },
            ]
        }
        if (text === "goi-thau") {
            return [
                {
                    key: "3",
                    label: <h5>Gói thầu</h5>,
                    children: <HoSoTableExpand data={data} phan_loai_ho_so={"kh_lua_chon_nha_thau"} />,
                },
            ]
        }
        if (text === "cong-viec") {
            return [
                {
                    key: "4",
                    label: <h5>Công việc</h5>,
                    children: <HoSoTableExpand data={data} phan_loai_ho_so={"kh_lua_chon_nha_thau"} />,
                },
            ]
        }
        if (text === "giao-viec") {
            return [
                {
                    key: "5",
                    label: <h5>Giao việc</h5>,
                    children: text,
                },
            ]
        }
        // Nếu không có điều kiện nào thỏa mãn, trả về mảng rỗng
        return []
    }

    const onLoadData = () => {
        setLoading(true)
        axios
            .get(apiKeHoachLuaChonNhaThauId(id, idDetail))
            .then((response) => {
                setData(response.data)
            })
            .catch((error) => {
                setError(error)
            })
            .finally(() => {
                setLoading(false)
            })
    }

    useEffect(() => {
        onLoadData()
    }, [idDetail, id])

    return (
        <React.Fragment>
            {error ? (
                <Result status="404" title="404" subTitle="Trang bạn đang tìm không tồn tại hoặc đã bị xóa." />
            ) : (
                <>
                    <Title>Danh sách dự án</Title>
                    <BreadcrumbItem
                        title="Dự án"
                        breadcrumbItem={"Thông tin chi tiết"}
                        breadcrumbSubItem={"kế hoạch lựa chọn nhà thầu"}
                    />
                    <Spin spinning={loading} tip="Đang xử lý...">
                        <div className="content">
                            <div className="bg-white rounded-top p-3 ">
                                <Flex justify="flex-start">
                                    <Tooltip title="Quay lại trang thông tin">
                                        <Button
                                            href={`/DuAn/ThongTinChiTietDuAn/${id}/KeHoach`}
                                            type="primary"
                                            icon={<ArrowLeftOutlined />}
                                        ></Button>
                                    </Tooltip>
                                </Flex>
                                <div>
                                    <h3 className="text-start mt-2">Dự án : {data?.ten_du_an}</h3>
                                    <Descriptions
                                        title={<span className="fs-5">Thông tin chung </span>}
                                        items={itemsDescriptions}
                                        column={2}
                                    />
                                    <Tabs
                                        type="card"
                                        items={items}
                                        className="border-bottom mb-3 mt-2 bg-white"
                                    />
                                </div>
                            </div>
                            {/* <Collapse
                                className="bg-white rounded-0 bordered-bottom"
                                bordered={false}
                                defaultActiveKey={activeKeys}
                                items={getItems("ho-so")}
                            />
                            <Collapse
                                className="bg-white rounded-0"
                                bordered={false}
                                defaultActiveKey={activeKeys}
                                items={getItems("goi-thau")}
                            />
                            <Collapse
                                className="bg-white rounded-0"
                                bordered={false}
                                defaultActiveKey={activeKeys}
                                items={getItems("cong-viec")}
                            />
                            <Collapse
                                className="bg-white rounded-0"
                                bordered={false}
                                defaultActiveKey={activeKeys}
                                items={getItems("giao-viec")}
                            /> */}
                            {/* hồ sơ */}
                        </div>
                    </Spin>
                </>
            )}
        </React.Fragment>
    )
}

export default withRouter(PageChiTietKHLCNT)