import { FieldProps } from '../../components/form-item/field-props'
import { h } from 'vue'
import { GitlabOutlined } from '@ant-design/icons-vue'
import * as dayjs from 'dayjs'
import { BaseFormDTO } from '../../entity/common/base'

// 字段类型限制
interface Fields extends BaseFormDTO {
	'auto-complete': string
	checkbox: string
	'date-picker': string
	'auto-complete-without': string
	cascader: string
	'cascader-value': string
	'checkbox-group': string
	'date-picker-default': string
	'date-picker-year': string
	'date-picker-month': string
	'date-picker-quarter': string
	'date-picker-week': string
	'date-picker-time': string
	'range-picker': string
	input: string
	textarea: string
	'input-number': string
	'input-number-i': string
	radio: string
	'radio-group': string
	select: string
	slider: string
	switch: string
	rate: string
	isShow: string
	upload: string
	'radio-button': string
	'radio-group-button': string
	'rate-custom': string
	'time-picker': string
	'time-range-picker': string
	'tree-select': string
	'upload-image': string
	'upload-images': string
	'rich-text': string
	'input-range': string
}

const fields: Array<FieldProps<Fields>> = [
	// ------------------------------------------
	{
		// 必填, 字段名称,一般和提交表单对应
		name: 'auto-complete',
		// 必填，显示的label名称
		label: '自动完成',
		// 必填，类型
		type: 'auto-complete',
		placeholder: '这是 自动完成框 的简单示例',
		typeValue: {
			// 提示的选择项，可以是{label，value}的数组，也可以是object的数组，比如数据字典的数据
			// 建议label和value值相同，因为value会用来显示在输入框中
			options: [
				{ label: 'Burns Bay Road', value: 'Burns Bay Road' },
				{ label: 'Downing Street', value: 'Downing Street' },
				{ label: 'Wall Street', value: 'Wall Street' }
			]
		}
	},
	{
		name: 'auto-complete-without',
		label: '自动完成',
		type: 'auto-complete',
		placeholder: '这是 自动完成框 的简单示例'
	},
	// ------------------------------------------
	{
		name: 'cascader',
		label: '级联选择',
		type: 'cascader',
		placeholder: '这是 级联选择 的简单示例',
		typeValue: {
			options: [
				{
					value: '浙江省',
					label: '浙江省',
					children: [
						{
							value: '嘉兴市',
							label: '嘉兴市',
							children: [
								{
									value: '南湖区',
									label: '南湖区'
								},
								{
									value: '秀洲区',
									label: '秀洲区'
								}
							]
						}
					]
				}
			]
		}
	},
	{
		name: 'cascader-value',
		label: '级联选择',
		type: 'cascader',
		placeholder: '这是 级联选择 的指定字段',
		typeValue: {
			fieldNames: {
				label: 'label',
				value: 'value',
				children: 'children'
			},
			options: [
				{
					value: '314000',
					label: '浙江省',
					children: [
						{
							value: '314001',
							label: '嘉兴市',
							children: [
								{
									value: '314002',
									label: '南湖区'
								},
								{
									value: '314003',
									label: '秀洲区'
								}
							]
						}
					]
				}
			]
		}
	},
	// ------------------------------------------
	{
		name: 'checkbox',
		label: '复选框',
		type: 'checkbox',
		placeholder: '这是 复选框 的简单示例',
		typeValue: {
			label: '标签'
		}
	},
	{
		name: 'checkbox-group',
		label: '复选框组',
		type: 'checkbox-group',
		placeholder: '这是 复选框组 的简单示例',
		typeValue: {
			options: [
				{ label: 'Apple', value: 'Apple' },
				{ label: 'Pear', value: 'Pear' },
				{ label: 'Orange', value: 'Orange' }
			]
		}
	},
	// ------------------------------------------
	{
		name: 'date-picker',
		label: '日期选择框',
		type: 'date-picker',
		placeholder: '这是 日期选择框 的示例'
	},
	{
		name: 'date-picker-default',
		label: '日期选择框(默认日期)',
		type: 'date-picker',
		placeholder: '这是 日期选择框(默认日期 + 限制选项) 的示例',
		typeValue: {
			// defaultPickerValue: dayjs.default('2030-03-02', 'YYYY-MM-DD'),
			disabledDate: (current: dayjs.Dayjs) => {
				return current.date() % 2 == 0
			}
		}
	},
	{
		name: 'date-picker-year',
		label: '日期选择框（年）选择框',
		type: 'date-picker',
		placeholder: '这是 年 的示例',
		typeValue: {
			picker: 'year'
		}
	},
	{
		name: 'date-picker-month',
		label: '日期选择框（月）选择框',
		type: 'date-picker',
		placeholder: '这是 月 的示例',
		typeValue: {
			picker: 'month'
		}
	},
	{
		name: 'date-picker-quarter',
		label: '日期选择框（季度）选择框',
		type: 'date-picker',
		placeholder: '这是 季度 的示例',
		typeValue: {
			picker: 'quarter'
		}
	},
	{
		name: 'date-picker-week',
		label: '日期选择框（周）选择框',
		type: 'date-picker',
		placeholder: '这是 周 的示例',
		typeValue: {
			picker: 'week'
		}
	},
	{
		name: 'date-picker-time',
		label: '日期选择框（带上日期）选择框',
		type: 'date-picker',
		placeholder: '这是 （带上日期） 的示例',
		typeValue: {
			showTime: true,
			valueFormat: 'YYYY-MM-DD HH:mm',
			format: 'YYYY-MM-DD HH:mm'
		}
	},
	{
		name: 'range-picker',
		label: '日期段选择框',
		type: 'range-picker',
		placeholder: ['请选择开始日期', '请选择结束日期']
	},

	// ------------------------------------------
	{
		name: 'input',
		label: '输入框',
		type: 'input',
		placeholder: '这是 输入框 的示例'
	},
	{
		name: 'input-range',
		label: '输入框',
		type: 'input-range',
		placeholder: '这是 输入框 的示例'
	},
	{
		name: 'textarea',
		label: '文本域',
		type: 'textarea',
		placeholder: '这是 文本域 的示例',
		typeValue: {
			rows: 4
		}
	},
	{
		name: 'input-number',
		label: '数字输入框',
		type: 'input-number',
		placeholder: '这是 数字输入框 的示例'
	},
	{
		name: 'input-number-i',
		label: '数字输入框',
		type: 'input',
		placeholder: '这也是 数字输入框 的示例',
		typeValue: {
			type: 'number'
		}
	},

	// ------------------------------------------
	{
		name: 'radio',
		label: '单选框',
		type: 'radio',
		placeholder: '这是 单选框 的简单示例',
		typeValue: {
			label: '标签'
		}
	},
	{
		name: 'radio-button',
		label: '单选按钮',
		type: 'radio-button',
		placeholder: '这是 单选按钮 的简单示例',
		typeValue: {
			label: '标签'
		}
	},
	{
		name: 'radio-group',
		label: '单选框组',
		type: 'radio-group',
		placeholder: '这是 单选框组 的简单示例',
		typeValue: {
			options: [
				{ label: 'Apple', value: 'Apple' },
				{ label: 'Pear', value: 'Pear' },
				{ label: 'Orange', value: 'Orange' }
			]
		}
	},
	{
		name: 'radio-group-button',
		label: '单选框组',
		type: 'radio-group',
		placeholder: '这是 单选框组 的简单示例',
		typeValue: {
			options: [
				{ label: 'Apple', value: 'Apple' },
				{ label: 'Pear', value: 'Pear' },
				{ label: 'Orange', value: 'Orange' }
			],
			optionType: 'button'
		}
	},

	// ------------------------------------------

	{
		name: 'rate',
		label: '评分',
		type: 'rate',
		placeholder: '这是 评分 的简单示例'
	},
	{
		name: 'rate-custom',
		label: '评分',
		type: 'rate',
		placeholder: '这是 评分 的简单示例',
		typeValue: {
			allowHalf: true,
			character: h(GitlabOutlined)
		}
	},

	// ------------------------------------------
	{
		name: 'select',
		label: '选择框',
		type: 'select',
		placeholder: '这是 选择框 的简单示例',

		typeValue: {
			options: [
				{
					label: '是',
					value: 1
				},
				{
					label: '否',
					value: 0
				}
			]
		}
	},
	{
		name: 'isShow',
		label: '选择框标签模式',
		type: 'select',
		placeholder: '标签模式',
		extraNames: { label: 'label' },
		typeValue: {
			options: [
				{
					label: 'A0',
					value: 0
				},
				{
					label: 'A1',
					value: 1
				},
				{
					label: 'A2',
					value: 2
				}
			],
			mode: 'multiple'
		}
	},

	// ------------------------------------------
	{
		name: 'slider',
		label: '滑块',
		type: 'slider',
		placeholder: '这是 滑块 的简单示例'
	},

	// ------------------------------------------
	{
		name: 'switch',
		label: '开关',
		type: 'switch',
		placeholder: '这是 开关 的简单示例'
	},

	// ------------------------------------------

	{
		name: 'time-picker',
		label: '时间选择器',
		type: 'time-picker',
		placeholder: '这是 时间选择器 的简单示例'
	},

	{
		name: 'time-range-picker',
		label: '时间段选择',
		type: 'time-range-picker',
		placeholder: ['请选择开始时间', '请选择结束时间']
	},
	{
		name: 'tree-select',
		label: '树级选择',
		type: 'tree-select',
		typeValue: {
			treeCheckable: true,
			treeData: [
				{
					value: '314000',
					label: '浙江省',
					children: [
						{
							value: '314001',
							label: '嘉兴市',
							children: [
								{
									value: '314002',
									label: '南湖区'
								},
								{
									value: '314003',
									label: '秀洲区'
								}
							]
						}
					]
				}
			]
		}
	},

	// ------------------------------------------

	{
		name: 'upload',
		label: '文件上传',
		type: 'upload',
		placeholder: '上传文件',
		typeValue: {
			type: 'id'
		}
	},
	{
		name: 'upload-image',
		label: '图片上传',
		type: 'upload',
		placeholder: '只能图片',
		extraNames: { id: 'upload-image-id', url: 'upload-image-url' },
		typeValue: {
			accept: 'image/*',
			type: 'id',
			fileList: [
				{
					oldFileName: '燕子.gif',
					id: '9f598a8b1e6547f6b6afb14dacda86ef',
					uploadPath: '2022/202204/20220426/86011c9d252943818240585895c1e655.gif'
				}
			]
		}
	},
	{
		name: 'upload-images',
		label: '图片上传(1张)',
		type: 'upload',
		placeholder: '限制一张',
		typeValue: {
			type: 'url',
			accept: 'image/*',
			maxCount: 1
		}
	},
	{
		name: 'rich-text',
		label: '富文本',
		type: 'rich-text',
		placeholder: '请输入正文信息'
	}
]

export default fields