<!--
@ 作者: 秦东
@ 时间: 2023-06-03 15:12:26
@ 备注: 人员管理
-->
<script lang='ts' setup>
import { orgInfo } from '@/api/hr/org/type'
import { getOrgTreeList } from '@/api/hr/org/index'
import { archivesCont,searchCriteriaForPeople } from '@/api/hr/people/type'
import { emptypeOptions } from '@/api/hr/people/datacont'
import { getArchivesListPage } from '@/api/hr/people/index'
import UserRole from '@/assets/icons/user.svg'
import { UploadFilled } from '@element-plus/icons-vue'
/**
 * 引入页面
 */
 import ArchivesCont from '@/views/hr/archives/archivescont.vue'

 const uploadFFurl = import.meta.env.VITE_APP_BASE_API + "/hrapi/staff/uploadUserFiles"

const searchOrgFormRef = ref(ElForm);
const orgTreeRef = ref(ElTree);	//行政组织树
const orgTreeLoading = ref(false);	//加载行政组织树
const orgTreeList = ref<orgInfo[]>();				//行政组织树数据
const orgTreeProps ={
  children: 'child',
  label: 'name',
}	//行政组织树对照值
const peopleList = ref<archivesCont[]>();	//人员列表
const peoplecont = ref<archivesCont>();	//个人信息
const tableLoading = ref(false);	//加载数据列表
const total = ref(0);				//总记录数
const searchArchiveQuery = reactive<searchCriteriaForPeople>({
	page:1,
	pagesize:13
})
const archivesBox= ref(false);	//详情弹窗
/**用工关系（1:临时工 , 2:编外人员 ;3:实习&实习生;4：试用员工；5：待分配；6：待岗；7：临时调入；8：正式员工；9：长期病假；10：停薪留职；11：退休；12：辞职；13：辞退；14：离职）',
  `company` bigint(20) unsigned NOT NULL DEFAULT '0' COMMENT '入职公司',
 * 获取行政组织数据
 */
 function haveOrgTreeInfo(){
	orgTreeLoading.value = true;
	getOrgTreeList({})
		.then(({ data })=>{
			orgTreeList.value = data
		}).finally(()=>{orgTreeLoading.value = false;})
}
/**
 * 选中行政组织树节点
 */
const handleOrgTreeNodeClick = (data: orgInfo) => {
  	// console.log(data)
	searchArchiveQuery.adminorg = data.id
	getArchivesPage();
}
/**
 * 重置选中行政组织
 */
function resetChecked() {
	orgTreeRef.value!.setCheckedKeys([], false)
	searchArchiveQuery.adminorg = 0
}
/**
 * 重置搜索框
 */
 function resetArcFormQuery(){
	searchOrgFormRef.value.resetFields();
	searchArchiveQuery.emptype=[];
	resetChecked();
	getArchivesPage();
}
/**
 * 获取人员列表
 */
function getArchivesPage(){
	tableLoading.value = true;
	getArchivesListPage(searchArchiveQuery)
		.then(({ data })=>{
			peopleList.value = data.list
			total.value = data.total
		})
		.finally(()=>{tableLoading.value = false;})
}
/**
 * 新增员工
 */
function addPeopleDialog(){

}
/**
 * 查看详情
 */
function lookPeopleCont(cont:archivesCont){
	peoplecont.value = cont
	archivesBox.value = true
}
/**
 * 更新个人信息
 */
function updateMyCont(cont:archivesCont){
	peoplecont.value = cont
}
//批量导入数据相关操作
const piLiangBox = ref(false)
//打开批量导入面板
const openPiliangBox = () =>{
	piLiangBox.value = true	
}
//关闭导入
const handleOpenClose = () =>{
	piLiangBox.value = false	
}
const excelLoading = ref(false)

/**
 * Excel文件change事件
 *
 * @param file
 */
 function handleExcelChange(file: UploadFile) {
	excelLoading.value = true
	if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
		ElMessage.warning("上传Excel只能为xlsx、xls格式");
		excelLoading.value = false;
		return false;
	}
}

const peopleListAry = ref<any[]>();
/**
@ 作者: 秦东
@ 时间: 2024-02-03 14:04:48
@ 功能: 上传成功
*/
const uploadTrue = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
	excelLoading.value = false;
	console.log("response",response);
	console.log("uploadFile",uploadFile);
	console.log("uploadFiles",uploadFiles);
	peopleListAry.value = response.data.listAry
}
const uploadError = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
	excelLoading.value = false;
	console.log("1response",response);
	console.log("1uploadFile",uploadFile);
	console.log("1uploadFiles",uploadFiles);
}

//加载数据
onMounted(() => {
	haveOrgTreeInfo();
	getArchivesPage();
});
</script>
<template>
	<el-container>
		<el-aside width="300px"  style="padding: 10px 10px;">
			<el-card :body-style="{ height: '100%',padding:'0px 5px' }">
				<el-button type="primary"  style="width: 100%; margin: 10px 0;" @click="resetChecked">查看全部</el-button>
				<el-tree 
					ref="orgTreeRef"
					v-loading="orgTreeLoading" 
					node-key="id"
					class="orgTree"
					:data="orgTreeList" 
					:props="orgTreeProps" 
					:expand-on-click-node="false"
					:check-on-click-node="true"
					:check-strictly="true" 
					:default-expand-all="false"
					@node-click="handleOrgTreeNodeClick" 
				/>
			</el-card>
		</el-aside>
		<el-main style="padding: 10px 10px  10px 0px;">
			<div class="app-container" style="padding: 0; margin:0">
				<div class="search">
					<el-form ref="searchOrgFormRef" :model="searchArchiveQuery" :inline="true">
						<el-form-item label="工号 / 姓名" prop="keywords">
							<el-input
								v-model="searchArchiveQuery.keywords"
								placeholder="请输入工号 / 姓名"
								clearable
							/>
						</el-form-item>
						<el-form-item label="用工关系" prop="number">
							<el-select
								v-model="searchArchiveQuery.emptype"
								multiple
								clearable
								collapse-tags
								placeholder="用工关系"
								style="width: 240px"
							>
								<el-option
									v-for="item in emptypeOptions"
									:key="item.id"
									:label="item.name"
									:value="item.id"
								/>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="getArchivesPage">
								<template #icon><i-ep-search /></template>
								搜索
							</el-button>
							<el-button @click="resetArcFormQuery">
								<template #icon><i-ep-refresh /></template>
								重置
							</el-button>
							<el-button 
								v-hasPerm="['127710714914680832']"
								type="success" 
								@click="addPeopleDialog()" 
							>
							<template #icon><i-ep-plus /></template>新增
							</el-button>
							<el-button 
								v-hasPerm="['127710714914680832']"
								type="warning" 
								@click="openPiliangBox" 
							>
							<el-icon><MessageBox /></el-icon>
							批量导入数据
							</el-button>
						</el-form-item>
					</el-form>
				</div>
				<el-card  shadow="never">
					<el-table
						v-loading="tableLoading"
						highlight-current-row
						:data="peopleList"
						border 
						:header-cell-style="{background:'#F5F7FA'}"
					>
						<el-table-column fixed label="照片"  width="60" align="center">
							<template #default="scope">
								<el-avatar v-if="scope.row.icon != ''" shape="square" :size="30" :src="scope.row.icon" />
								<el-avatar v-else-if="scope.row.iconphoto != ''" shape="square" :size="30" :src="scope.row.iconphoto" />
								<el-avatar v-else shape="square" :size="30" :src="UserRole" />
							</template>
						</el-table-column>
						<el-table-column fixed label="姓名" prop="name"  width="150">
							<template #default="scope">
								{{ scope.row.name }}
								<el-tag v-if="scope.row.personincharge==1"  type="danger" >负责人</el-tag>
							</template>
						</el-table-column>
						<el-table-column fixed label="工号" prop="number"  width="120" align="center" />
						<el-table-column fixed label="归属行政组织">
							<template #default="scope">
								<el-text class="mx-1">{{ scope.row.companyname }}</el-text>
								<el-text v-if="scope.row.maindeparmentname" class="mx-1"> <span v-if="scope.row.companyname"> / </span>{{ scope.row.maindeparmentname }}</el-text>
								<el-text v-if="scope.row.sunmaindeparmentname" class="mx-1"> <span v-if="scope.row.maindeparmentname"> / </span>{{ scope.row.sunmaindeparmentname }}</el-text>
							</template>
						</el-table-column>
						<el-table-column fixed label="岗位" prop="positionname"  width="120" align="center" />
						<el-table-column fixed label="联系方式" prop="mobilephone"  width="120"  />
						<el-table-column fixed label="居住地" prop="currentresidence"   />
						<el-table-column fixed="right" align="center" label="操作" width="100">
							<template #default="scope">
								<el-button
									v-hasPerm="['127710903461228544']"
									type="primary"
									link
									size="small"
									@click.stop="lookPeopleCont(scope.row)"
								>
									<i-ep-view />查看详情
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<pagination
						v-if="total > 0"
						v-model:total="total"
						v-model:page="searchArchiveQuery.page"
						v-model:limit="searchArchiveQuery.pagesize"
						@pagination="getArchivesPage"
					/>
				</el-card>
				<ArchivesCont v-model:isShow="archivesBox" :archivesdata="peoplecont" @updatemyconting="updateMyCont" @getarchivespageclick="getArchivesPage" />
			</div>
		</el-main>
		<el-dialog
			v-model="piLiangBox"
			title="批量导入人员信息"
			width="800"
			:before-close="handleOpenClose"
		>
			<el-row v-loading="excelLoading" element-loading-text="文档解析中，请稍候...">
				<el-col :span="24">
					<el-upload
						class="upload-demo"
						drag
						:action="uploadFFurl"
						:before-upload="handleExcelChange"
						:on-success="uploadTrue"
						:on-error = "uploadError"
						multiple
					>
						<el-icon class="el-icon--upload"><upload-filled /></el-icon>
						<div class="el-upload__text">
							将电子表格拖到此处或 <em>单击上载</em>
						</div>
						
					</el-upload>
				</el-col>
				
			</el-row>
			<div class="divBoxCont">
				<el-row>
					<el-col v-for="(item,index) in peopleListAry" :key="index" :span="24">
						{{ item}}
					</el-col>
				</el-row>
			</div>
		</el-dialog>
	</el-container>
</template>
<style  lang='scss' scoped>

.common-layout{
	height: calc(100% - 60px);
	background-color: aqua;
	
}
.el-container {
    height: calc(100vh - 84px);
	.el-card.is-always-shadow{
		height: 100%;
		overflow: auto;
	}
}
.cardBody{
	height: 100%;
}
.orgTree{
	padding:5px 0;
}
.divBoxCont{
	width: 100%;
	height:300px;
	overflow: hidden;
	overflow-y: auto;
}
</style>
