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

interface TableProps {
  treeData?: User.OrganizationNode[];
  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 = await getImagesList(params);
      if (imagesRes.error_code === ERROR_CODE) {
        setData(imagesRes.data.data || []);
        setTotal(imagesRes.data.paging.total || 0);
        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',
      render: (text: any) => <span>{text || ''}</span>,
    },
    {
          title: '桌面类型',
          dataIndex: 'image_type',
          key: 'image_type',
          width: 200,
          render: (text: number) => {
            const key = text as keyof typeof IMAGES_TYPE_MAP;
            return <Tooltip>{IMAGES_TYPE_MAP[key] || '--'}</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: '200px', marginLeft: '10px' }}
        />
      </div>

      <Table
        columns={columns}
        dataSource={data}
        rowKey="id"
        loading={loading}
        rowSelection={{
          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;