import { BizContainer, BizEditor, BizValueType } from '@/components';
import { business } from '@/services';
import { useIntl } from '@@/exports';
import {
	ProColumns,
	ProFormCheckbox,
	ProFormDependency,
	ProFormText,
	ProFormTextArea,
} from '@ant-design/pro-components';
import { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';

export default function AgreementList() {
	const intl = useIntl();
	const intlPrefix = 'agreement';

	const formContext = [
		<ProFormText
			key={'title'}
			name={'title'}
			label={intl.formatMessage({ id: intlPrefix + '.form.title.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.title.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.title.required',
					}),
				},
			]}
		/>,
		// 协议类型：桩主入驻协议，车主服务协议，平台协议 ProFormRadio
		<ProFormCheckbox.Group
			key={'scene'}
			name={'scene'}
			label={intl.formatMessage({ id: intlPrefix + '.form.scene.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.scene.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.scene.required',
					}),
				},
			]}
			tooltip={intl.formatMessage({
				id: intlPrefix + '.form.scene.tooltip',
			})}
			valueEnum={{
				STAKEHOLDER_SETUP: intl.formatMessage({
					id: intlPrefix + '.form.scene.enum.stakeholderSetup',
				}),
				CUSTOMER_SETUP: intl.formatMessage({
					id: intlPrefix + '.form.scene.enum.customerSetup',
				}),
				PERSONAL_CENTER: intl.formatMessage({
					id: intlPrefix + '.form.scene.enum.personalCenter',
				}),
			}}
		/>,

		<ProFormTextArea
			key={'subTitle'}
			name={'subTitle'}
			label={intl.formatMessage({ id: intlPrefix + '.form.subTitle.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.subTitle.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.subTitle.required',
					}),
				},
			]}
		/>,
		<ProFormDependency key={'content'} name={['content']}>
			{({ content }, form) => {
				return (
					<BizEditor
						name={'content'}
						label={intl.formatMessage({
							id: intlPrefix + '.form.content.label',
						})}
						required={true}
						placeholder={intl.formatMessage({
							id: intlPrefix + '.form.content.placeholder',
						})}
						rules={[
							{
								required: true,
								message: intl.formatMessage({
									id: intlPrefix + '.form.content.required',
								}),
							},
						]}
						value={content}
						onChange={(value) => {
							form.setFieldValue('content', value);
						}}
					/>
				);
			}}
		</ProFormDependency>,
	];

	const columns: ProColumns<BusinessAPI.AgreementVO, BizValueType>[] = [
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.title' }),
			dataIndex: 'title',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.subTitle' }),
			dataIndex: 'subTitle',
			hideInSearch: true,
		},
		// scene
		 {
			 title: intl.formatMessage({ id: intlPrefix + '.column.scene' }),
			 dataIndex: 'scene',
			 valueEnum: {
				 STAKEHOLDER_SETUP: intl.formatMessage({
					 id: intlPrefix + '.column.scene.enum.stakeholderSetup',
				 }),
				 CUSTOMER_SETUP: intl.formatMessage({
					 id: intlPrefix + '.column.scene.enum.customerSetup',
				 }),
				 PERSONAL_CENTER: intl.formatMessage({
					 id: intlPrefix + '.column.scene.enum.personalCenter',
				 })
			 }
		 }
	];

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

	return (
		<BizContainer<
			typeof business.agreement,
			BusinessAPI.AgreementVO,
			BusinessAPI.AgreementPageQry,
			BusinessAPI.AgreementCreateCmd,
			BusinessAPI.AgreementUpdateCmd
		>
			rowKey={'agreementId'}
			permission={'operation-agreement'}
			func={business.agreement}
			method={'agreement'}
			methodUpper={'Agreement'}
			intlPrefix={intlPrefix}
			modeType={'page'}
			container={{}}
			page={{
				fieldProps: {},
				columns,
			}}
			create={{
				formType: 'drawer',
				formContext,
			}}
			update={{
				formType: 'drawer',
				formContext,
			}}
			destroy={{}}
			detail={{
				formType: 'drawer',
				columns: detailColumns,
			}}
		/>
	);
}
