contentCooper/src/views/publishContent/weCom/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 { VideoListResponse } from '@src/views/publishContent/weGZH/components/types';
import http from '@src/http';
import { getVideoContentListApi } from '@src/http/api';
import { useVideoCategoryOptions } from '@src/views/publishContent/weGZH/hooks/useVideoCategoryOptions';
import { WeComPlanType, WeVideoItem } from '@src/views/publishContent/weCom/type'

const { Text, Paragraph } = Typography;

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

const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ planType, visible, onClose, onOk, initialSelectedIds = [] }) => {
	const { videoCategoryOptions } = useVideoCategoryOptions();
	const [category, setCategory] = useState<string>();
	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<WeVideoItem[]>([]);
	const [videoListAll, setVideoListAll] = useState<WeVideoItem[]>([]);
	const [selectedVideoIds, setSelectedVideoIds] = useState<Set<number>>(new Set(initialSelectedIds));
	const [playingVideo, setPlayingVideo] = useState<WeVideoItem | null>(null);
	const MAX_SELECTION = 3;

	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,
			pageNum: pageNum || currentPage,
			pageSize: _pageSize || pageSize,
		}).catch(() => {
			message.error('获取视频列表失败');
		}).finally(() => {
			setLoading(false);
		});
		if (res && res.code === 0) {
			const mappedVideos = res.data.objs.map(video => ({ ...video, scene: 0 as const }));
			setVideoList(mappedVideos);
			setVideoListAll(old => [...old, ...mappedVideos]);
			setTotal(res.data.totalSize);
		}
	}

	useEffect(() => {
		getVideoList();
	}, []);

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

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

	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));
		// 去重
		const uniqueSelectedVideos = selectedVideos.filter((video, index, self) =>
			index === self.findIndex((t) => t.videoId === video.videoId)
		);
		onOk(uniqueSelectedVideos);
	};

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

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

	const handleChangeSelectVideo = (videoId: number, scene: number) => {
		setVideoList((prev: WeVideoItem[]) => {
			const newList = prev.map(video => {
				if (video.videoId === videoId) {
					return { ...video, scene: scene as 0 | 1 };
				}
				return video;
			});
			return newList;
		});
		setVideoListAll((prev: WeVideoItem[]) => {
			const newList = prev.map(video => {
				if (video.videoId === videoId) {
					return { ...video, scene: scene as 0 | 1 };
				}
				return video;
			});
			return newList;
		});
	}

	return (
		<>
			<Drawer
				title="内容选取"
				open={visible}
				onClose={onClose}
				width={800}
				placement="right"
				loading={loading}
				destroyOnClose
				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
							placeholder="选择品类"
							style={{ width: 180 }}
							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: 200 }}
							value={searchTerm}
							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 bg-blue-50 shadow-md' : 'hover:shadow-sm'}`}
								styles={{ body: { padding: 0 } }}
								onClick={() => !isDisabled && handleSelectVideo(video.videoId)}
							>
								<div className="p-3">
									<Text type="secondary" className="text-xs">票圈 | 3亿人喜欢的视频平台</Text>
									<Paragraph className="mt-1 !mb-1" ellipsis={{ rows: 2, tooltip: true }} title={video.title}>{video.title}</Paragraph>
								</div>
								<div
									className="relative"
									style={{ paddingBottom: '79.8%' }}
									onClick={(e) => { e.stopPropagation(); playVideo(video); }}
								>
									<img src={video.cover} alt={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">
									<Text type="secondary" className="text-xs">传播效率: {video.score?.toFixed(2)}</Text>
									{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>
								{isSelected && (
									<div className="p-3 flex justify-between items-center relative z-10">
										<Select
											placeholder="选择场景"
											style={{ width: 180 }}
											defaultValue={video.scene || 0}
											value={video.scene}
											onChange={(value) => handleChangeSelectVideo(video.videoId, value)}
											options={ planType === WeComPlanType.每日推送 ?
												[{ label: '群发', value: 0 }, { label: '单发', value: 1 }]
												: [{ label: '关注回复', value: 0 }]
											}
											onClick={(e) => e.stopPropagation()}
										/>
									</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;