<template>
	<div >
		<div flex="cross:center cross:baseline" flex-wrap v-for="(el,elIndex) in classifyButtonList"
			class="buttonSetting">
			<p style="width:100px;text-align: right;">{{el.label}}</p>
			<div flex="cross:center" flex-wrap style="width: calc(100% - 200px);">
				<p class="recordText" v-for="(item,index) in el.buttonList" @click="typeChange(item)" :key="index"
					:class="{'active':item.type}">{{item.NameCN}}</p>
				<p v-if="el.buttonList.length == 0" class="recordText">暂无按钮</p>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		GetAllButton,
	} from '@/api/apis/jurisdiction'
	export default {
		// props:{
		// 	ButtonList: {
		// 		type: Array,
		// 		default: () => {
		// 			return []
		// 		}
		// 	},
		// }
		data(){
			return{
				// ButtonList:[],
				classifyButtonList: [],
				buttonPopedom:[],
				
			}
		},
		methods:{
			async GetAllButtonList(ids, checkdata) {
				this.classifyButtonList = []
				let params = {
					menuIDs: ids.join(",")
				}
				let res = await GetAllButton(params)
				if (res.code == 1) {
					let allButtonList = res.data[0]
					checkdata.forEach(el => {
						el.buttonList = []
						allButtonList.forEach(item => {
							if (el.id == item.MenuID) {
								el.buttonList.push(item)
							}
						})
					})
					this.classifyButtonList = checkdata
				}
				if(this.buttonPopedom.length > 0){
						this.classifyButtonList.forEach(item=>{
							item.buttonList.forEach(bItem=>{
								this.buttonPopedom.forEach(el=>{
									if(el == bItem.id){
										bItem.type = true
									}
								})
							})
						})
				}
			},
			typeChange(item) {
				item.type = !item.type
				this.$forceUpdate()
			},
		}
	}

</script>

<style lang="scss">
	$activeColor: var(--bg-color, "#00aaff");
	.buttonSetting{
		margin-bottom: 5px;
		.recordText {
			border: 1px solid #fff;
			width: 80px;
			padding: 8px 0;
			text-align: center;
			font-size: 12px;
			cursor: pointer;
			background: #f2f2f2;
			color: #e0e0e0;
			margin:3px;
		}
		
		.recordText.active {
			background: $activeColor;
			color: #fff;
		}
	}

</style>