<template>
	<div class="page">
		<BaseTable
			v-if="visible"
			ref="baseTable"
			:action="action"
			:batch-operation="batchOperation"
			:columns="columnsProps"
			:init-params="{ tableId: tableId }"
			:operation="operation"
			:search="searchFieldList"
		>
			<template v-slot:operation>
				<a-button type="primary" @click="useManageMethod.handleUpdate(undefined)">新增</a-button>
				<a-button type="primary" @click="useManageMethod.handleUpdate(undefined)">导入</a-button>
				<a-button type="primary" @click="handleClickExportData()">导出</a-button>
				<a-button type="primary" @click="handleClickDownloadImportTemplate()">下载模板</a-button>
			</template>
		</BaseTable>
		<a-drawer
			:closable="true"
			:maskClosable="false"
			:title="update.title"
			:visible="update.visible"
			destroyOnClose
			placement="right"
			width="40%"
			@close="update.visible = false"
		>
			<Add
				:id="update.id"
				:dictionary-id-map="dictionaryIdMap"
				:fields="formFieldList"
				:show-table-field-list="showTableFieldList"
				:table-id="tableId"
				@cancel="update.visible = false"
				@refresh="useManageMethod.refresh()"
			/>
		</a-drawer>
	</div>
</template>

<script lang="ts" setup>
import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
import recordMethod, { ShowTableField } from './columns'
import requestMethod from '../../../../api/dynamic/record'
import BaseTable from '../../../../components/table/BaseTable.vue'
import { BatchOperationProps, ColumnsProps, OperationProps, SearchProps } from '../../../../components/table/table-helper'
import { manageMethod } from '../../../../components/form/method'
import { DynamicFormTable } from '../../../../entity/dynamic/dynamic-form-table'
import { FieldProps } from '../../../../components/form-item/field-props'
import { ResultModel } from '../../../../http/result-model'
import { confirmMethod, messageMethod } from '../../../../utils/message-util'
import { QueryObjectType } from '../../../../http/request-model'
import { BaseUtil } from '../../../../utils/base-util'

const Add = defineAsyncComponent(() => import('./Add.vue'))

const action = ref(requestMethod.page)

const props = defineProps<{
	id?: string
	code?: string
}>()

const columnsProps = ref<ColumnsProps<unknown>[]>([])
const formFieldList = ref<FieldProps[]>([])
const searchFieldList = ref<SearchProps[]>([])

// 修改管理面板
const useManageMethod = manageMethod<DynamicFormTable>()
const update = useManageMethod.update

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

const resultTableId = ref<string>('')
const tableId = computed<string>(() => props.id || resultTableId.value)
const dictionaryIdMap = ref<{ [key: string]: string }>({})
const showTableFieldList = ref<ShowTableField[]>([])

let tableName = ''

onMounted(async () => {
	const useRecordInfo = await recordMethod(props.id || '', props.code || '')
	columnsProps.value.push(...useRecordInfo.tableColumnList)
	formFieldList.value.push(...useRecordInfo.formFieldList)
	searchFieldList.value.push(...useRecordInfo.searchFieldList)
	resultTableId.value = useRecordInfo.tableId
	dictionaryIdMap.value = useRecordInfo.dictionaryIdMap
	showTableFieldList.value = useRecordInfo.showTableFieldList
	tableName = useRecordInfo.tableName
	visible.value = true
})

// 列表操作信息
const operation = ref<OperationProps<unknown>[]>([
	{
		title: '修改',
		action: useManageMethod.handleUpdate
	},
	{
		title: '删除',
		danger: true,
		action: (vo: unknown) => {
			confirmMethod.info('确认删除？', async () => {
				const resultModel: ResultModel<boolean> = await requestMethod.delete(tableId.value, (vo as QueryObjectType).id as string)
				messageMethod.success(resultModel.message)
				useManageMethod.baseTable().pageRequest()
			})
		}
	}
])

// 批量删除
const batchOperation = ref<BatchOperationProps<unknown>[]>([
	{
		title: '批量删除',
		danger: true,
		action: async ({ keys }) => {
			confirmMethod.info('确认删除？', async () => {
				const resultModel: ResultModel<boolean> = await requestMethod.deleteBatch(tableId.value, keys)
				messageMethod.success(resultModel.message)
				useManageMethod.baseTable().pageRequest()
			})
		}
	}
])

// 下载模板
const handleClickDownloadImportTemplate = () => {
	requestMethod.downloadImportTemplate(tableId.value).then(data => {
		messageMethod.success('下载模板导出成功！')
		BaseUtil.downFile(data.data, `${tableName}_导入模板_${new Date().getTime()}.xlsx`)
	})
}

// 导出数据
const handleClickExportData = () => {
	const query = useManageMethod.baseTable().queryList()
	requestMethod.exportData(tableId.value, query).then(data => {
		messageMethod.success('下载模板导出成功！')
		BaseUtil.downFile(data.data, `${tableName}_导入模板_${new Date().getTime()}.xlsx`)
	})
}
</script>

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