const label = '图片框';
const name = 'ImageBox';
let i = 1;
const uniqueId = () => `image-box-${i++}`;

export const imageBoxRule = {
	// 插入菜单位置
	menu: 'main',
	// 图标
	icon: 'fc-icon-image ',
	// 名称
	label: label,
	// id，唯一!
	name: name,
	// 是否可以操作
	mask: true,
	// 定义组件的事件
	event: [
		'load',
		'abort',
		'click',
		'dblclick',
		'focus',
		'blur',
		'keyup',
		'keydown',
		'keypress',
		'mousedown',
		'mousemove',
		'mouseover',
		'mouseout',
		'mouseup',
	],
	// 定义组件的渲染规则
	rule() {
		return {
			type: name,
			field: uniqueId(),
			title: label,
			info: '',
			effect: {
				fetch: '',
			},
			props: {
				src: '',
				fit: '',
				lazy: true,
				preview: false,
				placeholder: '',
				errorText: '加载失败',
				previewSrcList: [],
				alt: '',
				zIndex: 10000,
			},
		};
	},

	// 自定义组件的属性配置
	props() {
		return [
			{
				// 修改 rule.props.label
				type: 'input',
				title: '图片路径',
				field: 'src',
			},
			{ type: 'switch', title: '开启懒加载', field: 'lazy', value: true },
			{
				type: 'TableOptions',
				title: '预览图片列表',
				field: 'previewSrcList',
				props: {
					column: [{ label: '图片路径', key: 'value' }],
					valueType: 'string',
				},
			},
			{
				type: 'input',
				title: '图片描述',
				field: 'alt',
			},
			{
				// 修改 rule.props.size
				type: 'select',
				title: '适应容器框，同原生 object-fit',
				field: 'fit',
				options: [
					{ label: 'fill', value: 'fill' },
					{ label: 'contain', value: 'contain' },
					{ label: 'cover', value: 'cover' },
					{ label: 'none', value: 'none' },
					{ label: 'scale-down', value: 'scale-down' },
				],
			},
			{
				type: 'input',
				title: '图片层级',
				field: 'zIndex',
				value: 10000,
			},
			{
				type: 'input',
				title: '占位提示文本',
				field: 'placeholder',
			},
			{
				type: 'input',
				title: '加载失败文本',
				field: 'errorText',
			},
		];
	},
};
