FE-DEVICE-SGW/src/pages/Trip/components/HaulTable.tsx

import { EditOutlined, EyeOutlined } from '@ant-design/icons';
import { ProColumns, ProTable } from '@ant-design/pro-components';
import { useIntl, useModel } from '@umijs/max';
import { Button, Flex, message } from 'antd';
import React, { useState } from 'react';
import CreateOrUpdateFishingLog from './CreateOrUpdateFishingLog';
import HaulFishList from './HaulFishList';

export interface HaulTableProps {
  hauls: API.FishingLog[];
  trip?: API.Trip;
  onReload?: (isTrue: boolean) => void;
}
const HaulTable: React.FC<HaulTableProps> = ({ hauls, trip, onReload }) => {
  const [editOpen, setEditOpen] = useState(false);
  const [editFishingLogOpen, setEditFishingLogOpen] = useState(false);
  const [currentRow, setCurrentRow] = useState<API.FishingLogInfo[]>([]);
  const [currentFishingLog, setCurrentFishingLog] =
    useState<API.FishingLog | null>(null);
  const intl = useIntl();
  const { getApi } = useModel('getTrip');
  console.log('HaulTable received hauls:', hauls);

  const fishing_logs_columns: ProColumns<API.FishingLog>[] = [
    {
      title: <div style={{ textAlign: 'center' }}>STT</div>,
      dataIndex: 'fishing_log_id',
      align: 'center',
      render: (_, __, index, action) => {
        return `Mẻ ${hauls.length - index}`;
      },
    },
    {
      title: <div style={{ textAlign: 'center' }}>Trạng Thái</div>,
      dataIndex: ['status'], // 👈 lấy từ status 1: đang
      align: 'center',
      valueEnum: {
        0: {
          text: intl.formatMessage({
            id: 'pages.trips.status.fishing',
            defaultMessage: 'Đang đánh bắt',
          }),
          status: 'Processing',
        },
        1: {
          text: intl.formatMessage({
            id: 'pages.trips.status.end_fishing',
            defaultMessage: 'Đã hoàn thành',
          }),
          status: 'Success',
        },
        2: {
          text: intl.formatMessage({
            id: 'pages.trips.status.cancel_fishing',
            defaultMessage: 'Đã huỷ',
          }),
          status: 'default',
        },
      },
    },
    {
      title: <div style={{ textAlign: 'center' }}>Thời tiết</div>,
      dataIndex: ['weather_description'], // 👈 lấy từ weather
      align: 'center',
    },
    {
      title: <div style={{ textAlign: 'center' }}>Thời điểm bắt đầu</div>,
      dataIndex: ['start_at'], // birth_date là date of birth
      align: 'center',
      render: (start_at: any) => {
        if (!start_at) return '-';
        const date = new Date(start_at);
        return date.toLocaleString('vi-VN', {
          day: '2-digit',
          month: '2-digit',
          year: 'numeric',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false,
        });
      },
    },
    {
      title: <div style={{ textAlign: 'center' }}>Thời điểm kết thúc</div>,
      dataIndex: ['end_at'], // birth_date là date of birth
      align: 'center',
      render: (end_at: any) => {
        // console.log('End at value:', end_at);
        if (end_at == '0001-01-01T00:00:00Z') return '-';
        const date = new Date(end_at);
        return date.toLocaleString('vi-VN', {
          day: '2-digit',
          month: '2-digit',
          year: 'numeric',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false,
        });
      },
    },
    {
      title: 'Thao tác',
      align: 'center',
      hideInSearch: true,
      render: (_, record) => {
        console.log('Rendering action column for record:', record);
        return (
          <Flex align="center" justify="center" gap={5}>
            {/* Nút Edit */}
            <Button
              shape="default"
              size="small"
              icon={<EyeOutlined />}
              onClick={() => {
                if (record.info) {
                  setCurrentRow(record.info!); // record là dòng hiện tại trong table
                  setEditOpen(true);
                } else {
                  message.warning('Không có dữ liệu cá trong mẻ lưới này');
                }
              }}
            />
            {editOpen && currentRow && (
              <HaulFishList
                fishList={currentRow} // truyền luôn cả record nếu cần
                open={editOpen}
                onOpenChange={setEditOpen}
              />
            )}
            <Button
              shape="default"
              size="small"
              icon={<EditOutlined />}
              onClick={() => {
                setCurrentFishingLog(record);
                setEditFishingLogOpen(true);
              }}
            />
          </Flex>
        );
      },
    },
  ];

  return (
    <>
      <ProTable<API.FishingLog>
        style={{ width: '90%' }}
        columns={fishing_logs_columns}
        dataSource={hauls.slice().reverse()} // đảo ngược thứ tự hiển thị
        search={false}
        pagination={{
          pageSize: 10,
          showSizeChanger: true,
          showTotal: (total, range) => `${range[0]}-${range[1]} trên ${total}`,
        }}
        options={false}
        bordered
        size="middle"
        scroll={{ x: 600 }}
      />
      <CreateOrUpdateFishingLog
        trip={trip!}
        isFinished={currentFishingLog?.status === 0 ? false : true}
        fishingLogs={currentFishingLog || undefined}
        isOpen={editFishingLogOpen}
        onOpenChange={setEditFishingLogOpen}
        onFinished={(success) => {
          if (success) {
            message.success('Cập nhật mẻ lưới thành công');
            getApi();
          } else {
            message.error('Cập nhật mẻ lưới thất bại');
          }
        }}
      />
    </>
  );
};

export default HaulTable;