import { BizValueType, Remark, SelectModal } from '@/components';
import { business } from '@/services';
import { formatParam } from '@/utils/formatParam';
import {
	ActionType,
	LightFilter,
	ProColumns,
	ProFormTreeSelect,
} from '@ant-design/pro-components';
import { ModalProps, TreeSelect } from 'antd';
import { useEffect, useRef, useState } from 'react';

export interface IMaterialModalProps extends ModalProps {
	maxCount: number;
	onFinish: (materialList: BusinessAPI.MaterialVO[]) => void;
	fileList?: any[];
	type?: 'checkbox' | 'radio';
}

export default function MaterialModal(props: IMaterialModalProps) {
	const {
		maxCount,
		onFinish,
		fileList: initialFileList,
		type = 'radio',
		...rest
	} = props;
	const actionRef = useRef<ActionType>();
	const [fileList, setFileList] = useState<any[]>([]);
	const [params, setParams] = useState<BusinessAPI.MaterialPageQry>();

	useEffect(() => {
		setFileList(initialFileList || []);
	}, [initialFileList]);

	const columns: ProColumns<BusinessAPI.MaterialVO, BizValueType>[] = [
		{
			title: '素材名称',
			dataIndex: 'name',
			order: 3,
		},
		{
			title: '素材内容',
			dataIndex: 'url',
			search: false,
			render: (_, record) => {
				return record.type === 'FILE_IMAGE' || record.type === 'FILE_VIDEO' ? (
					// 可预览
					<a
						href={record.url}
						target="_blank"
						rel="noopener noreferrer"
						style={{
							display: 'inline-block',
							width: 22,
							height: 22,
							overflow: 'hidden',
						}}
					>
						<img
							src={record.url}
							alt={record.name}
							style={{ width: 22, height: 22 }}
						/>
					</a>
				) : (
					<Remark remark={record.path} />
				);
			},
		},
		{
			title: '素材分类',
			dataIndex: 'categoryId',
			valueType: 'treeSelect',
			request: async (params) => {
				const { data } = await business.materialCategory.treeMaterialCategory({
					categoryTreeQry: {
						...params,
					},
				});
				return data || [];
			},
			fieldProps: {
				fieldNames: {
					label: 'name',
					children: 'children',
					value: 'categoryId',
				},
				showSearch: true,
				allowClear: true,
				autoClearSearchValue: true,
				filterTreeNode: true,
				multiple: false,
				treeNodeFilterProp: 'name',
			},
		},
	];

	return (
		<SelectModal
			rowKey={'materialId'}
			modalProps={{
				title: '选择素材',
				...rest,
				afterClose: () => {
					setFileList([]);
				},
			}}
			selectedList={fileList}
			tableProps={{
				actionRef: actionRef,
				rowKey: 'materialId',
				columns: columns,
				params: params,
				request: async (params, sorter, filter) => {
					const { data, success, totalCount } =
						await business.material.pageMaterial({
							materialPageQry: formatParam<typeof params>(
								params,
								sorter,
								filter,
							),
						});

					return {
						data: data || [],
						total: totalCount,
						success,
					};
				},
				toolbar: {
					filter: (
						<LightFilter
							onFinish={async (values) => {
								setParams(values as any);
							}}
						>
							<ProFormTreeSelect
								label="素材分类"
								required={false}
								name="categoryId"
								request={async () => {
									const { data } =
										await business.materialCategory.treeMaterialCategory({
											categoryTreeQry: {},
										});

									return data || [];
								}}
								fieldProps={{
									showSearch: true,
									allowClear: true,
									autoClearSearchValue: true,
									filterTreeNode: true,
									multiple: true,
									treeNodeFilterProp: 'name',
									showCheckedStrategy: TreeSelect.SHOW_ALL,
									fieldNames: {
										label: 'name',
										children: 'children',
										value: 'categoryId',
									},
									placeholder: '请选择素材分类',
								}}
							/>
						</LightFilter>
					),
				},
			}}
			onFinish={onFinish}
			num={(maxCount || 1) - fileList.length}
			type={type}
		/>
	);
}