import {
  MyBetaModalFormProps,
  MyButtons,
  MyColumns,
  MyProTableProps,
} from '@/common';
import { Apis } from '@/gen/Apis';
import { ProTable } from '@ant-design/pro-components';
import { useNavigate } from '@umijs/max';
import { Space } from 'antd';

import {
  HouseMetersMeterTypeEnum,
  HouseMetersUsageTypeEnum,
} from '@/gen/Enums';

import dayjs from 'dayjs';

export default function Index(props: MyBetaModalFormProps) {
  const navigate = useNavigate();
  const { item } = props;
  if (!item) {
    return null;
  }

  return (
    <ProTable
      {...MyProTableProps.props}
      headerTitle="房屋关联仪表"
      request={async (params, sort) =>
        MyProTableProps.request(
          {
            ...params,
            asset_houses_id: item.id,
          },
          sort,
          Apis.Meter.HouseMeters.List,
        )
      }
      // options={false}
      search={false}
      columns={[
        MyColumns.ID({
          search: false,
        }),
        {
          title: '仪表编号',
          dataIndex: 'name',
        },
        MyColumns.EnumTag({
          title: '仪表类型',
          dataIndex: 'meter_type',
          valueEnum: HouseMetersMeterTypeEnum,
          // search: false,
        }),
        MyColumns.EnumTag({
          title: '使用类型',
          dataIndex: 'usage_type',
          valueEnum: HouseMetersUsageTypeEnum,
          // search: false,
        }),
        {
          title: '最新抄表读数',
          dataIndex: 'latest_value',
          search: false,
        },
        {
          title: '最新抄表日期',
          dataIndex: 'latest_time',
          search: false,
          render: (renderValue: any) =>
            renderValue ? dayjs(renderValue).format('YYYY-MM-DD') : '-',
        },
        {
          title: '距离上次抄表',
          dataIndex: 'latest_time',
          search: false,
          render: (renderValue: any) =>
            renderValue ? dayjs().diff(renderValue, 'day') : '-',
        },
        MyColumns.Option({
          render: (_, item: any, index) => (
            <Space key={index}>
              <MyButtons.View
                title="查看"
                onClick={() => {
                  navigate(`/meter/readings/show/${item.id}`);
                }}
              />
            </Space>
          ),
        }),
      ]}
    />
  );
}
