<!--
@ 作者: 秦东
@ 时间: 2023-06-14 16:47:13
@ 备注: 档案列表
-->
<script lang='ts' setup>
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 { number } from '@intlify/core-base';
const props = defineProps({
	orgidval:{
		type:Number,
		default:0
	},
	
});
const emits = defineEmits(["openorclost"]);
const searchOrgFormRef = ref(ElForm);
const peopleList = ref<archivesCont[]>();	//
const tableLoading = ref(false);	//加载数据列表
const total = ref(0);				//总记录数
const searchArchiveQuery = reactive<searchCriteriaForPeople>({
	page:1,
	pagesize:13
})

/**
 * 获取人员列表
 */
 function getArchivesPage(){
	tableLoading.value = true;
	getArchivesListPage(searchArchiveQuery)
		.then(({ data })=>{
			peopleList.value = data.list
			total.value = data.total
		})
		.finally(()=>{tableLoading.value = false;})
}
/**
 * 重置搜索框
 */
 function resetArcFormQuery(){
	searchOrgFormRef.value.resetFields();
	searchArchiveQuery.emptype=[];
	getArchivesPage();
}
/**
 * 新增员工
 */
function addPeopleDialog(){

}
/**
 * 查看详情
 */
function lookPeopleCont(cont:archivesCont){
	emits("openorclost",false)
}
/**
 * 监听数据
 */
 watch(() => props.orgidval,() => {
	getArchivesPage()
 })
</script>
<template>
	<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()" 
							>
							<i-ep-plus />新增
							</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="姓名"  width="120"  >
							<template #default="scope">
								{{ scope.row.personincharge }}{{ scope.row.personincharge }}
								<el-tag v-if="scope.row.personincharge==1" type="warning" >负责人</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>
			</div>
</template>
<style  lang='scss' scoped>

</style>
