import {
	BizContainer,
	BizValueType,
	EmployeeDisable,
	EmployeeRoleUpdate,
	MaterialList,
	ModeType,
	RestPassword,
} from '@/components';
import { business } from '@/services';
import { aesEncrypt } from '@/utils/aes';
import { formatParam } from '@/utils/formatParam';
import { useIntl } from '@@/exports';
import {
	ActionType,
	ProColumns,
	ProFormSelect,
	ProFormText,
} from '@ant-design/pro-components';
import { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import { ProFormUploadMaterial } from '@chageable/components';
import React, { useRef } from 'react';

export interface IEmployeeListProps {
	ghost?: boolean;
	search?: boolean;
	mode?: ModeType;
	trigger?: () => React.ReactNode;
	onValueChange?: () => void;
}

const EmployeeList: React.FC = (props: IEmployeeListProps) => {
	const { ghost = false, search = true, mode = 'page', onValueChange } = props;
	const intl = useIntl();
	const intlPrefix = 'employee';
	const actionRef = useRef<ActionType>();

	const columns: ProColumns<BusinessAPI.EmployeeVO, BizValueType>[] = [
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.number' }),
			dataIndex: 'number',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.avatar' }),
			dataIndex: 'avatar',
			valueType: 'avatar',
			search: false,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.name' }),
			dataIndex: 'name',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.gender' }),
			dataIndex: 'gender',
			valueType: 'select',
			valueEnum: {
				1: intl.formatMessage({ id: intlPrefix + '.column.gender.enum.male' }),
				2: intl.formatMessage({
					id: intlPrefix + '.column.gender.enum.female',
				}),
			},
			search: false,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.roleId' }),
			dataIndex: 'roleIdList',
			valueType: 'select',
			fieldProps: {
				mode: 'multiple',
				autoFocus: true,
			},
			request: async (params) => {
				const data = await business.role.listRole({
					roleListQry: params,
				});
				return (
					data?.data?.map((item: BusinessAPI.RoleVO) => ({
						label: item.platformVO?.platformName + '-' + item.name,
						value: item.roleId,
					})) ?? []
				);
			},
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.phone' }),
			dataIndex: 'phone',
		},
	];

	const formContext = [
		<ProFormText
			key={'number'}
			name={'number'}
			label={intl.formatMessage({ id: intlPrefix + '.form.number.label' })}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.number.placeholder',
			})}
			required={true}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.number.required',
					}),
				},
			]}
		/>,
		<ProFormText
			key={'name'}
			name={'name'}
			label={intl.formatMessage({ id: intlPrefix + '.form.name.label' })}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.name.placeholder',
			})}
			required={true}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.name.required',
					}),
				},
			]}
		/>,
		<ProFormSelect
			key={'gender'}
			name={'gender'}
			label={intl.formatMessage({ id: intlPrefix + '.form.gender.label' })}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.gender.placeholder',
			})}
			required={true}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.gender.required',
					}),
				},
			]}
			valueEnum={{
				1: intl.formatMessage({
					id: intlPrefix + '.form.gender.enum.male',
				}),
				2: intl.formatMessage({
					id: intlPrefix + '.form.gender.enum.female',
				}),
			}}
		/>,
		<ProFormText
			key={'phone'}
			name={'phone'}
			label={intl.formatMessage({ id: intlPrefix + '.form.phone.label' })}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.phone.placeholder',
			})}
			required={true}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.phone.required',
					}),
				},
				{
					pattern: /^1[3456789]\d{9}$/,
					message: intl.formatMessage({
						id: intlPrefix + '.form.phone.pattern',
					}),
				},
			]}
		/>,

		<ProFormUploadMaterial
			key={'avatar'}
			name={'avatarList'}
			label={intl.formatMessage({ id: intlPrefix + '.form.avatar.label' })}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.avatar.placeholder',
			})}
			transform={(value) => {
				return {
					avatarList: value,
					avatar: value[0],
				};
			}}
			fieldProps={{
				maxCount: 1,
				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,
					};
				},
			}}
		/>,
		<ProFormText
			key={'username'}
			name={'username'}
			label={intl.formatMessage({ id: intlPrefix + '.form.username.label' })}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.username.placeholder',
			})}
			required={true}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.username.required',
					}),
				},
			]}
		/>,
		<ProFormText
			key={'password'}
			name={'password'}
			label={intl.formatMessage({ id: intlPrefix + '.form.password.label' })}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.password.placeholder',
			})}
			required={true}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.password.required',
					}),
				},
			]}
			fieldProps={{
				type: 'password',
			}}
			transform={(password) => {
				return {
					password: aesEncrypt(password),
				};
			}}
		/>,
		<ProFormText
			key={'confirmPassword'}
			name={'confirmPassword'}
			label={intl.formatMessage({
				id: intlPrefix + '.form.confirmPassword.label',
			})}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.confirmPassword.placeholder',
			})}
			required={true}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.confirmPassword.required',
					}),
				},
			]}
			fieldProps={{
				type: 'password',
			}}
			transform={(confirmPassword) => {
				return {
					confirmPassword: aesEncrypt(confirmPassword),
				};
			}}
		/>,
		<ProFormSelect
			key={'roleId'}
			name={'roleId'}
			label={intl.formatMessage({ id: intlPrefix + '.form.roleId.label' })}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.roleId.placeholder',
			})}
			required={true}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.roleId.required',
					}),
				},
			]}
			showSearch={true}
			fieldProps={{
				mode: 'multiple',
				autoFocus: true,
			}}
			request={async (params) => {
				const data = await business.role.listRole({
					roleListQry: params,
				});
				return (
					data?.data?.map((item: BusinessAPI.RoleVO) => ({
						label: item.platformVO?.platformName + '-' + item.name,
						value: item.roleId,
					})) ?? []
				);
			}}
		/>,
	];

	const editFormContext = [
		<ProFormText
			key={'number'}
			name={'number'}
			label={intl.formatMessage({ id: intlPrefix + '.form.number.label' })}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.number.placeholder',
			})}
			required={true}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.number.required',
					}),
				},
			]}
		/>,
		<ProFormText
			key={'name'}
			name={'name'}
			label={intl.formatMessage({ id: intlPrefix + '.form.name.label' })}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.name.placeholder',
			})}
			required={true}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.name.required',
					}),
				},
			]}
		/>,
		<ProFormSelect
			key={'gender'}
			name={'gender'}
			label={intl.formatMessage({ id: intlPrefix + '.form.gender.label' })}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.gender.placeholder',
			})}
			required={true}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.gender.required',
					}),
				},
			]}
			valueEnum={{
				1: intl.formatMessage({
					id: intlPrefix + '.form.gender.enum.male',
				}),
				2: intl.formatMessage({
					id: intlPrefix + '.form.gender.enum.female',
				}),
			}}
		/>,
		<ProFormText
			key={'phone'}
			name={'phone'}
			label={intl.formatMessage({ id: intlPrefix + '.form.phone.label' })}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.phone.placeholder',
			})}
			required={true}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.phone.required',
					}),
				},
				{
					pattern: /^1[3456789]\d{9}$/,
					message: intl.formatMessage({
						id: intlPrefix + '.form.phone.pattern',
					}),
				},
			]}
		/>,

		<ProFormUploadMaterial
			key={'avatar'}
			name={'avatarList'}
			label={intl.formatMessage({ id: intlPrefix + '.form.avatar.label' })}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.avatar.placeholder',
			})}
			transform={(value) => {
				return {
					avatarList: value,
					avatar: value[0],
				};
			}}
			fieldProps={{
				maxCount: 1,
				actionRef: actionRef,
				toolBarRender: () => [
					<MaterialList
						key={'create'}
						ghost={true}
						mode={'create'}
						search={false}
						onValueChange={() => actionRef.current?.reload()}
					/>,
				],
				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,
					};
				},
			}}
		/>,
	];

	const detailColumns: ProDescriptionsItemProps<
		BusinessAPI.EmployeeVO,
		BizValueType
	>[] = columns as ProDescriptionsItemProps<
		BusinessAPI.EmployeeVO,
		BizValueType
	>[];

	return (
		<BizContainer<
			typeof business.employee,
			BusinessAPI.EmployeeVO,
			BusinessAPI.EmployeePageQry,
			BusinessAPI.EmployeeCreateCmd,
			BusinessAPI.EmployeeUpdateCmd
		>
			rowKey={'employeeId'}
			permission={'mdb-business-employee'}
			func={business.employee}
			method={'employee'}
			methodUpper={'Employee'}
			intlPrefix={intlPrefix}
			onValueChange={onValueChange}
			modeType={mode}
			container={{
				ghost,
			}}
			remark={{
				mode: 'editor',
			}}
			status
			page={{
				fieldProps: {
					ghost,
					//@ts-ignore
					search,
				},
				columns,
				options: (record, actionRef) => [
					<RestPassword
						key={'RestPassword'}
						permission={''}
						onFinish={async () => {
							await actionRef.current?.reload();
						}}
						employeeId={record.employeeId}
					/>,
					<EmployeeRoleUpdate
						key={'EmployeeRoleUpdate'}
						permission={''}
						onFinish={async () => {
							await actionRef.current?.reload();
						}}
						employeeId={record.employeeId}
					/>,
					<EmployeeDisable
						key={'EmployeeDisable'}
						permission={''}
						onFinish={async () => {
							await actionRef.current?.reload();
						}}
						employeeId={record.employeeId}
					/>,
				],
			}}
			create={{
				formType: 'drawer',
				formContext,
			}}
			update={{
				formType: 'drawer',
				formContext: editFormContext,
				//@ts-ignore
				transform: (value) => {
					return {
						...value,
						avatarList: [value.avatar],
					};
				},
			}}
			destroy={{}}
			detail={{
				formType: 'drawer',
				columns: detailColumns,
			}}
		/>
	);
};

export default EmployeeList;
