<template>
	<view class="auth_page">
		<view class="auth_list">
			<view class="leve_0">
				<view class="leve_1">
					<label @click="checkAll()">
						<checkbox :checked="checkedAll" /> {{checkedAll?'取消全部':'全部'}}
					</label>
				</view>
			</view>
			<view class="leve_0" v-if="authList.length" v-for="(item,index) in authList" :key="item.id">
				<view class="leve_1" @click="checkParent(item)">
					<label>
					<checkbox :value="String(item.id)" :checked="item.checked" /> {{item.name}}
					</label>
				</view>
				<view>
					<checkbox-group :data-pid="String(item.id)" class="leve_2" @change="checkboxChange">
						<label class="leve_3" v-for="citem in item.children" :key="citem.id">
							<checkbox :value="String(citem.id)" :checked="citem.checked" /> 
							{{citem.name}}
						</label>
					</checkbox-group>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getMenuList, addMenuPower } from '@/api/powerRole-md.js'
	export default {
		data() {
			return {
				id:'',
				menuData: {},
				authList: [], // app 权限菜单
				checkedIds: [[],[],[]], // 已选的ids
				loading: false,
				checkedAll: false
			}
		},
		methods: {
			// 获取菜单树列表
			getMenuList (id) {
			  let _this = this
			  this.id = id || '1'
			  getMenuList({id: this.id}).then(res => {
			    if (res.status == 200) {
			       _this.menuData = res.data
				   _this.authList = _this.menuData.allMenuList[0].children
			       if (_this.menuData.role&&_this.menuData.role.menuIds) {
			         const arr = _this.menuData.role.menuIds.split(',')
			         // 勾选已选的
			         _this.findLeaf(_this.menuData.allMenuList, arr)
					 _this.getIds(_this.authList,0)
					 // 是否全选
					 _this.checkedAll = arr.length >= _this.authList.length
			       }
			    }
				console.log(_this.menuData,'_this.menuData')
			  })
			},
			// 勾选已选的
			findLeaf (data, arr) {
			  for (let i = 0; i < data.length; i++) {
			    const node = data[i]
			    const hasNode = this.hasSelNode(node.id, arr)
				this.$set(node, 'checked', !!hasNode)
			    if (node.children){
			      this.$set(node, 'expand', !!hasNode)
			      this.findLeaf(node.children, arr)
			    }
			  }
			},
			hasSelNode (id, arr){
			  const hasNode = arr.find(item => {
			    return item == id
			  })
			  return hasNode
			},
			// 获取选中的ids, index 那个菜单
			getIds (data,index){
			   let _this = this
			   for (let i = 0; i < data.length; i++) {
			     const node = data[i]
			     if(node.checked){
					 _this.checkedIds[index].push(node.id)
				 }
				 if (node.children){
				   _this.getIds(node.children,index)
				 }
			   }
			},
			// 全选
			checkAll(){
				this.authList.map(item => {
					this.$set(item, 'checked', !this.checkedAll)
				})
				this.checkedAll = !this.checkedAll
			},
			// 选择一级菜单
			checkParent(item){
				console.log(item)
				if(item.children){
					item.children.map(k=>{
						this.$set(k, 'checked', !item.checked)
					})
				}
				this.$set(item, 'checked', !item.checked)
				// 是否全选
				const checkNums = this.authList.filter(item => item.checked)
				this.checkedAll = checkNums.length == this.authList.length
			},
			// 选择复选框
			checkboxChange(e){
				console.log(e)
				let pid = e.currentTarget.dataset.pid
				let ids = e.detail.value
				let pc = this.authList.find(item=> item.id == pid)
				if(pc.children&&pc.children.length){
					 pc.children.map(k=>{
						 this.$set(k, 'checked', !!ids.find(a=>a==k.id))
					 })
				}
				this.$set(pc, 'checked', ids.length>0)
			},
			// 保存提交
			getSelMenu () {
			  const _this = this
			  // 获取已选的项
			  this.checkedIds[0] = []
			  this.getIds(this.authList,0)
			  if (this.checkedIds[0].length == 0) {
			    return false
			  }
			  let checkeNodes = []
			  checkeNodes = checkeNodes.concat(this.checkedIds[0])
			  checkeNodes = checkeNodes.concat(this.checkedIds[1])
			  checkeNodes = checkeNodes.concat(this.checkedIds[2])
			  console.log(checkeNodes, 'checkeNodes')
			  return {menuIds: checkeNodes.join(',')}
			},
		},
	}
</script>

<style lang="scss">
	.auth_page{
		display: flex;
		flex-direction: column;
		height: 100%;
		.auth_list{
			flex-grow: 1;
			overflow: auto;
			height: 100%;
			.leve_0{
				padding:0;
				.leve_1{
					padding: 15upx;
					border-bottom: 1px solid #eee;
					uni-label{
						display: block;
					}
				}
				.leve_2{
					padding: 10upx 10upx 10upx 0;
					display: flex;
					flex-wrap: wrap;
					.leve_3{
						margin: 20upx 5%;
					}
				}
			}
		}
	}
	
</style>
