import { h } from 'vue'
import { ColumnsProps } from '../../../../components/table/table-helper'
import { DynamicFormTableColumnVo } from '../../../../entity/dynamic/dynamic-form-table'
import { Checkbox, Input, Select, SelectOption } from 'ant-design-vue'
import { FieldType, getKeyTypeMap, getTypeOption, putTypeArray, refreshData } from './field-type'
import { useDynamicTableStore } from '../../../../store/dynamic-table'

export const SEARCH_TYPE_MAP = ['不显示', '精确查询', '模糊查询', '段查询']
export const SHOW_TYPE_MAP = ['不显示', '显示', '列表显示', '表单显示']

const columns = (object: { [key: string]: FieldType[] }) => {
	const dynamicTableStore = useDynamicTableStore()
	// 执行初始化
	Object.keys(object).forEach(key => {
		putTypeArray(key, object[key])
	})
	// 获取字段类型的下拉框属性信息
	const keyTypeMap = getKeyTypeMap()
	const typeOption = getTypeOption()
	return <ColumnsProps<DynamicFormTableColumnVo>[]>[
		{
			title: '字段名称',
			dataIndex: 'columnComment',
			customRender: ({ record }) => {
				if (record.updateType === 0) {
					h(Input, {
						value: record.columnComment,
						placeholder: '请输入字段名称',
						bordered: false,
						onChange: (e: Event) => {
							const target = e.target as unknown as Required<{ value: string }>
							record.columnComment = target.value
							record.saveType = 2
						}
					})
				}
				return record.columnComment
			}
		},
		{
			title: '字段编号',
			dataIndex: 'columnName',
			customRender: ({ record }) => {
				if (record.updateType === 0) {
					h(Input, {
						value: record.columnName,
						placeholder: '请输入字段编号',
						bordered: false,
						onChange: (e: Event) => {
							const target = e.target as unknown as Required<{ value: string }>
							record.columnName = target.value
							record.saveType = 2
						}
					})
				}
				return record.columnName
			}
		},
		{
			title: '字段类型',
			width: 150,
			dataIndex: 'columnType',
			customRender: ({ record }) => {
				// 进入的第一次需要进行一次刷新信息
				refreshData(record, false)
				if (record.updateType === 0) {
					h(Select, {
						value: record.columnKeyId,
						style: 'width: 100%',
						showSearch: true,
						options: typeOption,
						onChange: async value => {
							record.columnKeyId = value as string
							// 设置默认的长度信息
							const item = keyTypeMap[record.columnKeyId]
							record.columnSize = item?.size
							record.columnType = item?.type
							record.columnKeyType = item?.keyType
							record.defaultValue = item?.defaultValue
							// 如果是数据字典的类型
							refreshData(record, true)
						}
					})
					return
				}
				// 渲染
				return keyTypeMap[record.columnKeyId]?.label || ''
			}
		},
		{
			title: '显示内容',
			width: 150,
			dataIndex: 'showTextField',
			customRender: ({ record }) => {
				if (record.columnKeyType != 3) {
					return '/'
				}
				return h(Select, {
					value: record.showTextField,
					style: 'width: 100%',
					showSearch: true,
					placeholder: '请选择下拉列表显示的字段',
					options: dynamicTableStore.listColumns(record.columnKeyId),
					onChange: value => {
						record.showTextField = value as string
					}
				})
			}
		},
		{
			title: '字段长度',
			width: 80,
			dataIndex: 'columnSize',
			customRender: ({ record }) => {
				if (record.updateType === 0) {
					h(Input, {
						value: record.columnSize,
						bordered: false,
						onChange: (e: Event) => {
							const target = e.target as unknown as Required<{ value: string }>
							record.columnSize = target.value
							record.saveType = 2
						}
					})
				}
				return record.columnSize
			}
		},
		{
			title: '默认值',
			dataIndex: 'defaultValue',
			customRender: ({ record }) => {
				if (record.updateType) {
					return h(Input, {
						value: record.defaultValue,
						placeholder: '在此填入默认值',
						bordered: false,
						onChange: (e: Event) => {
							const target = e.target as unknown as Required<{ value: string }>
							record.defaultValue = target.value
							record.saveType = 2
						}
					})
				}
				return record.defaultValue
			}
		},
		{
			title: '是否必填',
			align: 'center',
			width: 80,
			dataIndex: 'isRequired',
			customRender: ({ record }) =>
				h(Checkbox, {
					checked: record.isRequired === 1,
					disabled: record.updateType === 1,
					onChange: (e: Event) => {
						const target = e.target as unknown as Required<{ checked: boolean }>
						record.isRequired = target.checked ? 1 : 0
						record.saveType = 2
					}
				})
		},
		{
			title: '显示状态',
			width: 120,
			dataIndex: 'showType',
			customRender: ({ record }) =>
				h(
					Select,
					{
						value: record.showType,
						style: 'width: 100%',
						onChange: value => {
							record.showType = value as number
							record.saveType = 2
						}
					},
					{
						default: () => [
							h(SelectOption, { value: 0 }, { default: () => '不显示' }),
							h(SelectOption, { value: 1 }, { default: () => '显示' }),
							h(SelectOption, { value: 2 }, { default: () => '列表显示' }),
							h(SelectOption, { value: 3 }, { default: () => '表单显示' })
						]
					}
				)
		},
		{
			title: '查询条件',
			width: 120,
			dataIndex: 'searchType',
			customRender: ({ record }) =>
				h(
					Select,
					{
						value: record.searchType,
						style: 'width: 100%',
						onChange: value => {
							record.searchType = value as number
							record.saveType = 2
						}
					},
					{
						default: () => [
							h(SelectOption, { value: 0 }, { default: () => '不显示' }),
							h(SelectOption, { value: 1 }, { default: () => '精确查询' }),
							h(SelectOption, { value: 2 }, { default: () => '模糊查询' }),
							h(SelectOption, { value: 3 }, { default: () => '段查询' })
						]
					}
				)
		}
	]
}

export default columns