FE-DEVICE-SGW/src/pages/Trip/index.tsx

import { STATUS } from '@/constants/enums';
import { queryAlarms } from '@/services/controller/DeviceController';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import { useIntl, useModel } from '@umijs/max';
import { Flex, Grid, message, theme } from 'antd';
import { useEffect, useState } from 'react';
import { AlarmTable } from './components/AlarmTable';
import BadgeTripStatus from './components/BadgeTripStatus';
import CreateNewHaulOrTrip from './components/CreateNewHaulOrTrip';
import ListSkeleton from './components/ListSkeleton';
import MainTripBody from './components/MainTripBody';
import TripCancleOrFinishedButton from './components/TripCancelOrFinishButton';
const DetailTrip = () => {
  const intl = useIntl();
  const [showAlarmList, setShowAlarmList] = useState(true);
  const [isLoading, setIsLoading] = useState(false);
  const [alarmList, setAlarmList] = useState<API.Alarm[]>([]);
  const { token } = theme.useToken();
  const { data, getApi } = useModel('getTrip');
  const { useBreakpoint } = Grid;
  const screens = useBreakpoint();
  const queryDataSource = async (): Promise<API.AlarmResponse> => {
    try {
      setIsLoading(true);
      const resp: API.AlarmResponse = await queryAlarms();
      if (resp.alarms.length === 0) {
        setShowAlarmList(false);
      } else {
        setAlarmList(resp.alarms);
      }
      setIsLoading(false);
      return resp;
    } catch (error) {
      setIsLoading(false);
      setShowAlarmList(false);
      return { alarms: [], level: 0 };
    }
  };

  useEffect(() => {
    // fetchTrip();
    getApi();
    queryDataSource();
  }, []);

  return (
    // console.log('Rendering with tripInfo:', data),
    (
      <PageContainer
        header={{
          title: (
            <div style={{ marginLeft: screens.md ? '24px' : '10px' }}>
              {data
                ? data.name
                : intl.formatMessage({ id: 'trip.detail.defaultTitle' })}
            </div>
          ),
          tags: <BadgeTripStatus status={data?.trip_status || 0} />,
        }}
        content={null}
        loading={isLoading}
        ghost
        extra={[
          <CreateNewHaulOrTrip
            key={'lkadjaskd'}
            trips={data || undefined}
            onCallBack={async (success) => {
              switch (success) {
                case STATUS.CREATE_FISHING_LOG_SUCCESS:
                  message.success(
                    intl.formatMessage({ id: 'trip.detail.createHaulSuccess' }),
                  );
                  break;
                case STATUS.CREATE_FISHING_LOG_FAIL:
                  message.error(
                    intl.formatMessage({ id: 'trip.detail.createHaulError' }),
                  );
                  break;
                case STATUS.START_TRIP_SUCCESS:
                  message.success(
                    intl.formatMessage({ id: 'trip.detail.startTripSuccess' }),
                  );
                  break;
                case STATUS.START_TRIP_FAIL:
                  message.error(
                    intl.formatMessage({ id: 'trip.detail.startTripError' }),
                  );
                  break;
                case STATUS.UPDATE_FISHING_LOG_SUCCESS:
                  message.success(
                    intl.formatMessage({ id: 'trip.detail.updateHaulSuccess' }),
                  );
                  break;
                case STATUS.UPDATE_FISHING_LOG_FAIL:
                  message.error(
                    intl.formatMessage({ id: 'trip.detail.updateHaulError' }),
                  );
                  break;
                default:
                  break;
              }
            }}
          />,
        ]}
      >
        <ProCard
          // bordered={false}
          split={screens.lg ? 'vertical' : 'horizontal'}
          // style={{ backgroundColor: 'transparent' }}
        >
          {/* Bên trái */}
          {showAlarmList ? (
            <ProCard
              title={intl.formatMessage({
                id: 'trip.detail.alarm',
              })}
              colSpan={{ xs: 24, md: 24, lg: 5 }}
              bodyStyle={{ paddingInline: 0, paddingBlock: 0 }}
              bordered
            >
              {data ? (
                <AlarmTable alarmList={alarmList} isLoading={isLoading} />
              ) : (
                <ListSkeleton />
              )}
            </ProCard>
          ) : null}
          {/*  */}

          {/* Bên phải */}
          <ProCard
            colSpan={
              showAlarmList
                ? { xs: 24, md: 24, lg: 19 }
                : { xs: 24, md: 24, lg: 24 }
            }
            // bodyStyle={{ padding: 0 }}
            // style={{ backgroundColor: 'transparent' }}
          >
            <MainTripBody
              trip_id={data?.id}
              tripInfo={data || null}
            />
          </ProCard>
        </ProCard>
        <Flex
          style={{
            padding: 10,
            width: '100%',
            backgroundColor: token.colorBgContainer,
          }}
          justify="center"
          gap={10}
        >
          <TripCancleOrFinishedButton
            tripStatus={data?.trip_status}
            onCallBack={(value) => async () => {
              if (value) {
                // await fetchTrip();
                await queryDataSource();
              }
            }}
          />
        </Flex>
      </PageContainer>
    )
  );
};

export default DetailTrip;