<!-- 添加項目的彈框 -->
<el-dialog v-model="addDlg"  class="pro_dialog" title="添加項目" width="40%">
	<el-form :model="addForm">
		<el-form-item label="項目名"><el-input v-model="addForm.name" autocomplete="off" class="input-field"/></el-form-item>
		<el-form-item label="部門">
		<el-tree
		ref="departmentTreeRef"
		:data="departmentTree"
		:props="departmentTreeProps"
		show-checkbox
		highlight-current
		node-key="id"
		v-model="addForm.org"
		></el-tree>
		</el-form-item>
		<el-form-item label="負(fù)責(zé)人" >
			<el-select v-model="addForm.leader" autocomplete="off" multiple filterable class="input-field">
			<el-option 
			v-for="leader in filterLeaders" 
			:key="leader.id" 
			:label="leader.userName" 
			:value="leader.id"></el-option>
			</el-select>
		</el-form-item>
	</el-form>
	<template #footer>
		<span class="dialog-footer">
			<el-button @click="addDlg = false" size="mini">取消</el-button>
			<el-button type="primary" @click="addPro" size="mini">確定</el-button>
		</span>
	</template>
</el-dialog>

// 獲取所有用戶
	async getLeaders() {
		try {
			const response = await this.$api.getUsers();
			this.leaders = response.data.result.records;
		} catch (error) {
			console.error(error);
		}},
	// 獲取所有機構(gòu)
	async getorgInfo() {
		try {
			const response = await this.$api.getOrgInfo();
			if (response.data.code === "0"){
				this.departmentTree = [response.data.result];
			}
		} catch (error) {
			console.error(error);
		}},
	// 點擊進(jìn)入項目
	clickView(pro) {
		// 將選中的項目信息保存的vuex
		this.selectPro(pro);
		// 路由跳轉(zhuǎn)
		this.$router.push({ name: 'home' });
	},
	// 點擊添加項目按鈕
	clickAdd() {
		// 將添加表單置空
		this.addForm = {
			name: '',
			leader: [],
			org:[]
		};
		// 顯示模態(tài)框
		this.addDlg = true;
	},
	// 點擊編輯項目按鈕
	clickEdit(item) {
		this.updateForm = {
			id:item.id,
			name:item.name,
			leader:item.leader.map(leader => leader.userId),
			org:item.org.map(org => this.findOrgNodeById(this.departmentTree,org.orgId))
		};
		this.defaultCheckedKeys =  this.updateForm.org.map(org => org.id);
		// 保存默認(rèn)值
		const temp = [...this.defaultCheckedKeys];  
		this.updateDlg = true;
		this.$nextTick(() => {
			if (this.$refs.departmentTreeRef){
				// 用$refs清空已勾選的，否則不生效，重新勾選，
				this.$refs.departmentTreeRef.setCheckedKeys([]);
				this.defaultCheckedKeys = temp;
			}		
		})
	},
	// 點擊刪除按鈕
	clickDelete(id) {
		ElMessageBox.confirm('確定要刪除該項目嗎?', '提示', {
			confirmButtonText: '確定',
			cancelButtonText: '取消',
			type: 'warning'
		})
			.then(() => {
				this.deletePro(id);
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消刪除'
				});
			});
	},
	//在機構(gòu)列表中根據(jù)id查找對應(yīng)節(jié)點的label
	findOrgNodeById(nodes, id) {
		for (const node of nodes) {
		if (node.id === id) {
			return node;
		}
		// 遞歸查找子節(jié)點
		if (node.childOrg && node.childOrg.length > 0) {
			const foundNode = this.findOrgNodeById(node.childOrg, id);
			if (foundNode) {
			return foundNode;
			}}}
		return null;
	},
	// 添加項目
	async addPro() {
		// 獲取選中的部門id
		const selectedOrgIds = this.$refs.departmentTreeRef.getCheckedNodes().map(node => node.id);
		//根據(jù)部門查找部門名稱
		const selectedOrgLabels = selectedOrgIds.map(orgId => {
			const orgNode = this.findOrgNodeById(this.departmentTree, orgId);
			return orgNode && orgNode.name ? orgNode.name : "";
		});
		//組裝部門數(shù)據(jù)
		const orgData = selectedOrgIds.map((id, index) => {
				return { orgId: id, orgName: selectedOrgLabels[index] };
				});
		//組裝請求數(shù)據(jù)
		const data = {
			name: this.addForm.name,
			org:orgData,
			// 根據(jù)id獲取用戶名
			leader: this.addForm.leader.map(id => {
				const leaderinfo = this.leaders.find(leader => leader.id==id);
				return{
					userId:id,
					userName:leaderinfo.userName
				}})};
		const response = await this.$api.createProjects(data);
		if (response.status === 201) {
			this.$message({
				message: '添加成功!',
				type: 'success',
				duration: 1000
			});
			// 刷新頁面數(shù)據(jù)
			this.getAllPro();
			this.addDlg = false;
		}},