<template>
	<div class="page">
		<BaseTable
			v-if="visible"
			ref="baseTable"
			:calculate-height="false"
			:columns="columnsProps"
			:operation="props.read ? [] : operation"
			:search="[]"
			:table-data="isFilter ? filterDataList : props.list"
			hidden-page
			title=""
		>
			<template v-slot:operation>
				<a-button :disabled="columnLength >= MAX_COLUMN_LENGTH" @click="emits('add-row')">
					<template #icon>
						<PlusOutlined />
					</template>
					添加字段
				</a-button>
				<a-button>
					<template #icon>
						<ImportOutlined />
					</template>
					导入字段
				</a-button>
				<a-checkbox v-model:checked="isFilter">隐藏默认字段</a-checkbox>
				<!--				<span>{{ columnLength }} / {{ MAX_COLUMN_LENGTH }}</span>-->
			</template>
		</BaseTable>
	</div>
</template>

<script lang="ts" setup>
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { ImportOutlined, PlusOutlined } from '@ant-design/icons-vue'
import BaseTable from '../../../../components/table/BaseTable.vue'
import { DynamicFormTableColumnVo } from '../../../../entity/dynamic/dynamic-form-table'
import requestDictionaryMethod from '../../../../api/system/dictionary-type'
import requestTableMethod from '../../../../api/dynamic/table'
import columns from './columns'
import columnsRead from './columns-read'
import { FieldType } from './field-type'
import { ColumnsProps, OperationProps } from '../../../../components/table/table-helper'
import { confirmMethod } from '../../../../utils/message-util'
import { useDynamicTableStore } from '../../../../store/dynamic-table'

// 定义基本的参数信息
const props = defineProps<{
	tableId?: string
	read?: boolean
	list?: DynamicFormTableColumnVo[]
	defaultColumnList?: string[]
}>()

// 是否筛选字段
const isFilter = ref<boolean>(true)

// 筛选后的显示字段
const filterDataList = computed<DynamicFormTableColumnVo[]>(() => {
	const list = props.list || []
	const defaultColumnList = props.defaultColumnList || []
	if (defaultColumnList.length == 0) {
		return list
	}
	return list.filter(item => !defaultColumnList.includes(item.columnName))
})

const columnsProps = ref<ColumnsProps<DynamicFormTableColumnVo>[]>([])

const columnLength = computed<number>(() => props.list?.length || 0)

// 最大字段数量
const MAX_COLUMN_LENGTH = 50

// 显示表格
const visible = ref<boolean>(false)

const emits = defineEmits<{
	(e: 'remove', id: string): void
	(e: 'add-row'): void
}>()

onMounted(async () => {
	const map: { [key: string]: FieldType[] } = {}

	// 查询数据字典的信息
	await Promise.all([
		requestDictionaryMethod.listRootDictionary().then(data => {
			map['数据字典'] = data.data.map(
				item =>
					<FieldType>{
						key: item.itemCode,
						label: item.itemName,
						size: '32',
						type: 'varchar',
						keyType: 4
					}
			)
		}),
		requestTableMethod.map().then(data => {
			map['动态表单'] = data.data.map(
				item =>
					<FieldType>{
						key: item.id,
						label: item.tableComment,
						size: '32',
						type: 'varchar',
						keyType: 3
					}
			)
		})
	])
	// 设置列信息
	columnsProps.value.push(...(props.read ? columnsRead(map) : columns(map)))
	visible.value = true
})

// 列表操作信息
const operation = ref<OperationProps<DynamicFormTableColumnVo>[]>([
	{
		title: '移除',
		danger: true,
		check: (vo: DynamicFormTableColumnVo) => vo.updateType === 0,
		action: (vo: DynamicFormTableColumnVo) => {
			confirmMethod.info('确认移除？', () => {
				emits('remove', vo.id)
			})
		}
	}
])

const baseTable = ref<InstanceType<typeof BaseTable>>(null)

defineExpose({
	dataList: (): Array<DynamicFormTableColumnVo> => baseTable.value.dataList() as Array<DynamicFormTableColumnVo>
})

const dynamicTableStore = useDynamicTableStore()

// 移除挂载事件
onBeforeUnmount(() => {
	dynamicTableStore.$reset()
})
</script>

<style lang="scss" scoped>
.page {
	height: 100%;
	min-height: 500px;
	display: flex;
	flex-direction: column;
}
</style>
