<template>
	<div class="page">
		<BaseTable
			ref="baseTable"
			:action="action"
			:batch-operation="batchOperation"
			:columns="columns"
			:max-operation="4"
			:operation="operation"
			:search="search"
		>
			<template v-slot:operation>
				<a-button type="primary" @click="useManageMethod.handleUpdate(undefined)">新增</a-button>
			</template>
		</BaseTable>
		<a-drawer
			:closable="true"
			:maskClosable="false"
			:title="update.title"
			:visible="update.visible"
			destroyOnClose
			placement="right"
			width="80%"
			@close="update.visible = false"
		>
			<Add :id="update.id" :table-id="parentTable.id" :table-title="parentTable.title" @cancel="handleAddCancel()" @refresh="useManageMethod.refresh()" />
		</a-drawer>
		<a-drawer
			:closable="true"
			:maskClosable="false"
			:title="detailPanel.title"
			:visible="detailPanel.visible"
			destroyOnClose
			placement="right"
			width="80%"
			@close="detailPanel.visible = false"
		>
			<Detail :id="detailPanel.id" />
		</a-drawer>
		<a-drawer
			:closable="true"
			:maskClosable="false"
			:title="tableRecordPanel.title"
			:visible="tableRecordPanel.visible"
			destroyOnClose
			placement="right"
			width="80%"
			@close="tableRecordPanel.visible = false"
		>
			<TableRecordManage :id="tableRecordPanel.id" />
		</a-drawer>
	</div>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, reactive, ref } from 'vue'
import requestMethod from '../../../api/dynamic/table'
import BaseTable from '../../../components/table/BaseTable.vue'
import columns from './columns'
import search from './search'
import { BatchOperationProps, OperationProps } from '../../../components/table/table-helper'
import { confirmMethod, messageMethod } from '../../../utils/message-util'
import { drawerMethod, manageMethod } from '../../../components/form/method'
import { DynamicFormTable } from '../../../entity/dynamic/dynamic-form-table'

const Add = defineAsyncComponent(() => import('./Add.vue'))
const Detail = defineAsyncComponent(() => import('./Detail.vue'))
const TableRecordManage = defineAsyncComponent(() => import('./table-record/Manage.vue'))

// 修改管理面板
const useManageMethod = manageMethod<DynamicFormTable>()
const update = useManageMethod.update
// 详情面板
const useDetailDrawerMethod = drawerMethod<DynamicFormTable>()
const detailPanel = useDetailDrawerMethod.panel
// 数据记录面板
const useTableRecordDrawerMethod = drawerMethod<DynamicFormTable>()
const tableRecordPanel = useTableRecordDrawerMethod.panel

// 列表查询信息的api
const action = ref<() => void>(requestMethod.page)

// 是否是子表创建需求
const parentTable = reactive<{
	id: string
	title: string
}>({
	id: '',
	title: ''
})

// 列表操作信息
const operation = ref<OperationProps<DynamicFormTable>[]>([
	{
		title: '数据记录',
		action: useTableRecordDrawerMethod.open
	},
	{
		title: '详情',
		action: useDetailDrawerMethod.open
	},
	{
		title: '修改',
		action: useManageMethod.handleUpdate
	},
	{
		title: '创建子表',
		action: (vo: DynamicFormTable) => {
			update.id = ''
			update.title = `新增 ${vo.tableComment} 的子表`
			parentTable.id = vo.id
			parentTable.title = vo.tableComment + '的主键id'
			update.visible = true
		}
	},
	{
		title: '删除',
		danger: true,
		action: (vo: DynamicFormTable) => {
			confirmMethod.info('确认删除？', () => {
				requestMethod.delete(vo.id).then(data => {
					messageMethod.success(data.message)
					useManageMethod.baseTable().pageRequest()
				})
			})
		}
	}
])

/**
 * 批量删除的表单信息
 */
const batchOperation = ref<BatchOperationProps<DynamicFormTable>[]>([
	{
		title: '批量删除',
		danger: true,
		action: async ({ keys }) => {
			confirmMethod.info('确认删除？', () => {
				requestMethod.batchDelete(keys).then(data => {
					messageMethod.success(data.message)
					useManageMethod.baseTable().pageRequest()
				})
			})
		}
	}
])

/**
 * 新增面板的取消事件
 */
const handleAddCancel = () => {
	update.visible = false
	parentTable.id = ''
}
</script>

<style scoped>
.page {
	height: 100%;
	display: flex;

	flex-direction: column;
}
</style>
