<template>
	<div class="system-role-container layout-padding">
		<div class="layout-padding-auto layout-padding-view pd20">
			<!-- 通用搜索 -->
			<transition name="el-zoom-in-bottom" mode="out-in">
				<el-form :model="queryParams" ref="ruleFormRef" :inline="true" @submit.native.prevent>
					<el-form-item label="是否注销" prop="IncludeDeleted">
						<el-select v-model="queryParams.IncludeDeleted" placeholder="请选择是否注销">
							<el-option v-for="item in state.IncludeDeletedList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="关键字查询" prop="Keyword">
						<el-input v-model="queryParams.Keyword" placeholder="角色名称/角色编码" clearable @keyup.enter="handleQuery" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleQuery" :loading="loading" v-waves> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
						<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
					</el-form-item>
				</el-form>
			</transition>
			<div class="flex-center-between mb20">
				<p class="table-title">信息列表</p>
				<div>
					<el-button type="primary" @click="onOpenAddRole" v-waves v-auth="'100201'"> <SvgIcon name="ele-Plus" class="mr5" />新增 </el-button>
					<el-button type="primary" v-waves @click="onImportTable" :disabled="!state.multipleSelection.length">
						<SvgIcon name="iconfont icon-daochu" class="mr5" />导出
					</el-button>
				</div>
			</div>
			<el-table :data="state.tableData.data" v-loading="loading" row-key="id" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" :reserve-selection="true" />
				<el-table-column type="index" width="60" label="序号" />
				<el-table-column prop="displayName" label="角色名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="name" label="角色编码" show-overflow-tooltip></el-table-column>
				<el-table-column prop="description" label="角色说明" show-overflow-tooltip width="400"></el-table-column>
				<el-table-column label="人员" show-overflow-tooltip width="80">
					<template #default="scope">
						<el-button title="查看当前角色下的人员" text type="primary" @click="showUserList(scope.row)">{{ scope.row.accountIds.length }}</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="state" label="状态" show-overflow-tooltip width="80"> </el-table-column>
				<el-table-column label="操作" width="130" fixed="right" align="center">
					<template #default="scope">
						<el-button text type="primary" @click="onOpenEditRole(scope.row)" v-auth="'100203'" title="修改">
							<SvgIcon name="ele-Edit" size="var(--hotline-table-icon-font-size)" />
						</el-button>
						<el-button text type="success" @click="onPermissions(scope.row)" v-auth="'100204'" title="配置权限">
							<SvgIcon name="iconfont icon-quanxian" size="var(--hotline-table-icon-font-size)" />
						</el-button>
						<el-button text type="info" @click="onDataAuth(scope.row)" v-auth="'100204'" title="数据权限">
							<SvgIcon name="ele-MessageBox" size="var(--hotline-table-icon-font-size)" />
						</el-button>
						<el-button text type="danger" @click="onRowDel(scope.row)" v-auth="'100202'" title="删除">
							<SvgIcon name="ele-Delete" size="var(--hotline-table-icon-font-size)" />
						</el-button>
					</template>
				</el-table-column>
				<template #empty>
					<Empty />
				</template>
			</el-table>
			<!-- 分页 -->
			<pagination :total="tableData.total" v-model:page="queryParams.PageIndex" v-model:limit="queryParams.PageSize" @pagination="getList" />
		</div>
		<AddRole ref="addRoleRef" @updateList="handleQuery" />
		<EditRole ref="editRoleRef" @updateList="handleQuery" />
		<PermissionRole ref="PermissionRoleRef" @updateList="handleQuery" />
		<UserList ref="UserListRef" />
	</div>
</template>

<script lang="ts" setup name="systemRole">
import { defineAsyncComponent, toRefs, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import type { FormInstance } from 'element-plus';
import { useRouter } from 'vue-router';
import { throttle } from '/@/utils/tools';
import { formatDate } from '/@/utils/formatTime';
import { getRoleListPaged, delRole } from '/@/api/system/roles';
import table2excel from 'js-table2excel';
// 定义接口来定义对象的类型
interface TableDataState {
	tableData: {
		data: Array<any>;
		total: number;
	};
	loading: boolean;
	multipleSelection: Array<any>;
	IncludeDeletedList: Array<any>;
}
interface QueryState {
	queryParams: {
		PageIndex: number;
		PageSize: number;
		Keyword?: string;
		IncludeDeleted?: string | boolean;
	};
}

// 引入组件
const AddRole = defineAsyncComponent(() => import('/@/views/system/roles/component/addRole.vue'));
const EditRole = defineAsyncComponent(() => import('/@/views/system/roles/component/editRole.vue'));
const PermissionRole = defineAsyncComponent(() => import('/@/views/system/roles/component/permission.vue'));
const UserList = defineAsyncComponent(() => import('/@/views/system/roles/component/userList.vue'));

// 定义变量内容
const addRoleRef = ref();
const editRoleRef = ref();
const PermissionRoleRef = ref();
const UserListRef = ref();
const ruleFormRef = ref<FormInstance>();
const state = reactive<TableDataState>({
	tableData: {
		data: [],
		total: 0,
	},
	loading: false,
	multipleSelection: [],
	IncludeDeletedList: [
		{
			label: '正常',
			value: false,
		},
		{
			label: '注销',
			value: true,
		},
	],
});
const data = reactive<QueryState>({
	queryParams: {
		PageIndex: 1,
		PageSize: 10,
		Keyword: '',
		IncludeDeleted: false,
	},
});
const { queryParams } = toRefs(data);
const { tableData, loading } = toRefs(state);
const router = useRouter();
/** 搜索按钮操作 节流操作 */
const handleQuery = throttle(() => {
	data.queryParams.PageIndex = 1;
	getList();
}, 1000);
/** 重置按钮操作 */
const resetQuery = throttle((formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	handleQuery();
}, 1000);
/** 获取角色列表 */
const getList = () => {
	state.loading = true;
	getRoleListPaged(data.queryParams)
		.then((response: any) => {
			state.tableData.data = response?.result.items ?? [];
			state.tableData.total = response?.result.total ?? 0;
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
// 打开新增角色弹窗
const onOpenAddRole = () => {
	addRoleRef.value.openDialog();
};
// 打开修改角色弹窗
const onOpenEditRole = (row: Object) => {
	editRoleRef.value.openDialog(row);
};
// 打开配置权限弹窗
const onPermissions = (row: Object) => {
	PermissionRoleRef.value.openDialog(row);
};
// 打开人员列表弹窗
const showUserList = (row: Object) => {
	UserListRef.value.openDialog(row);
};
// 打开数据权限
const onDataAuth = (row: any) => {
	router.push({
		path:'/system/roles/dataAuth',
		query:{
			id:row.id,
			code:row.name,
			tagsViewName:'数据权限 '+row.displayName
		}
	})
}
// 表格多选
const handleSelectionChange = (val: any) => {
	state.multipleSelection = val;
};
// 删除角色
const onRowDel = (row: any) => {
	ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.displayName}”，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
	})
		.then(() => {
			delRole(row.id).then(() => {
				ElMessage.success('删除成功');
				handleQuery();
			});
		})
		.catch(() => {});
};
// 导出表格
const onImportTable = () => {
	const tabeHeader = [
		{ key: 'displayName', colWidth: '', title: '角色名称', type: 'text', isCheck: true },
		{ key: 'name', colWidth: '', title: '角色编码', type: 'text', isCheck: true },
		{ key: 'description', colWidth: '', title: '角色说明', type: 'text', isCheck: true },
		{ key: 'state', colWidth: '', title: '状态', type: 'text', isCheck: true },
	];
	table2excel(tabeHeader, state.multipleSelection, `角色信息 ${formatDate(new Date(), 'YYYY-mm-dd HH-MM')}`);
};
// 页面加载时
onMounted(() => {
	handleQuery();
});
</script>
<style lang="scss" scoped>
.system-role-container {
	.el-table {
		flex: 1;
	}
}
</style>
