const label = '日历';
const name = 'CalendarBox';
let i = 1;
const uniqueId = () => `calendar-box-${i++}`;

export const calendarBoxRule = {
	// 插入菜单位置
	menu: 'aide',
	// 图标
	icon: 'icon-date',
	// 名称
	label: label,
	// id，唯一!
	name: name,
	// 是否可以操作
	mask: true,
	// 定义组件的事件
	event: ['abort', 'load', 'click', 'dblclick', 'focus', 'blur', 'keyup', 'keydown', 'keypress', 'mousedown', 'mousemove', 'mouseover', 'mouseout', 'mouseup', 'next', 'prev', 'setToday', 'onSelect', 'onMonthChange'],
	// 定义组件的渲染规则
	rule() {
		return {
			type: name,
			field: uniqueId(),
			title: label,
			info: '',
			effect: {
				fetch: '',
			},
			props: {
				title: '',
				selectMode: 'select',
				mode: 'month',
				selectDate: '',
				monthRange: [],
				remarks: {},
				tileContent: {},
				holidays: {},
				completion: false,
				useSwiper: true,
				arrowLeft: '',
				arrowRight: '',
				monFirst: false,
				language: 'cn',
				format: (year, month) => {
					const transform = {
						1: '一',
						2: '二',
						3: '三',
						4: '四',
						5: '五',
						6: '六',
						7: '七',
						8: '八',
						9: '九',
						10: '十',
						11: '十一',
						12: '十二',
					}
					return [`${year}年`, `${transform[month]}月`];
				},
				weeks: ["日", "一", "二", "三", "四", "五", "六"],
				begin: '',
				end: '',
				disabled: [],
			},
		};
	},

	// 自定义组件的属性配置
	props() {
		return [
			{
				type: 'Input',
				title: '标题',
				field: 'title',
				value: '选择日期',
			},
			{
				type: 'Select',
				title: '选择模式',
				field: 'selectMode',
				options: [
					{ label: '选择日期', value: 'select' },
					{ label: '选择范围', value: 'range' },
					{ label: '选择月份', value: 'month' },
					{ label: '多选日期', value: 'multi' },
					{ label: '多选范围', value: 'multiRange' },
				],
			},
			{
				type: 'select',
				title: '显示模式',
				field: 'mode',
				options: [
					{ label: '月', value: 'month' },
					{ label: '周', value: 'week' },
					{ label: '月度范围', value: 'monthRange' },
				],
			},
			{
				type: 'Input',
				title: '选择日期',
				field: 'selectDate',
				value: '',
			},
			{
				type: 'Struct',
				title: '选择月份范围',
				field: 'monthRange',
				_fc_important_prop: true,
				props: {
					validate(val) {
						return !val || typeof val === 'object';
					}
				}
			},
			{
				type: 'Struct',
				title: '备注',
				field: 'remarks',
			},
			{
				type: 'Struct',
				title: '自定义内容',
				field: 'tileContent',
			},
			{
				type: 'Struct',
				title: '节假日',
				field: 'holidays',
			},
			{
				type: 'Switch',
				title: '是否显示完成按钮',
				field: 'completion',
				value: false,
			},
			{
				type: 'Switch',
				title: '是否使用swiper',
				field: 'useSwiper',
				value: true,
			},
			{
				type: 'Input',
				title: '自定义左箭头',
				field: 'arrowLeft',
				value: '',
			},
			{
				type: 'Input',
				title: '自定义右箭头',
				field: 'arrowRight',
				value: '',
			},
			{
				type: 'Switch',
				title: '是否以周一为首',
				field: 'monFirst',
				value: false,
			},
			{
				type: 'select',
				title: '语言',
				field: 'language',
				options: [
					{ label: '中文', value: 'cn' },
					{ label: '英文', value: 'en' },
				],
			},
			{
				type: 'FnInput',
				title: '日期格式化',
				field: 'format',
				required: true,
				props: {
					body: true,
					button: true,
					fnx: true,
					name: 'formatOfRangeMode',
					args: ['year', 'month'],
				},
			},
			{
				type: 'Struct',
				title: '周名称',
				field: 'weeks',
				_fc_important_prop: true,
				props: {
					validate(val) {
						return !val || typeof val === 'object';
					}
				}
			},
			{
				type: 'Input',
				title: '开始日期',
				field: 'begin',
				value: '',
			},
			{
				type: 'Input',
				title: '结束日期',
				field: 'end',
			},
			{
				type: 'Struct',
				title: '禁用日期',
				field: 'disabled',
				_fc_important_prop: true,
				props: {
					validate(val) {
						return !val || typeof val === 'object';
					}
				}
			},
		];
	},
};
