contentCooper/src/views/publishContent/weGZH/components/videoSelectModal/index.tsx

import React, { useState, useEffect } from 'react';
import {
	Drawer,
	Button,
	Select,
	Input,
	Card,
	Typography,
	Pagination,
	Space,
	message,
	Modal,
} from 'antd';
import { CheckCircleFilled, CaretRightFilled } from '@ant-design/icons';
import { VideoItem, VideoListResponse } from '../types';
import http from '@src/http';
import { getVideoContentListApi } from '@src/http/api';
import { useVideoCategoryOptions } from '../../hooks/useVideoCategoryOptions';
import { VideoSortType } from '@src/views/publishContent/weCom/components/videoSelectModal';
import { GzhPlanType } from '../../hooks/useGzhPlanList';
import { VideoSearchPlanType } from '@src/views/publishContent/weCom/type';
import { enumToOptions } from '@src/utils/helper';

const { Paragraph, Text } = Typography;

interface VideoSelectModalProps {
	planType: GzhPlanType;
	visible: boolean;
	onClose: () => void;
	onOk: (selectedVideos: VideoItem[]) => void;
	initialSelectedIds?: number[];
	selectedVideos?: VideoItem[];
}

const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ planType, visible, onClose, onOk, initialSelectedIds = [], selectedVideos = [] }) => {
	const { videoCategoryOptions } = useVideoCategoryOptions();
	const [category, setCategory] = useState<string>();
	const [sort, setSort] = useState<VideoSortType>(VideoSortType.平台推荐);
	const [searchTerm, setSearchTerm] = useState<string>('');
	const [currentPage, setCurrentPage] = useState(1);
	const [pageSize, setPageSize] = useState(10);
	const [total, setTotal] = useState(0);
	const [loading, setLoading] = useState(false);
	const [videoList, setVideoList] = useState<VideoItem[]>([]);
	const [videoListAll, setVideoListAll] = useState<VideoItem[]>([]);
	const [selectedVideoIds, setSelectedVideoIds] = useState<Set<number>>(new Set(initialSelectedIds));
	const [playingVideo, setPlayingVideo] = useState<VideoItem | null>(null);
	const MAX_SELECTION = 3;

	const getVideoListType = (planType: GzhPlanType) => {
		if (planType === GzhPlanType.自动回复) {
			return VideoSearchPlanType.自动回复;
		} else if (planType === GzhPlanType.公众号推送) {
			return VideoSearchPlanType.公众号推送;
		} else {
			return VideoSearchPlanType.服务号推送;
		}
	}

	const getVideoList = async (pageNum?: number, _pageSize?: number) => {
		setLoading(true);
		setCurrentPage(pageNum || currentPage);
		setPageSize(_pageSize || pageSize);
		const res = await http.post<VideoListResponse>(getVideoContentListApi, {
			category,
			title: searchTerm,
			sort,
			type: getVideoListType(planType),
			pageNum: pageNum || currentPage,
			pageSize: _pageSize || pageSize,
		}).catch(() => {
			message.error('获取视频列表失败');
		}).finally(() => {
			setLoading(false);
		});
		if (res && res.code === 0) {
			setVideoList([...selectedVideos, ...res.data.objs.filter(v => !selectedVideos.find(ov => ov.videoId === v.videoId))]);
			setVideoListAll(old => [...old, ...res.data.objs.filter(v => !old.find(ov => ov.videoId === v.videoId))]);
			setTotal(res.data.totalSize);
		}
	}

	useEffect(() => {
		if (visible) {
			setVideoList(selectedVideos);
			setVideoListAll(selectedVideos);
			getVideoList(0);
		}
	}, [visible]);

	useEffect(() => {
		if (visible) {
			setSelectedVideoIds(new Set(initialSelectedIds));
		}
	}, [visible, initialSelectedIds]);

	const handleSearch = () => {
		console.log('Searching for:', { category, searchTerm });
		const currentPage = 1
		setCurrentPage(currentPage);
		getVideoList(currentPage);
	};

	const handleSelectVideo = (videoId: number) => {
		setSelectedVideoIds(prev => {
			const newSet = new Set(prev);
			if (newSet.has(videoId)) {
				newSet.delete(videoId);
			} else {
				if (newSet.size >= MAX_SELECTION) {
					message.warning(`最多只能选择 ${MAX_SELECTION} 条视频`);
					return prev;
				}
				newSet.add(videoId);
			}
			return newSet;
		});
	};

	const handleOk = () => {
		const _selectedVideos = videoListAll.filter(video => selectedVideoIds.has(video.videoId));
		onOk(_selectedVideos);
		onClose();
	};

	const playVideo = (video: VideoItem) => {
		setPlayingVideo(video);
	};

	const closeVideoPlayer = () => {
		setPlayingVideo(null);
	};

	return (
		<>
			<Drawer
				title="内容选取"
				open={visible}
				onClose={onClose}
				width={800}
				placement="right"
				loading={loading}
				styles={{ footer: { textAlign: 'right', padding: '10px 24px' } }}
				footer={
					<div className="flex justify-between items-center">
						<Pagination
							current={currentPage}
							pageSize={pageSize}
							total={total}
							onChange={(page, size) => {
								setCurrentPage(page);
								setPageSize(size);
								getVideoList(page, size);
							}}
							pageSizeOptions={['10', '20', '50']}
							size="small"
							showSizeChanger
							showTotal={(total) => `共 ${total} 条`}
						/>
						<Space>
							<Text>已选 {selectedVideoIds.size} / {MAX_SELECTION} 条视频</Text>
							<Button onClick={onClose}>取消</Button>
							<Button type="primary" onClick={handleOk}>确定</Button>
						</Space>
					</div>
				}
			>
				<div className="flex flex-wrap gap-4 mb-6">
					<div className="flex items-center gap-2">
						<span className="text-gray-600">排序选项:</span>
						<Select
							style={{ width: 120 }}
							value={sort}
							onChange={setSort}
							options={enumToOptions(VideoSortType)}
						/>
					</div>
					<div className="flex items-center gap-2">
						<span className="text-gray-600">品类:</span>
						<Select
							placeholder="选择品类"
							style={{ width: 160 }}
							value={category}
							allowClear
							onChange={setCategory}
							options={videoCategoryOptions.map(option => ({ label: option, value: option }))}
						/>
					</div>
					<div className="flex items-center gap-2">
						<span className="text-gray-600">视频标题:</span>
						<Input
							placeholder="搜索视频标题"
							style={{ width: 180 }}
							value={searchTerm}
							onPressEnter={handleSearch}
							allowClear
							onChange={e => setSearchTerm(e.target.value)}
						/>
					</div>
					<Button type="primary" onClick={handleSearch}>搜索</Button>
				</div>

				<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
					{videoList.map((video) => {
						const isSelected = selectedVideoIds.has(video.videoId);
						const isDisabled = !isSelected && selectedVideoIds.size >= MAX_SELECTION;
						return (
							<Card
								key={video.videoId}
								className={`relative ${isDisabled ? 'opacity-50' : 'cursor-pointer'} ${isSelected ? 'border-blue-500 border-2' : ''}`}
								styles={{ body: { padding: 0 } }}
								onClick={() => !isDisabled && handleSelectVideo(video.videoId)}
							>
								<div className="p-2">
									<Text type="secondary" className="text-xs">票圈 | 3亿人喜欢的视频平台</Text>
									<Paragraph className="mt-1 !mb-1" ellipsis={{ rows: 2, tooltip: true }} title={video.customTitle || video.title}>{video.customTitle || video.title}</Paragraph>
								</div>
								<div
									className="relative"
									style={{ paddingBottom: '79.8%' }}
									onClick={(e) => { e.stopPropagation(); playVideo(video); }}
								>
									<img src={video.customCover || video.cover} alt={video.customTitle || video.title} referrerPolicy="no-referrer" className="absolute inset-0 w-full h-full object-cover" />
									<div className="absolute inset-0 flex justify-center items-center cursor-pointer">
										<CaretRightFilled className="!text-white text-4xl bg-black/20 rounded-full p-1 pl-2" />
									</div>
								</div>
								<div className="p-3 flex justify-between items-center">
									<div className="flex flex-col gap-1">
										<Text type="secondary" className="text-xs">平台传播得分: {video.score?.toFixed(2) || '无'}</Text>
										<Text type="secondary" className="text-xs">行业裂变率: {video.industryFissionRate?.toFixed(2) || '无'}</Text>
										<Text type="secondary" className="text-xs">本渠道传播率: {video.channelFissionRate?.toFixed(2) || '无'}</Text>
									</div>
									{isSelected ? (
										<CheckCircleFilled className="text-green-500 text-xl" />
									) : (
										<div className={`w-5 h-5 border-2 ${isDisabled ? 'border-gray-200 bg-gray-100' : 'border-gray-300' } rounded-full`}></div>
									)}
								</div>
							</Card>
						);
					})}
				</div>
			</Drawer>

			<Modal
				open={!!playingVideo}
				onCancel={closeVideoPlayer}
				title={playingVideo?.title}
				footer={null}
				destroyOnClose
				width={720}
				styles={{ body: { padding: 0, background: '#000' } }}
			>
				{playingVideo && (
					<video controls autoPlay className="w-full h-auto max-h-[80vh] block" src={playingVideo.video}>
						Your browser does not support the video tag.
					</video>
				)}
			</Modal>
		</>
	);
};

export default VideoSelectModal;