<template>
	<div class="auxiliary-departmental-book-container layout-padding">
		<div class="layout-padding-auto layout-padding-view pd20">
			<splitpanes class="h100" Vertical>
				<pane min-size="16" max-size="25" size="16">
					<el-scrollbar class="h100" ref="scrollBarRef">
						<el-skeleton :loading="state.loading" animated :rows="10">
							<template #default>
								<v-tree-search
									:data="state.orgData"
									titleField="name"
									keyField="id"
									selectable
									searchPlaceholder="部门名称"
									@select="selectOrg"
									@unselect="unSelectOrg"
									ref="treeSearchRef"
								>
									<template #node="{ node }">
										<span>{{ node.name }}</span>
									</template>
								</v-tree-search>
<!--								<el-auto-resizer class="table">
									<template #default="{ height }">
										<el-tree-v2
											:data="state.orgData"
											:filter-method="filterNodeOrg"
											ref="treRef"
											highlight-current
											:expand-on-click-node="false"
											@node-click="handleNodeClick"
											:item-size="36"
											:height="height"
											empty-text="暂无组织数据"
											:props="{ label: 'name', value: 'id' }"
										>
											<template #default="{ node }">
												<text-tooltip :content="node.label" effect="dark" placement="top"></text-tooltip>
											</template>
										</el-tree-v2>
									</template>
								</el-auto-resizer>-->
							</template>
						</el-skeleton>
					</el-scrollbar>
				</pane>
				<pane class="h100" style="display: flex; flex-direction: column; flex: 1">
					<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
						<el-form-item label="姓名" prop="Name">
							<el-input v-model="state.queryParams.Name" placeholder="用户姓名" clearable @keyup.enter="handleQuery" class="keyword-input" />
						</el-form-item>
						<el-form-item label="部门" prop="OrgName">
							<el-input v-model="state.queryParams.OrgName" placeholder="部门名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
						</el-form-item>
						<el-form-item label="手机号码" prop="PhoneNo">
							<el-input v-model="state.queryParams.PhoneNo" placeholder="手机号码" clearable @keyup.enter="handleQuery" class="keyword-input" />
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="handleQuery" :loading="state.tableLoading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
							<el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.tableLoading">
								<SvgIcon name="ele-Refresh" class="mr5" />重置
							</el-button>
						</el-form-item>
					</el-form>
					<vxe-toolbar
						ref="toolbarRef"
						:loading="state.tableLoading"
						custom
						:refresh="{
							queryMethod: handleQuery,
						}"
						:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
					>
					</vxe-toolbar>
					<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
						<vxe-table
							border
							:loading="state.tableLoading"
							:data="state.tableData"
							:column-config="{ resizable: true }"
							:row-config="{ isCurrent: true, isHover: true, height: 30,useKey: true }"
							ref="tableRef"
							height="auto"
							auto-resize
							show-overflow
							:print-config="{}"
							:scrollY="{ enabled: true, gt: 100 }"
							id="auxiliaryDepartmentalBook"
							:custom-config="{ storage: true }"
							showHeaderOverflow
							:params="{ exportMethod: exportUserList, exportParams: requestParams }"
						>
							<vxe-column field="name" title="姓名" min-width="120"></vxe-column>
							<vxe-column field="userName" title="账号" minwidth="120"></vxe-column>
							<vxe-column field="fullOrgName" title="所属部门" width="150"></vxe-column>
							<vxe-column field="organization.orgTypeText" title="部门类别" width="110"></vxe-column>
							<vxe-column field="roleNames" title="角色" width="120"></vxe-column>
							<vxe-column field="phoneNo" title="手机号码" width="140"></vxe-column>
							<vxe-column field="landlineNumber" title="座机号码" width="120"></vxe-column>
							<vxe-column field="defaultTelNo" title="分机号" width="120"></vxe-column>
						</vxe-table>
					</div>
					<pagination
						@pagination="queryList"
						:total="state.total"
						v-model:current-page="state.queryParams.PageIndex"
						v-model:page-size="state.queryParams.PageSize"
						:disabled="state.tableLoading"
					/>
				</pane>
			</splitpanes>
		</div>
	</div>
</template>

<script lang="tsx" setup name="auxiliaryDepartmentalBook">
import { defineAsyncComponent, onActivated, onMounted, reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus';
import { getCanUseOrgByUser, getUserListPaged, exportUserList } from '@/api/system/user';
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
import Other from '@/utils/other';
import { VTreeSearch } from '@wsfe/vue-tree';

const TextTooltip = defineAsyncComponent(() => import('@/components/TextTooltip/index.vue'));
const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
// 定义变量内容
const state = reactive<any>({
	queryParams: {
		PageIndex: 1, // 当前页
		PageSize: 20, // 每页条数
		Name: null, // 姓名
		OrgName: null, // 部门名称
		PhoneNo: null, // 手机号码
	},
	tableData: [], // 表格数据
	total: 0, // 总条数
	loading: false, // 加载状态
	tableLoading: false, // 表格加载状态
	orgData: [], // 组织结构数据
	roleOptions: [], // 角色数据
	baseData: [], // 基础数据
	telsList: [], // 分机数据
	telsListGroup: [], //分机组
});
const ruleFormRef = ref<FormInstance>(); //表单ref
const treRef = ref<RefType>(); // 树形组件ref
/** 搜索按钮操作 节流操作 */
const handleQuery = () => {
	state.queryParams.PageIndex = 1;
	queryList();
};
// 获取所有组织结构
const getOrgListApi = () => {
	state.loading = true;
	getCanUseOrgByUser()
		.then((res: any) => {
			state.orgData = res?.result ?? [];
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
/** 获取用户列表 */
const requestParams = ref<EmptyObjectType>({});
const queryList = () => {
	state.tableLoading = true;
	requestParams.value = Other.deepClone(state.queryParams);
	getUserListPaged(requestParams.value)
		.then((response: any) => {
			state.tableData = response?.result.items ?? [];
			state.total = response?.result.total;
			state.tableLoading = false;
		})
		.catch(() => {
			state.tableLoading = false;
		});
};
// 点击部门
const selectOrg = (data: any) => {
	state.queryParams.OrgCode = data.id;
	queryList();
};
// 取消单选
const unSelectOrg = () => {
	state.queryParams.OrgCode = null;
	queryList();
};
/** 重置按钮操作 */
const treeSearchRef = ref<RefType>();
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	treeSearchRef.value.setSelected(state.queryParams.OrgCode, false); // 清空选择
	treeSearchRef.value.clearKeyword(); // 清空搜索关键词
	treeSearchRef.value.search(); // 搜索
	formEl.resetFields();
	state.queryParams.OrgCode = null;
	handleQuery();
	setTimeout(() => {
		treeSearchRef.value.setExpandAll(false); // 默认全部收起
	}, 300);
};
const tableRef = ref<RefType>();
const toolbarRef = ref<RefType>();
onMounted(() => {
	queryList();
	if (tableRef.value && toolbarRef.value) {
		tableRef.value.connect(toolbarRef.value);
	}
	getOrgListApi();
});
onActivated(()=>{
	treeSearchRef.value.scrollTo(state.queryParams.OrgCode); // 滚动
})
</script>
>
