<!--@Author: volcano-->
<!--@Date: 2022/2/12-->
<template>
	<div class="page">
		<BaseTable
			ref="baseTable"
			:action="action"
			:columns="columns"
			:isDisabled="false"
			:max-operation="3"
			:operation="operation"
			:search="search"
			:use-keywords="false"
		>
			<template v-slot:operation>
				<a-button type="primary" v-if="checkPermission('新增')" @click="useManageMethod.handleUpdate(undefined)">新增 </a-button>
			</template>
		</BaseTable>
		<a-drawer
			v-if="update.visible"
			:closable="true"
			:title="update.title"
			:visible="update.visible"
			:width="update.width"
			placement="right"
			@close="update.visible = false"
		>
			<Add :id="update.id" @cancel="update.visible = false" @refresh="useManageMethod.refresh()" />
		</a-drawer>
	</div>
</template>

<script lang="ts" setup>
import BaseTable from '../../../components/table/BaseTable.vue'
import columns from './columns'
import requestMethod from '../../../api/system/dictionary-type'

import { defineAsyncComponent, ref } from 'vue'
import { OperationProps, SearchProps } from '../../../components/table/table-helper'
import { DictionaryType } from '../../../entity/system/dictionary-type'
import { confirmMethod, messageMethod } from '../../../utils/message-util'
import { manageMethod } from '../../../components/form/method'
import { checkPermission } from '../../../utils/permission-util'

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

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

const search = ref<SearchProps[]>([])

// 列表页公共方法
const useManageMethod = manageMethod<DictionaryType>()
// 修改面板参数
const update = useManageMethod.update

// 获取当前的数据表
const baseTable = ref<InstanceType<typeof BaseTable>>(null)

// 列表操作信息
const operation = ref<OperationProps<DictionaryType>[]>([
	{
		title: '修改',
		permission: true,
		action: useManageMethod.handleUpdate
	},
	{
		title: '删除',
		danger: true,
		permission: true,
		action: (vo: DictionaryType) => {
			confirmMethod.info('确认删除？', () => {
				requestMethod.delete(vo.id).then(data => {
					messageMethod.success(data.message)
					useManageMethod.refresh()
				})
			})
		}
	}
])
</script>

<style scoped>
.page {
	padding: 20px 30px;
	height: 100%;
	display: flex;
	flex-direction: column;
}
</style>
