<!--
@ 作者: 秦东
@ 时间: 2023-11-22 08:16:12
@ 备注: 全部行政组织
-->
<script lang='ts' setup>
import { getOrgFormTree,getOrgFormUserList,searchUserCustomerFormList } from '@/api/hr/org/index'
import { orgform,criteriaForPeopleList } from '@/api/hr/org/type'
import UserRole from '@/assets/icons/user.svg'

import { searchUserList,gainFlowPeople } from '@/api/DesignForm/requestapi'

const props = defineProps({
	openclosebox:{
		type:Boolean,
		default:false
	},
	selectedPeople: {
		type: Array,
		default: () => []
	}
})
const emits = defineEmits(["update:openclosebox","updateNode"]);
const isOpen =   computed({
	get: () => props.openclosebox,
	set: (val) => {
		emits("update:openclosebox", val);
	},
});
const defaultProps ={
	children: 'children',
  	label: 'name',
}
const orgLoading = ref(false)
const userLoading = ref(false)
// 侧栏处理
const treeEl = ref()
const treeData = ref<orgform[]>([])
const department = ref<any>()
const userName = ref<any>()
const tableData = ref<criteriaForPeopleList[]>();
const page = reactive({
    total: 0,
    current: 1,
    pageSize: 11
})
//行政组织树单击事件
const handleNodeClick = (data: any) => {
    department.value = data.id
	getUserList()
}
//重置搜索
const resetClick = () => {
    userName.value = ''
    department.value = ''
    treeEl.value.setCurrentKey(null)
    getUserList()
}
//获取行政组织
const getTreeData = () => {
	orgLoading.value = true
	getOrgFormTree()
		.then(({ data }) => {
			// console.log(data)
			treeData.value = data.list
		}).finally(()=>{
			orgLoading.value = false
		})
}
//获取人员列表信息
const getUserList = () => {
	userLoading.value = true
    const params = {
		page: page.current,
		pagesize: page.pageSize,
		name: userName.value,
		department: department.value
    }
	searchUserList(params)
		.then(({ data })=>{
			tableData.value = data.list
			page.total = data.total
			userLoading.value = false
		})
		.finally(()=>{
			userLoading.value = false
		})
}
//翻页
const currentChange = (current: number) => {
    page.current = current
    getUserList()
}

onMounted(() => {
    nextTick(() => {
		// 可根据实际情况放在点击打开弹窗后加载，会出现loading
		getTreeData()
		getUserList()
		backfillData()
    })
})
//已选择内容
const checkDataList = ref<criteriaForPeopleList[]>([]);
const tableRowClick = (row: any) => {
   if(checkDataList.value.length > 0){
	   let isIn = true
	   checkDataList.value.forEach(item =>{
		   if(item.id == row.id){
			   isIn = false
		   }
	   })
	   if(isIn){
		   checkDataList.value.push(row)
	   }
   }else{
	   checkDataList.value.push(row)
   }
   // console.log("checkDataList",checkDataList,row)
}
//删除单一选择
const delRowClick = (row: criteriaForPeopleList) => {
	// console.log("checkDataList",row)
	if(checkDataList &&checkDataList.value.length > 0) {
		checkDataList.value.forEach((item:criteriaForPeopleList,index:number) => {
			if(item.id == row.id){
				if(!item.noedit){
					checkDataList.value.splice(index,1)
				}
			}
		})
	}
}
//清除所有的选择
const delAllClick = () => {
	// checkDataList.splice(0,checkDataList.length)
	console.log("清除所有的选择--1--->",checkDataList)
	let delIndex: criteriaForPeopleList[] = []
	checkDataList.value.forEach((item:criteriaForPeopleList,index:number) => {
		console.log("清除所有的选择",item)
		if(item.noedit){
			// checkDataList.splice(index,1)
			delIndex.push(item)
		}	
	})
	// if(delIndex.length > 0){
	// 	delIndex.forEach((item:number) => {
	// 		checkDataList.splice(item,1)
	// 	})
	// }
	checkDataList.value = delIndex
	console.log("清除所有的选择---2-->",delIndex)
}

//关闭弹窗
const clostBox = () =>{
	emits("update:openclosebox", false);
}
//提交选择
const confirmChoices = () => {
	// console.log("confirmChoices",checkDataList)
	emits('updateNode', checkDataList)
	clostBox()
}
//回填已经选中得内容
const backfillData = () => {
	if(props.selectedPeople && props.selectedPeople.length > 0){
		checkDataList.value.splice(0,checkDataList.value.length)
		props.selectedPeople.forEach((item:any)=>{
			checkDataList.value.push(item)
		})
	}
	// console.log("props.selectedPeople",props.selectedPeople,checkDataList)
}
</script>
<template>
	<el-dialog
		v-model="isOpen"
		title="选择人员"
		:append-to-body="true"
		:props="defaultProps "
		width="90%"
		top="2vh"
		draggable
	>
		<div class="diaBody">
			<div class="sidebar_tree">
				<el-text class="orgTitle" size="large">行政组织</el-text>
				<el-tree
					v-loading="orgLoading"
					element-loading-text="Loading..."
					ref="treeEl"
					:data="treeData"
					node-key="id"
					@node-click="handleNodeClick"
					:props="defaultProps "
					highlight-current
				/>
			</div>
			<div>
				<div class="search">
					<el-input placeholder="请输入用户名" v-model="userName" />
					<el-button type="primary" @click="getUserList">查询</el-button>
					<el-button @click="resetClick">重置</el-button>
				</div>
				<div class="list">
					<el-table v-loading="userLoading" border element-loading-text="Loading..." :data="tableData" style="width: 100%; height:660px">
						<el-table-column fixed  prop="userName" label="照片" width="60px" align="center">
							<template #default="scope">
								<el-avatar v-if="scope.row.icon != ''" shape="square" :size="30" :src="scope.row.icon" />
								<el-avatar v-else shape="square" :size="30" :src="UserRole" />
							</template>
						</el-table-column>
						<el-table-column fixed  prop="name" label="姓名"  width="150px"  align="left">
							<template #default="scope">
								{{ scope.row.name }}({{ scope.row.number }})
							</template>
						</el-table-column>
						<el-table-column prop="tel" label="联系方式"   width="120px"  align="left" />
						<el-table-column prop="nickName" label="归属行政组织" width="500px" align="left">
							<template #default="{ row }">
								{{ row.companyName }}<span v-if="row.departmentname!=''"> / {{ row.departmentname }}</span><span v-if="row.postname!=''"> / {{ row.postname }}</span>
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="60px">
							<template #default="{ row }">
								<el-button circle size="small" @click="tableRowClick(row)"><el-icon><ArrowRight /></el-icon></el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="page">
						<el-pagination
							size="small"
							layout="prev, pager, next"
							:total="page.total"
							class="mt-4"
							@current-change="currentChange"
						/>
						
					</div>
				</div>
			</div>
			<div class="has_select">
				<div class="total">
					<div>已选择：{{ checkDataList.length }}</div>
					<el-button type="danger" @click="delAllClick" size="small">全部移除</el-button>
				</div>
				<el-table :data="checkDataList" border style="height:680px">
					<el-table-column prop="userName" label="照片" width="60px" align="center">
						<template #default="scope">
							<el-avatar v-if="scope.row.icon != ''" shape="square" :size="30" :src="scope.row.icon" />
							<el-avatar v-else shape="square" :size="30" :src="UserRole" />
						</template>
					</el-table-column>
					<el-table-column prop="name" label="姓名"  align="left">
						<template #default="scope">
							{{ scope.row.name }}({{ scope.row.number }})
						</template>
					</el-table-column>
					<el-table-column label="操作" width="60px">
						<template #default="{ row }">
							<el-button v-if="!row.noedit" size="small" type="danger" @click="delRowClick(row)">移除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!-- <el-row :gutter="20">
			<el-col :span="6" style="padding:0">
				<div class="sidebar_tree">
					<el-text class="orgTitle" size="large">行政组织</el-text>
					<el-tree
						v-loading="orgLoading"
						element-loading-text="Loading..."
						ref="treeEl"
						:data="treeData"
						node-key="id"
						@node-click="handleNodeClick"
						:props="defaultProps "
						highlight-current
					/>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="search">
					<el-input placeholder="请输入用户名" v-model="userName" />
					<el-button type="primary" @click="getUserList">查询</el-button>
					<el-button @click="resetClick">重置</el-button>
				</div>
				<div class="list">
					<el-table v-loading="userLoading" element-loading-text="Loading..." :data="tableData" style="width: 100%; height:660px">
						<el-table-column fixed  prop="userName" label="照片" width="60px" align="center">
							<template #default="scope">
								<el-avatar v-if="scope.row.icon != ''" shape="square" :size="30" :src="scope.row.icon" />
								<el-avatar v-else shape="square" :size="30" :src="UserRole" />
							</template>
						</el-table-column>
						<el-table-column fixed  prop="name" label="姓名"  width="150px"  align="left">
							<template #default="scope">
								{{ scope.row.name }}({{ scope.row.number }})
							</template>
						</el-table-column>
						<el-table-column prop="tel" label="联系方式"   width="120px"  align="left" />
						<el-table-column prop="nickName" label="归属行政组织" width="500px" align="left">
							<template #default="{ row }">
								{{ row.companyName }}<span v-if="row.departmentname!=''"> / {{ row.departmentname }}</span><span v-if="row.postname!=''"> / {{ row.postname }}</span>
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="60px">
							<template #default="{ row }">
								<el-button circle size="small" @click="tableRowClick(row)"><el-icon><ArrowRight /></el-icon></el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="page">
						<el-pagination
							background
							layout="prev, pager, next, jumper"
							small
							hide-on-single-page
							:current-page="page.current"
							:total="page.total"
							:page-size="page.pageSize"
							@current-change="currentChange"
						/>
					</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="has_select">
					<div class="total">
						<div>已选择：{{ checkDataList.length }}</div>
						<el-button type="danger" @click="delAllClick" size="small">全部移除</el-button>
					</div>
					{{ checkDataList }}
					<el-table :data="checkDataList" style="height:680px">
						<el-table-column prop="userName" label="照片" width="60px" align="center">
							<template #default="scope">
								<el-avatar v-if="scope.row.icon != ''" shape="square" :size="30" :src="scope.row.icon" />
								<el-avatar v-else shape="square" :size="30" :src="UserRole" />
							</template>
						</el-table-column>
						<el-table-column prop="name" label="姓名"  align="left">
							<template #default="scope">
								{{ scope.row.name }}({{ scope.row.number }})
							</template>
						</el-table-column>
						<el-table-column label="操作" width="60px">
							<template #default="{ row }">
								<el-button v-if="!row.noedit" size="small" type="danger" @click="delRowClick(row)">移除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-col>

		</el-row> -->
		<template #footer>
			<div>
				<el-button @click="clostBox">取消</el-button>
				<el-button type="primary" @click="confirmChoices"> 确定 </el-button>
			</div>
		</template>
	</el-dialog>
</template>
<style  lang='scss' scoped>
.diaBody{
	width: 100%;
	display: grid;
	grid-template-columns: 300px 1fr 250px; /* 左右最小150px，最大250px，中间自适应 */
	grid-template-rows: auto;
	gap: 10px;
	max-width: 100%;
	margin: 0 auto;
}


.orgTitle{
	padding: 0  0 0 5px;
}
.sidebar_tree {
	width: 100%;
	border: 1px solid #ebeef5;
	border-radius: 3px;
	padding: 10px 0;
	margin-right: 10px;
	height: 750px;
	overflow-y: auto;
}
.has_select {
	width: 100%;
	
	.total {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 32px;
		margin-bottom: 10px;
	}
}
.search {
	display: flex;
	margin-bottom: 10px;
	.el-input {
		margin-right: 10px;
	}
}
.list{
	width: 100%;
	display: inline-grid;
}
.page {
	padding-top: 0px;
	width: 100%;
	display: flex;
	justify-content: center;
}
.expand-user-dialog {
    display: flex;
    align-items: flex-start;
    .sidebar-tree {
		width: 180px;
		border: 1px solid #ebeef5;
		border-radius: 3px;
		padding: 10px 0;
		margin-right: 10px;
		max-height: 500px;
		overflow-y: auto;
    }
    .table-list {
      	
    }
    .search {
		display: flex;
		margin-bottom: 10px;
		.el-input {
			margin-right: 10px;
		}
    }
    .page {
		padding-top: 20px;
		display: flex;
		justify-content: flex-end;
    }
    .has-select {
		width: 200px;
		margin-left: 20px;
		.total {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 32px;
			margin-bottom: 10px;
		}
    }
}
</style>
