<template>
	<div class="table-box">
		<ProTable
			ref="proTable"
			title="用户列表"
			:columns="columns"
			:requestApi="getTableList"
			:initParam="initParam"
			:dataCallback="dataCallback"
			:tool-button="false"
			:pagination="true"
			background
			:isShowSearch="false"
		>
			<!-- 表格 header 按钮 -->
			<!-- <template #tableHeader="scope">
				<el-button type="primary" :icon="CirclePlus" @click="handleAddItem()">新增用户</el-button>
			</template> -->
			<template #formButton="scope">
				<el-button type="primary" @click="handleAddItem()">新增</el-button>
			</template>
			<!-- 表格操作 -->
			<template #operation="scope">
				<el-button type="primary" link :icon="EditPen" @click="handleEditItem('edit', scope.row)">编辑</el-button>
				<el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
			</template>
		</ProTable>

		<DialogForm
			:title="title"
			:formConfig="formConfig"
			:formData="formData"
			v-model:visible="visible"
			append-to-body
			width="700px"
			@confirm="saveItem"
		>
		</DialogForm>
	</div>
</template>

<script setup lang="tsx" name="jxjSystem">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { User } from "@/api/interface";
import { ColumnProps } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { useDownload } from "@/hooks/useDownload";
import ProTable from "@/components/ProTable/index.vue";
import DialogForm from "@/components/DialogForm/index.vue";
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
import { getUserList, deleteUser, editUser, addUser } from "@/api/modules/jxjview";

const router = useRouter();

const visible = ref(false);
const title = ref("");
const formData = ref({});
const mode = ref("");
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();
// 添加数据按钮
const handleAddItem = () => {
	mode.value = "add";
	visible.value = true;
	title.value = "新增";
	formData.value = reactive({});
};

// 修改数据按钮
function handleEditItem(index: string, row: any) {
	mode.value = "edit";
	visible.value = true;
	title.value = "编辑";
	formData.value = reactive(row);
}

// 表格配置项
const columns: ColumnProps[] = [
	{
		prop: "configId",
		label: "序号"
	},
	{
		prop: "configKey",
		label: "配置名称",
		search: { el: "input" }
	},
	// 多级 prop
	{ prop: "configName", label: "配置键名" },
	{ prop: "configValue", label: "配置键值" },
	{ prop: "remark", label: "备注" },
	{ prop: "operation", label: "操作", fixed: "right", width: 330 }
];

// 弹窗中的配置
const formConfig = {
	formItemConfig: [
		{
			label: "配置名称",
			prop: "configKey",
			type: "input"
		},
		{
			label: "配置键名",
			prop: "configName",
			type: "input"
		},
		{
			label: "配置键值",
			prop: "configValue",
			type: "input"
		},
		{
			label: "备注",
			prop: "remark",
			type: "input"
		}
	],
	rules: {
		configKey: [
			{
				required: true,
				message: "请输入类型名",
				trigger: "blur"
			}
		]
	}
};

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	type: 1
});

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
	// console.log(data);
	return {
		list: data.records,
		total: Number(data.total),
		pageNo: Number(data.current),
		pageSize: Number(data.size)
	};
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
	let newParams = JSON.parse(JSON.stringify(params));
	return getUserList(newParams);
};

// 新增，编辑数据
const saveItem = async (form: any) => {
	if (form.configId) {
		console.log(form.configId);
		const res = await editUser(form);
		proTable.value.getTableList();
		ElMessage.success("编辑成功");
	} else {
		const res = await addUser(form);
		ElMessage.success("新增成功");
		proTable.value.getTableList();
	}
	visible.value = false;
};

// 删除用户信息
const deleteAccount = async (params: User.ResUserList) => {
	await useHandleData(deleteUser, { configId: params.configId }, `删除【${params.username}】用户`);
	proTable.value.getTableList();
};
</script>
