import {
	BizContainer,
	BizValueType,
	ModeType,
} from '@/components';
import { business } from '@/services';
import { useIntl } from '@@/exports';
import { UserOutlined } from '@ant-design/icons';
import { ProColumns } from '@ant-design/pro-components';
import { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import { Avatar, Typography } from 'antd';
import React from 'react';

interface IUserListProps {
	ghost?: boolean;
	userId?: BusinessAPI.UserVO['userId'];
	search?: boolean;
	onValueChange?: () => void;
	mode?: ModeType;
	trigger?: () => React.ReactNode;
}

export default function UserList(props: IUserListProps) {
	const {
		ghost = false,
		userId,
		search = true,
		mode = 'page',
		trigger,
		onValueChange,
	} = props;

	const intl = useIntl();
	const intlPrefix = 'user';

	const columns: ProColumns<BusinessAPI.UserVO, BizValueType>[] = [
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.avatar' }),
			dataIndex: 'avatar',
			valueType: 'image',
			hideInSearch: true,
			render: (text, record) => {
				return (
					<Avatar src={record?.avatar} icon={<UserOutlined />} size={24} />
				);
			},
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.nickname' }),
			dataIndex: 'nickname',
			valueType: 'text',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.name' }),
			dataIndex: 'name',
			valueType: 'text',
			hideInSearch: true,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.phone' }),
			dataIndex: 'phone',
			valueType: 'password',
		},
		{
			title: intl.formatMessage({
				id: intlPrefix + '.column.bindPhoneAt',
			}),
			dataIndex: 'bindPhoneAt',
			valueType: 'dateTimeRange',
			render: (_, record) => {
				return <Typography.Text>{record.bindPhoneAt}</Typography.Text>;
			},
			fieldProps: {
				placeholder: ['开始日期', '开始日期'],
			},
		},
		{
			title: intl.formatMessage({
				id: intlPrefix + '.column.lastLoginAt',
			}),
			dataIndex: 'lastLoginAt',
			valueType: 'dateTime',
			hideInSearch: true,
		},
		{
			title: '状态',
			dataIndex: 'state',
			key: 'state',
			valueEnum: {
				ENABLE: { text: '正常', status: 'Success' },
				DISABLE: { text: '已封禁', status: 'Error' },
			},
			filters: true,
			search: false,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.createdAt' }),
			dataIndex: 'createdAt',
			valueType: 'dateTime',
			hideInSearch: true,
		},
	];

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

	const detailContext = () => {
		return [

		];
	};

	return (
		<BizContainer<
			typeof business.user,
			BusinessAPI.UserVO,
			BusinessAPI.UserPageQry,
			BusinessAPI.UserCreateCmd,
			BusinessAPI.UserUpdateCmd
		>
			rowKey={'userId'}
			permission={'operation-user'}
			func={business.user}
			method={'user'}
			methodUpper={'User'}
			intlPrefix={intlPrefix}
			modeType={mode}
			onValueChange={onValueChange}
			container={{
				ghost,
			}}
			page={{
				fieldProps: {
					ghost,
					//@ts-ignore
					search,
				},
				columns,
			}}
			create={false}
			update={false}
			destroy={false}
			detail={{
				rowId: userId,
				formType: 'drawer',
				formContext: detailContext,
				columns: detailColumns,
				trigger,
			}}
		/>
	);
}
