video-gen/video-gen-admin/src/pages/AdminPreTestTemplates.tsx

import React, { useEffect, useState } from 'react';
import { Button, Input, Select, Table, Pagination, Tag, Typography } from 'antd';
import { FileTextOutlined, SearchOutlined } from '@ant-design/icons';

const { Text } = Typography;

const AdminPreTestTemplates: React.FC = () => {
  const [tableData, setTableData] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [total, setTotal] = useState(0);
  const [searchPlatform, setSearchPlatform] = useState('');
  const [searchName, setSearchName] = useState('');

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 60,
      render: (text: number) => <span style={{ color: '#64748b' }}>{text}</span>,
    },
    {
      title: '模板名称',
      dataIndex: 'name',
      key: 'name',
      width: 200,
    },
    {
      title: '投放平台',
      dataIndex: 'platform',
      key: 'platform',
      width: 120,
      render: (text: string) => (
        <Tag color={text === 'AD' ? 'blue' : text === 'QIANCHUAN' ? 'green' : 'orange'}>
          {text === 'AD' ? 'AD' : text === 'QIANCHUAN' ? '千川' : '本地推'}
        </Tag>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (text: string) => (
        <Tag color={text === 'active' ? 'green' : 'red'}>
          {text === 'active' ? '启用' : '禁用'}
        </Tag>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
      width: 180,
      render: (text: string) => <span style={{ color: '#64748b' }}>{text}</span>,
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
      key: 'updatedAt',
      width: 180,
      render: (text: string) => <span style={{ color: '#64748b' }}>{text}</span>,
    },
  ];

  const loadRecords = async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams();
      params.set('page', String(currentPage));
      params.set('page_size', String(pageSize));
      if (searchPlatform) params.set('platform', searchPlatform);
      if (searchName) params.set('name', searchName);
      const mockData = {
        items: Array.from({ length: pageSize }, (_, i) => ({
          id: `${currentPage}-${i}`,
          index: (currentPage - 1) * pageSize + i + 1,
          name: `前测模板${(currentPage - 1) * pageSize + i + 1}`,
          platform: ['AD', 'QIANCHUAN', 'LOCAL'][i % 3],
          status: i % 5 === 0 ? 'inactive' : 'active',
          createdAt: '2026-07-01 10:00:00',
          updatedAt: '2026-07-02 14:30:00',
        })),
        total: 50,
      };
      setTableData(mockData.items);
      setTotal(mockData.total);
    } catch (error) {
      console.error('加载数据失败:', error);
    } finally {
      setLoading(false);
    }
  };

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

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

  const handleSearch = () => {
    setCurrentPage(1);
    loadRecords();
  };

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
        <FileTextOutlined style={{ color: '#6366f1', fontSize: 16 }} />
        <Text strong style={{ fontSize: 16 }}>素材前测模板</Text>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
          <Input
            placeholder="模板名称"
            value={searchName}
            onChange={(e) => setSearchName(e.target.value)}
            style={{ width: 180 }}
            allowClear
            onPressEnter={handleSearch}
          />
          <Select
            placeholder="投放平台"
            value={searchPlatform}
            onChange={(value) => setSearchPlatform(value)}
            style={{ width: 140 }}
            allowClear
            options={[
              { value: 'AD', label: 'AD' },
              { value: 'QIANCHUAN', label: '千川' },
              { value: 'LOCAL', label: '本地推' },
            ]}
          />
          <Button
            type="primary"
            onClick={handleSearch}
          >
            搜索
          </Button>
        </div>
      </div>
      <div style={{
        background: '#fff',
        borderRadius: 16,
        boxShadow: '0 4px 20px rgba(0,0,0,0.04)',
        overflow: 'hidden',
      }}>
        <Table
          dataSource={tableData}
          columns={columns}
          loading={loading}
          pagination={false}
          rowKey="id"
          bordered={false}
          scroll={{ x: 'max-content' }}
          onRow={() => ({
            style: {
              cursor: 'pointer',
              transition: 'background-color 0.15s',
            },
            onMouseEnter: (e: React.MouseEvent) => {
              (e.currentTarget as HTMLElement).style.backgroundColor = '#f8fafc';
            },
            onMouseLeave: (e: React.MouseEvent) => {
              (e.currentTarget as HTMLElement).style.backgroundColor = 'transparent';
            },
          })}
        />
        <div style={{ padding: '16px', textAlign: 'right' }}>
          <Pagination
            current={currentPage}
            pageSize={pageSize}
            total={total}
            showSizeChanger
            showTotal={(total) => `共 ${total} 条记录`}
            pageSizeOptions={['10', '20', '50', '100']}
            onChange={handlePageChange}
            size="small"
          />
        </div>
      </div>
    </div>
  );
};

export default AdminPreTestTemplates;