<template>
	<div class="page">
		<BaseTable
			ref="baseTable"
			:action="action"
			:batch-operation="batchOperation"
			:columns="columns"
			:max-operation="99"
			:operation="operation"
			:search="searchProps"
			:use-keywords="false"
		>
			<template v-slot:operation>
				<a-button v-auth type="primary" @click="useManageMethod.handleUpdate(undefined)">新增</a-button>
				<a-button v-auth="'导入'" type="primary" @click="handleImportModule"> 导入模版</a-button>
				<BaseUpload
					v-auth="'导入'"
					:action="actionImport"
					:btn-text="'导入'"
					:btnType="'primary'"
					:textColor="'#fff'"
					:uploadAccept="'.xlsx'"
					:uploadListType="'text'"
					@upload-success="handleImport"
				>
				</BaseUpload>
				<a-button v-auth="'导出'" type="primary" @click="handleExportUser">导出</a-button>
			</template>
		</BaseTable>
		<dc-drawer
			:closable="true"
			:maskClosable="false"
			:showBottom="!update.id"
			:title="update.title"
			:visible="update.visible"
			:width="update.width"
			destroyOnClose
			placement="right"
			@close="update.visible = false"
		>
			<Add :id="update.id" @cancel="update.visible = false" @refresh="useManageMethod.refresh()" />
		</dc-drawer>
		<dc-drawer
			:closable="true"
			:maskClosable="false"
			:showBottom="false"
			:title="detailPanel.title"
			:visible="detailPanel.visible"
			:width="detailPanel.width"
			destroyOnClose
			placement="right"
			@close="detailPanel.visible = false"
		>
			<Detail :id="detailPanel.id" />
		</dc-drawer>
	</div>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, onMounted, ref } from 'vue'
import requestMethod from '../../../api/account//user'
import { AccountUserVo } from '../../../entity/account/account-user'
import BaseTable from '../../../components/table/BaseTable.vue'
import columns from './columns'
import search from './search'
import { BatchOperationProps, OperationProps, SearchProps } from '../../../components/table/table-helper'
import { confirmMethod, messageMethod } from '../../../utils/message-util'
import requestOrg from '../../../api/account/organization'
import { AccountOrg } from '../../../entity/account/account-org'
import { ResultModel } from '../../../http/result-model'
import { drawerMethod, manageMethod } from '../../../components/form/method'
import BaseUpload from '../../../components/BaseUpload.vue'
import { BaseUtil } from '../../../utils/base-util'

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

const useManageMethod = manageMethod<AccountUserVo>()
const useDetailDrawerMethod = drawerMethod<AccountUserVo>(vo => `${vo.userName}的基本信息`)

// 修改面板参数
const update = useManageMethod.update
// 详情面板参数
const detailPanel = useDetailDrawerMethod.panel

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

// 列表操作信息
const operation = ref<OperationProps<AccountUserVo>[]>([
	{
		title: '详情',
		permission: '修改',
		action: useDetailDrawerMethod.open
	},
	{
		title: '修改',
		permission: true,
		action: useManageMethod.handleUpdate
	},
	{
		title: '重置',
		permission: true,
		action: (vo: AccountUserVo) => {
			requestMethod.resetPwd(vo.id).then(() => {
				messageMethod.success('重置密码成功')
			})
		}
	},
	{
		title: '删除',
		danger: true,
		permission: true,
		action: (vo: AccountUserVo) => {
			confirmMethod.info('确认删除？', () => {
				requestMethod.delete(vo.id).then(data => {
					messageMethod.success(data.message)
					useManageMethod.baseTable().pageRequest()
				})
			})
		}
	}
])

// 批量删除
const batchOperation = ref<BatchOperationProps<AccountUserVo>[]>([
	{
		title: '批量删除',
		danger: true,
		permission: '删除',
		action: async ({ keys }) => {
			// 刷新页面
			const resultModel: ResultModel<boolean> = await requestMethod.deleteBatch(keys)
			messageMethod.success(resultModel.message)
			useManageMethod.baseTable().pageRequest()
		}
	}
])

// 单位列表
const searchProps = ref<SearchProps[]>([])
const orgList = ref<AccountOrg[]>([])

onMounted(async () => {
	searchProps.value = search([])
	// 获取单位信息
	requestOrg.formSelect().then((res: ResultModel<Array<AccountOrg>>) => {
		searchProps.value = search(res.data)
		orgList.value = res.data
	})
})

// 获取导入模版
const handleImportModule = () => {
	requestMethod.getExcelImportTemplate('AccountUser.xlsx').then(res => {
		BaseUtil.downFile(res.data, '用户信息模板.xlsx')
	})
}

// 导出
const handleExportUser = () => {
	requestMethod.exportUser(useManageMethod.baseTable().queryList()).then(res => {
		messageMethod.success('导出用户数据成功！')
		BaseUtil.downFile(res.data, '用户信息.xlsx')
	})
}

const actionImport = 'accountUser/importUser'

// 导入
const handleImport = () => {
	messageMethod.success('导入用户信息成功')
	useManageMethod.baseTable().pageRequest()
}
</script>

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