/* eslint-disable @typescript-eslint/no-use-before-define */
import { ERROR_CODE } from '@/constants/constants';
import { getImageList } from '@/services/terminal';
import { Input, message, Table, Tooltip } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useEffect, useState } from 'react';
import styles from './index.less';

interface TableProps {
  selectedRowKeys?: any[];
  onUserTableSelect?: (keys: any[], row: any[]) => void;
}

const TablePage: React.FC<TableProps> = ({
  onUserTableSelect,
  selectedRowKeys,
}) => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<any[]>([]);
  const [searchText, setSearchText] = useState<any>();
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(20);
  const [total, setTotal] = useState(0);

  useEffect(() => {
    loadImages();
  }, [searchText, currentPage, pageSize]);

  const loadImages = async () => {
    const params: any = {
      page_size: pageSize,
      page_num: currentPage,
    };
    if (searchText) {
      params.keywords = searchText;
    }
    setLoading(true);
    try {
      const imagesRes: any = await getImageList(params);
      console.log('imagesRes=========', imagesRes);
      const { code, data } = imagesRes || {};
      const { data: list = [], total = 0 } = data || {};
      if (code === ERROR_CODE) {
        setData(list);
        setTotal(total);
        setLoading(false);
      } else {
        message.error(imagesRes.message || '获取镜像列表失败');
        setLoading(false);
      }
    } catch (err) {
      message.error('获取镜像列表失败');
      setLoading(false);
    }
  };

  const columns: ColumnsType<any> = [
    {
      title: '序号',
      dataIndex: 'order',
      key: 'order',
      width: 80,
      render: (_: any, record: any, index: number) => <span>{index + 1}</span>,
    },
    {
      title: '镜像名称',
      dataIndex: 'image_name',
      ellipsis: true,
      render: (text) => {
        return <Tooltip title={text || '--'}>{text || '--'}</Tooltip>;
      },
    },
    {
      title: '源文件名',
      ellipsis: true,
      width: 300,
      dataIndex: 'image_file_name',
      render: (text) => {
        return <Tooltip title={text || '--'}>{text || '--'}</Tooltip>;
      },
    },
  ];

  const handleSearch = (value: string) => {
    setSearchText(value);
    setCurrentPage(1);
  };

  const handlePageChange = (page: number, size: number) => {
    setCurrentPage(page);
    setPageSize(size);
  };

  const handlePageSizeChange = (current: number, size: number) => {
    setCurrentPage(1);
    setPageSize(size);
  };

  return (
    <div className={styles.content_wrap}>
      <div className={styles.search_wrap}>
        <Input.Search
          placeholder="镜像名称..."
          onSearch={handleSearch}
          enterButton
          allowClear
          style={{ width: '300px', marginLeft: '10px' }}
        />
      </div>

      <Table
        columns={columns}
        dataSource={data}
        rowKey="id"
        loading={loading}
        rowSelection={{
          selectedRowKeys: selectedRowKeys,
          preserveSelectedRowKeys: true,
          onChange: onUserTableSelect,
        }}
        pagination={{
          current: currentPage,
          pageSize: pageSize,
          total: total,
          simple: true,
          onChange: handlePageChange,
          onShowSizeChange: handlePageSizeChange,
          showSizeChanger: false,
          showQuickJumper: false,
          pageSizeOptions: ['10', '20', '50', '100'],
        }}
        scroll={{ x: 'max-content', y: 300 }}
      />
    </div>
  );
};

export default TablePage;