<template>
	<div>
		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
			<el-tab-pane label="菜单权限" name="first">
				<!-- 最外围 -->
				<div v-for="item in dataList">
					<div class="listBox">
						<div class="list p-10" @click="muenclick(1,item)">
							<i :class="item.type?'el-icon-star-on':'el-icon-star-off'"></i>
							<p>{{item.title}}</p>
						</div>
						<div class="list" v-for="itemA in item.children">
							<div class="list p-10" @click="muenclick(2,itemA)">
								<i :class="itemA.type ?'el-icon-star-on':'el-icon-star-off'"></i>
								<p>{{itemA.title}}</p>
							</div>
							<div class="list p-10 ml-10" v-for="itemB in itemA.children" @click="muenclick(3,itemB)">
								<i :class="itemB.type?'el-icon-star-on':'el-icon-star-off'"></i>
								<p>{{itemB.title}}</p>
							</div>
						</div>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="按钮权限" name="second">
				<div class="p-10 list listBox" v-for="item in ButtonList">
					<div style="display: flex;align-items: center;" @click="recordAll(item)">
						<p>{{item.billid}}</p>
						<i :class="item.type?'el-icon-star-on':'el-icon-star-off'"></i>
					</div>
					<div style="display: flex;margin-left: 10px;">
						<p class="recordText" v-for="el in item.dataDetail" :class="{'active':el.type}"
							@click="typeChange(el)">{{el.name}}</p>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="数据权限" name="third">
				<div class="p-10 list listBox" v-for="item in recordList">
					<div style="display: flex;align-items: center;" @click="recordAll(item)">
						<p>{{item.billid}}</p>
						<i :class="item.type?'el-icon-star-on':'el-icon-star-off'"></i>
					</div>
					<div style="display: flex;margin-left: 10px;">
						<p class="recordText" v-for="el in item.dataDetail" :class="{'active':el.type}"
							@click="typeChange(el)">{{el.name}}</p>
					</div>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import baseDialog from "@/components/base/BaseNewDialog/index.vue";
	export default {
		name: "review",
		components: {
			baseDialog
		},
		data() {
			return {
				activeName: 'first',
				// 数据权限
				ButtonList:[],
				recordList: [{
						billid: '合同管理',
						type: false,
						ids:[],
						dataDetail: [
							{name: '浙江用安',
								id: 60,
								type: false,
							},
							{
								name: '销售部',
								id: 58,
								type: false,
							},
							{
								name: '实施服务',
								id: 61,
								type: false,
							},
						],
					},
					{
						billid: '项目管理',
						type: true,
						dataDetail: [
							{
								name: '浙江用安',
								id: 60,
								type: false,
							},
							{
								name: '销售部',
								id: 58,
								type: false,
							},
							{
								name: '实施服务',
								id: 61,
								type: false,
							},
						],
					},
				],
				dataList: [{
						title: '系统管理',
						type: 1,
						id:1,
						children: [{
								title: '数据字典',
								type: false,
								id:2
							},
							{
								title: '用户管理',
								type: 1,
								id:3,
								children: [{
										title: '角色管理',
										type: true,
										id:4
									},
									{
										title: '人员管理',
										type: false,
										id:5
									},
								]
							}
						]
					},
					{
						title: '系统维护',
						type: false,
						id:6,
						children: [{
							title: 'LayUI图标库',
							type: false,
							id:7
						}]
					}
				],
			}
		},
		watch: {
			dataList: {
				deep: true, //深度监听设置为 true
				handler: function(newV, oldV) {
					newV.forEach(el => {
						el.children.forEach(item => {
							if (item.type == true) {
								el.type = true
							}
							if (item.children && item.children.length > 0) {
								item.children.forEach(last => {
									if (last.type == true) {
										el.type = true
									}
								})
							}
						})
					})
				}
			},
			recordList: {
				deep: true, //深度监听设置为 true
				handler: function(newV, oldV) {
					let num = 0
					newV.forEach(el => {
						el.dataDetail.forEach(item => {
							if (item.type == true) {
								el.type = true
								num = num +1 
							}
						})
						if(num == 0){
							el.type = false
						}
					})
					
				}
			},
		},

		methods: {
			    getMenuTreeselect() {
			      menuTreeselect().then((response) => {
			        const parseTree = (arr) => {
			          if (arr.length > 0) {
			            arr.forEach(item => {
			              if (item.id) {
			                item['label'] = this.$t(allPermis.filter(p => p.id === item.id)[0]?.localKey)
			              }
			              if (item.children && item.children.length > 0) {
			                parseTree(item.children)
			              }
			            })
			          }
			          return arr
			        }
			        this.menuOptions = parseTree(response.data)
			      })
			    },

			
			
			handleClick(tab, event) {
				let ids = []
				// console.log(tab, event);
				const parseTree = (arr) =>{
					arr.forEach(item =>{
						if(item.type){
							ids.push(item.id)
							console.log(ids)
						}
						if (item.children && item.children.length > 0) {
						  parseTree(item.children)
						}
					})
					return ids
				}
				let vrr = parseTree(this.dataList)
				this.getButtonList(vrr)
			},
			async getButtonList(vrr){
				this.ButtonList = []
				let arr = {
						billid: '用户管理',
						type: false,
						ids:[],
						dataDetail: [
							{	name: '新增',
								id: 60,
								type: false,
							},
							{
								name: '编辑',
								id: 58,
								type: false,
							},
							{
								name: '删除',
								id: 61,
								type: true,
							},
						],
					}
				if(vrr.length > 0){
					vrr.forEach(el=>{
						if(el == 3){
							this.ButtonList.push(arr)
						}
					})
				}
			},
			// 数据权限全选
			recordAll(item) {
				item.dataDetail.forEach(el => {
					if (item.type ==false) {
						this.AllType(el, true)
					} else {
						this.AllType(el, false)
					}
				})
				this.typeChange(item)
			},
		// 改变选中
		typeChange(item) {
			if (item.type == true) {
				item.type = false
			} else {
				item.type = true
			}
		},
		AllType(item, type) {
			item.type = type
		},
		muenclick(index, item) {
			let ids = []
			// index代表多少级菜单
			if (index == 1) {
				if (item.type == false) {
					ids.push(item.id)
					this.AllType(item, true)
					item.children.forEach(el => {
						this.AllType(el, true)
						if (el.children && el.children.length > 0) {
							el.children.forEach(small => {
								ids.push(item.id)
								this.AllType(small, true)
							})
						}
					})
				} else {
					this.AllType(item, false)
					item.children.forEach(el => {
						this.AllType(el, false)
						if (el.children && el.children.length > 0) {
							el.children.forEach(small => {
								this.AllType(small, false)
							})
						}
					})
				}
			} else {
				this.typeChange(item)
			}
		}
	},
	mounted() {

	}

	}
</script>

<style scoped lang="scss">
	.recordText {
		border: 1px solid #fff;
		width: 60px;
		padding: 5px 0;
		text-align: center;
		font-size: 12px;
		cursor: pointer;
		background: #f2f2f2;
		color: #e0e0e0;
		margin: 0px 3px;
	}

	.recordText.active {
		background: #00a490;
		color: #fff;
	}

	.listBox {
		border-top: 1px solid #ccc;
	}

	.list {
		display: flex;
		align-content: center;
		cursor: pointer;
	}

	.ml-10 {
		margin-left: 10px;
	}

	.p-10 {
		padding: 10px 0;
	}

	.small.active {
		border-color: crimson transparent transparent transparent;
	}

	.small.active:before,
	.small.active:after {
		border-color: crimson transparent transparent transparent;
	}

	.small {
		border-color: #7d7d7d transparent transparent transparent;
		border-style: solid;
		border-top-width: 9.375px;
		border-right-width: 15px;
		border-left-width: 15px;
		height: 0;
		margin-top: 9.375px;
		margin-bottom: 6.02679px;
		position: relative;
		width: 0;
		margin: 2rem 0.8rem;
	}

	.small:before,
	.small:after {
		border-color: #7d7d7d transparent transparent transparent;
		border-style: solid;
		border-top-width: 9.375px;
		border-right-width: 15px;
		border-left-width: 15px;
		content: '';
		display: block;
		height: 0;
		left: -15px;
		position: absolute;
		top: -9.375px;
		width: 0;
	}

	.small:before {
		transform: rotate(70deg);
	}

	.small:after {
		transform: rotate(-70deg);
	}

</style>
<style lang="scss">
	$activeColor: var(--bg-color, "#00aaff");
	.el-icon-star-on{
		/* color: #00aa00; */
		color: $activeColor;
	}
</style>