text: import React, { useEffect, useState } from "react";
  import { CButton, CPagination } from "@coreui/react";
  
  import CustomerService from "../../services/customer.service";
  import moment from "moment";
  import "moment/locale/vi";
  
  import { useHistory, useLocation } from "react-router-dom";
  
  const Customer = () => {
    const [customer, setCustomer] = useState([]);
  
    const history = useHistory();
  
    //pagination
    const queryPage = useLocation().search.match(/page=([0-9]+)/, "");
    const currentPage = Number(queryPage && queryPage[1] ? queryPage[1] : 1);
    const [page, setPage] = useState(currentPage);
    const [pagination, setPagination] = useState(1);
    const pageChange = (newPage) => {
      currentPage !== newPage && history.push(`/customer?page=${newPage}`);
    };
  
    async function fetchData() {
      const { data, success, message, totalPage } =
        await CustomerService.getAllCustomer(page);
      if (success === true) {
        setCustomer(data);
        setPagination(totalPage);
      }
    }
    const goToRecord = (id) => {
      history.push(`/record/customer-record/${id}`);
    };
    const goToBooking = (id) => {
      history.push(`/customer/customer-booking/${id}`);
    };
    useEffect(() => {
      currentPage !== page && setPage(currentPage);
      fetchData();
    }, [currentPage, page]);
    return (
      <>
        <table className="table table-hover table-outline mb-0 d-none d-sm-table">
          <thead className="thead-light">
            <tr>
              <th>Khách hàng</th>
              <th>Địa chỉ</th>
              <th>Số điện thoại</th>
              <th>Giới tính</th>
              <th>Chức năng</th>
            </tr>
          </thead>
          <tbody>
            {!customer ? (
              <span>Chưa có dữ liệu</span>
            ) : (
              customer.map((item, index) => {
                return (
                  <tr key={index}>
                    <td>
                      <div>
                        <strong>{item.name}</strong>
                      </div>
                      <div className="small text-muted">
                        <span>
                          Ngày sinh {moment(item.dob).format("DD/MM/YYYY")}
                        </span>
                      </div>
                    </td>
                    <td className="col-6">
                      <div className="col-11 text-truncate text-left pl-0">
                        <span>{item.address}</span>
                      </div>
                    </td>
                    <td>
                      <span>{item.username}</span>
                    </td>
                    <td>
                      {item.gender === "male" && (
                        <span className="" style={{ color: "blue" }}>
                          Nam
                        </span>
                      )}
                      {item.gender === "female" && (
                        <span className="" style={{ color: "green" }}>
                          Nữ
                        </span>
                      )}
                    </td>
                    <td>
                      <div style={{ display: "flex", gap: 4 }}>
                        <CButton color="btn btn-facebook">Chi tiết</CButton>
                        <CButton
                          color="btn btn-xing"
                          onClick={() => {
                            goToRecord(item._id);
                          }}
                        >
                          Sổ khám bệnh
                        </CButton>
                        <CButton
                          color="btn btn-vimeo"
                          onClick={() => {
                            goToBooking(item._id);
                          }}
                        >
                          Lịch hẹn
                        </CButton>
                      </div>
                    </td>
                  </tr>
                );
              })
            )}
          </tbody>
        </table>
        <CPagination
          pages={pagination}
          size="md"
          align="center"
          activePage={page}
          onActivePageChange={pageChange}
          doubleArrows={false}
          style={{ marginTop: 10 }}
        />
      </>
    );
  };
  
  export default Customer;
  