contentCooper/src/views/publishContent/weCom/index.tsx

import React, { useState } from 'react';
import { Space, Table, Button, Input, Select, Tabs } from 'antd';
import type { TableProps } from 'antd';
import styles from './index.module.css';
import PunlishPlanModal from '../weGZH/components/publishPlanModal';
import { wxPlanType } from './type';

const WeGZHContent: React.FC = () => {
	// 状态管理
	const [videoTitle, setVideoTitle] = useState<string>('');
	const [selectedPublisher, setSelectedPublisher] = useState<string>();
	const [isShowAddPunlishPlan, setIsShowAddPunlishPlan] = useState<boolean>(false);
	const [actionType, setActionType] = useState<'add' | 'edit'>('add');
	const [editPlanData, setEditPlanData] = useState<wxPlanType>();
	const [activeKey, setActiveKey] = useState<string>('1');

	// 表格列配置
	const columns: TableProps<wxPlanType>['columns'] = [
		{
			title: '公众号名称',
			dataIndex: 'officialAccount',
			key: 'officialAccount',
		},
		{
			title: '场景',
			dataIndex: 'scene',
			key: 'scene',
		},
		{
			title: '视频数量',
			dataIndex: 'videoCount',
			key: 'videoCount',
		},
		{
			title: '视频标题',
			dataIndex: 'videoTitle',
			key: 'videoTitle',
			ellipsis: true,
		},
		{
			title: '计划创建时间',
			dataIndex: 'planPublishTime',
			key: 'planPublishTime',
		},
		{
			title: '发布方',
			dataIndex: 'publisher',
			key: 'publisher',
		},
		{
			title: '操作',
			key: 'action',
			render: (_, record) => (
				<Space size="middle">
					<Button type="link" onClick={() => editPlan(record)}>编辑</Button>
					<Button type="link">详情</Button>
				</Space>
			),
		},
	];

	const editPlan = (record: wxPlanType) => {
		console.log(editPlanData)
		setEditPlanData(record);
		setActionType('edit');
		setIsShowAddPunlishPlan(true);
	};

	// 模拟数据
	const data: wxPlanType[] = [
		{
			officialAccount: '小慧爱厨房',
			scene: 1,
			videoCount: 3,
			videoTitle: '养老金最新规定，快来看看...',
			planPublishTime: '2024-08-13 13:32:07',
			publisher: '平台发布',
			videoList: [],
		},
		{
			officialAccount: '小阳看天下',
			scene: 1,
			videoCount: 1,
			videoTitle: '养老金最新规定，快来看看...',
			planPublishTime: '2024-08-13 13:32:07',
			publisher: '用户发布',
			videoList: [],
		},
	];

	const addPunlishPlan = () => {
		setActionType('add');
		setIsShowAddPunlishPlan(true);
	}

	return (
		<div>
			<div className="rounded-lg">
				<div className="text-lg font-medium mb-3">公众号内容</div>
				
				{/* 搜索区域 */}
				<div className="flex flex-wrap gap-4 mb-3">

					<div className="flex items-center gap-2">
						<span className="text-gray-600">视频标题:</span>
						<Input
							placeholder="搜索视频标题"
							style={{ width: 200 }}
							value={videoTitle}
							allowClear
							onChange={e => setVideoTitle(e.target.value)}
						/>
					</div>

					<div className="flex items-center gap-2">
						<span className="text-gray-600">发布方:</span>
						<Select
							placeholder="筛选场景"
							style={{ width: 200 }}
							value={selectedPublisher}
							onChange={setSelectedPublisher}
							allowClear
							options={[
								{ label: '关注回复', value: 'platform' },
								{ label: '用户发布', value: 'user' },
							]}
						/>
					</div>

					<Button type="primary" className="ml-2">搜索</Button>
				</div>
				<Tabs
					defaultActiveKey="1"
					type="card"
					size="large"
					items={[
						{ label: '每日推送', key: '1' },
						{ label: '自动回复', key: '2' },
					]}
					activeKey={activeKey}
					onChange={setActiveKey}
					tabBarExtraContent={
						{ right: <Button type="primary" onClick={addPunlishPlan}>+ 创建发布</Button> }}
				/>		
				{/* 表格区域 */}
				{ 
					activeKey === '1' && (
						<Table
							rowKey={(record) => record.officialAccount}
							className={styles.antTable}
							columns={columns}
							dataSource={data}
							pagination={{
								total: data.length,
								pageSize: 10,
								showTotal: (total) => `共 ${total} 条`,
							}}
						/>
					)
				}
				{ 
					activeKey === '2' && (
						<Table
							rowKey={(record) => record.officialAccount}
							className={styles.antTable}
							columns={columns}
							dataSource={data}
							pagination={{
								total: data.length,
								pageSize: 10,
								showTotal: (total) => `共 ${total} 条`,
							}}
						/>
					)
				}
				<PunlishPlanModal
					visible={isShowAddPunlishPlan}
					onCancel={() => setIsShowAddPunlishPlan(false)}
					onOk={() => setIsShowAddPunlishPlan(false)}
					actionType={actionType}
					editPlanData={undefined}
				/>
			</div>
		</div>
	);
};

export default WeGZHContent;