<template>
    <div class="label-wrapper">
				<div class="list-box">
					<div class="label-box" v-for="(item,index) in attrs" :key="index">
					    <div class="title">{{item.value}}</div>
					    <div class="list">
					      <div class="label-item" :class="label.select?'on':''" v-for="(label,j) in item.details" :key="j" @click="selectAttr(label,j)">{{label.name}}</div>
					    </div>
					</div>
				</div>
        <div class="footer">
			<el-button type="primary" plain size="mini" class="btns" @click="cancel">取消</el-button>
			<el-button type="primary" plain size="mini" class="btns" @click="reset">重置</el-button>
      <el-button type="primary" size="mini" class="btns" @click="subBtn">确定</el-button>
    </div>
  </div>
</template>

<script>

export default {
	name: "attrList",
	props:{
		attrs: {
			type: Array,
			default: function () {
				return [];
			}
		}
	},
	data(){
		return {
		}
	},
	mounted() {
	},
	methods:{
		selectAttr(label,index){
			label.select = !label.select;
			this.$emit('activeData',JSON.parse(JSON.stringify(this.attrs)))
		},
		cancel(){
			this.$emit('close')
		},
		reset(){
			let data = this.attrs;
			data.map(el=>{
				el.details.map(label=>{
					label.select = false
				})
			})
			this.attrs = data;
		},
		subBtn(){
			this.$emit('subAttrs')
		}
	}
}
</script>
<style lang="scss" scoped>
.label-wrapper{
	 .list{
		 display: flex;
		 flex-wrap: wrap;
		 .label-item{
			 margin: 10px 8px 10px 0;
			 padding: 3px 14px;
			 background: #EEEEEE;
			 color: #333333;
			 border-radius: 2px;
			 cursor: pointer;
			 font-size: 12px;
			 border: 1px solid #EEEEEE;
			 &.on{
				 color: #1890FF;
				 border-color: #1890FF;
				 background-color: #fff;
			 }
		 }
	 }
	 .footer{
		 display: flex;
		 justify-content: flex-end;
		 margin-top: 40px;
		 button{
			  margin-left: 10px;
		 }
	 }
}
.btn{
	width: 60px;
	height: 24px;
}
.title{
	font-size: 13px;
}
.list-box{
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 240px;
}
</style>
