<template>
	<div class="dataAuth-container" v-if="showData">
		<el-cascader 
		:options="classifyArr"
		:props="classifyProp"
		:show-all-levels="false"
		style="width: 500px"
		placeholder="用户名称"
		filterable
		clearable
		@change="chooseUser"
		/>
		<ul class="user-list-cont">
			<li
				v-for="item in userList"
				:key="item.AdminId"
				:class="{ act: item.AdminId === default_user }"
				@click="toggleRole(item)"
			>
				{{ item.AdminRealName }}
			</li>
		</ul>
		<div class="setting-cont" v-if="authList.length">
			<ul class="menu_lists">
				<li v-for="item in authList" :key="item.id" class="menu_item">
					<div style="flex-shrink: 0;">
					<el-checkbox
						:indeterminate="item.isIndeterminate"
						v-model="item.checkAll"
						@change="handleCheckAll(item)"
						>
							<span>{{ item.ClassifyName }}</span> 
						</el-checkbox
					>
					<span style="color:#409eff">：</span>
					</div>
					<div class="child-list" v-if="item.Child">
						<el-checkbox-group
							v-model="item.CheckList"
							@change="handleChecked(item)"
						>
							<el-checkbox
								class="child-item"
								v-for="list in item.Child"
								:key="list.ClassifyId"
								:label="list.ClassifyId"
								>
									<span>{{list.ClassifyName}}</span>
								</el-checkbox
							>
						</el-checkbox-group>
					</div>
				</li>
			</ul>
		</div>
		<div class="dataAuth-bot">
			<div>
				<span class="add-btn" @click="addClassifyHandle">
					<i
						class="el-icon-circle-plus-outline"
						style="color: #5882ef; font-size: 16px"
					/>
					<span>手工指标分类</span>
				</span>
			</div>
			<div class="btn-cont" v-if="userList.length">
				<el-button type="primary" class="btn" @click="saveAuthHandle">保存</el-button>
				<el-button type="primary" plain class="btn" @click="getAuth">取消</el-button>
			</div>
		</div>

		<!-- 修改分类弹窗 -->
		<authDialog
			:title="formData.classifyId?'编辑分类':'添加分类'"
			:isOpenDialog.sync="isOpenDialog"
			:form="formData"
			@closeDia="isOpenDialog=false"
			@sucessCallback="sucessCallback"
		/>

		<!-- 分类展示弹窗 -->
		<targetClasifyDia
			:isOpenDialog.sync="isTargetClassifyDia"
			@success="userList.length && getAuth();"
		/>
	</div>
</template>

<script>
import { dataAuthInterface } from "@/api/api.js";
import authDialog from './components/authDialog';
import targetClasifyDia from './components/targetClasifyDialog.vue';
export default {
	name: '',
	components: { authDialog,targetClasifyDia },
	data() {
		return {
			showData:null,
			search_txt: '', //关键字搜索
			classifyArr:[],//组织架构
			classifyProp:{
				value:'ItemId',
				label:'ItemName',
				children:'Children'
			},
			default_user: '',
			new_label:'',//输入框新值
			userList: [], //
			authList: [],

			isOpenDialog:false,
			formData:{},

			isTargetClassifyDia: false,
		};
	},
	watch: {
		default_user: {
			handler(val) {
				if (val) {
					this.getAuth();
				}
			}
		}
	},
	methods: {
		/* 获取权限列表 */
		getAuth() {
			dataAuthInterface.authList({
				AdminId: this.default_user || 0,
			}).then(res => {
				if(res.Ret === 200) {
					let list = [];
					res.Data&&res.Data.forEach(item => {
						item.CheckList = item.CheckList || [];
						let obj;
						if(item.Child && item.Child.length) {
							obj = {
								checkAll:item.CheckList&&item.CheckList.length===item.Child.length,
								isIndeterminate:item.CheckList.length && item.CheckList.length<item.Child.length,
								...item,
							}
						}else {
							obj = {
								...item,
							}
						}
						list.push(obj)
					})
					this.authList = list;
					this.loading && setTimeout(() => {this.loading.close()},200);
				}
			})
		},
		/* 获取部门架构 */
		getClassify() {
			dataAuthInterface.userSearch({
				KeyWord: this.search_txt
			}).then(res => {
				if(res.Ret === 200) {
					this.classifyArr = res.Data;
				}
			})
		},
		getUserList() {
			dataAuthInterface.userList().then(res => {
				if(res.Ret === 200) {
					this.userList = res.Data || [];
					this.default_user =	this.userList.length ? this.userList[0].AdminId : '';
					this.showData = true;
				}
			})
		},
		/* 选择人员 */
		chooseUser(val) {
			if(val.length) {
				// console.log(val)
				let id = val[2];
				this.filterClassify(this.classifyArr,Number(id));
			}
		},
		// 遍历取值 push数组
		filterClassify(arr,id) {
			for(let i of arr) {
				i.Children && this.filterClassify(i.Children,Number(id));
				if(i.ItemId === id) {
					let bol = this.userList.findIndex(item => item.AdminId === id);
					// console.log(bol)
					bol === -1 && this.userList.unshift({AdminRealName: i.ItemName,
						AdminId:id});
					this.default_user = bol === -1 ? id : '';
				}
			}
		},
		/* 分类展示弹窗 */
		addClassifyHandle() {
			this.isTargetClassifyDia = true;
		},
		/* 成功回调 */
		sucessCallback() {
			this.isOpenDialog = false;
			this.userList.length && this.getAuth();
		},

		/* 分类弹窗 */
		editClassify(params=null) {
			this.isOpenDialog = true;
			this.formData = {
				parentId: params ? params.parentId : '',
				classifyName: params ? params.classifyName : '',
				classifyId: params ? params.classifyId : '',
			}
		},

		//切换人员 设置权限
		toggleRole(item) {
			if(item.AdminId !== this.default_user) {
				this.default_user = item.AdminId;
				this.loading = this.$loading({
					lock: true,
					target:'.setting-cont',
					text: '切换用户中...',
					spinner: 'el-icon-loading',
					background: 'rgba(255, 255, 255, 0.8)'
				});
			}
		},
		/* 保存权限 */
		saveAuthHandle() {
			if(!this.default_user) {
				this.$message.warning("请选择用户");
			}else {
				let arr = [];
				this.authList.map(item => {
					if(item.CheckList.length) {
						arr.push(item.ClassifyId)
						arr.push(item.CheckList)
						return arr
					}
				})
				console.log(arr)
				let params = {
					ClassifyId:arr.flat(Infinity),
					AdminId: this.default_user
				}
				dataAuthInterface.saveAuth(params).then(res => {
					if(res.Ret === 200) {
						this.$message.success('保存成功');
					}
				})
			}
		},
		/* 取消 */
		/* 选择全选或取消全选 */
		handleCheckAll(item) {
			// 取到所有的子菜单id
			let ids = item.Child.map((item) => {
				return item.ClassifyId;
			});
			item.CheckList = item.checkAll ? ids : [];
			item.isIndeterminate = false;
		},
		/* 复选框組选中时 */
		handleChecked(item) {
			let len = item.CheckList.length;
			item.checkAll = len === item.Child.length;
			item.isIndeterminate = len > 0 && len < item.Child.length;
		},
	},
	created() {},
	mounted() {
		this.getUserList();
		// this.getAuth();
		this.getClassify();
	},
};
</script>
<style lang="scss" scoped>
.dataAuth-container {
	* {
		box-sizing: border-box;
	}
	min-height: calc(100vh - 230px);
	padding: 30px 30px 80px;
	background: #fff;
	position: relative;
	border: 1px solid #ececec;
	border-radius: 4px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
	.user-list-cont {
		margin-top: 30px;
		display: flex;
		flex-wrap: wrap;
		color: #707070;
		font-size: 15px;
		li {
			width: 88px;
			height: 38px;
			line-height: 38px;
			text-align: center;
			border: 1px solid #dcdfe6;
			border-radius: 4px;
			margin-right: 30px;
			margin-bottom: 10px;
			transition: all 0.3s;
			cursor: pointer;
			&:last-child {
				margin-right: 0;
			}
			&.act {
				border-color: #409eff;
				color: #409eff;
			}
			&:hover {
				border-color: #409eff;
				color: #409eff;
			}
		}
	}
	.setting-cont {
		margin-top: 35px;
		width: 100%;
		box-sizing: border-box;
		padding: 40px;
		border: 1px dashed #aab4cc;
		.menu_lists {
			font-size: 14px;
			// display: flex;
			// flex-wrap: wrap;
			.menu_item {
				// margin-right: 80px;
				margin-bottom: 30px;
				display: flex;
				.label-input {
					width: 90px;
					.el-input__inner {
						height: 25px;
						line-height: 25px;
					}
				}
				.child-list {
					// min-height: 238px;
					// margin-top: 15px;
					// padding: 30px 40px;
					// border: 1px solid #dcdfe6;
					// width: 240px;
					display: inline-block;
					.child-item {
						margin-bottom: 15px;
						// display: block;
					}
				}
			}
		}
	}
	.dataAuth-bot {
		margin-top: 40px;
		.add-btn {
			color: #5882ef;
			cursor: pointer;
			margin-right: 20px;
			
		}
		.btn-cont {
			margin-top: 120px;
			display: flex;
			justify-content: center;
			.btn {
				width: 104px;
				&:first-child {
					margin-right: 30px;
				}
			}
		}
	}
}
</style>
