<!-- 
    filename: BomSelector.vue
    author: liubin
    date: 2023-11-17 16:23:28
    description: 
-->

<template>
	<div class="bom-selector">
		<el-row>
			<el-col :span="8">
				<el-input
					v-model="searchText"
					placeholder="搜索"
					style="margin-bottom: 12px; user-select: none">
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</el-col>
		</el-row>

		<el-row style="border: 1px solid #ccc">
			<el-col :span="8">
				<div class="select-list">
					<div class="sl__header" style="background: #f3f4fb; padding: 12px">
						<span style="">可分配设备</span>
						<span>1/24</span>
					</div>
					<el-checkbox-group v-model="selectedEquipments" class="sl__body">
						<el-checkbox
							v-for="n in 10"
							:key="n"
							:label="'设备' + n"
                            :true-label="n"
							class="sl__body-item"></el-checkbox>
					</el-checkbox-group>
				</div>
			</el-col>
			<el-col :span="8" style="border-left: 1px solid #ccc">
				<div class="select-list">
					<div class="sl__header" style="background: #f3f4fb; padding: 12px">
						<span style="">物料BOM</span>
					</div>
					<el-checkbox-group v-model="selectedMBom" class="sl__body">
						<el-checkbox
							v-for="n in 10"
							:key="n"
							class="sl__body-item"></el-checkbox>
					</el-checkbox-group>
				</div>
			</el-col>
			<el-col :span="8" style="border-left: 1px solid #ccc">
				<div class="select-list">
					<div class="sl__header" style="background: #f3f4fb; padding: 12px">
						<span style="">参数BOM</span>
					</div>
					<el-checkbox-group v-model="selectedPBom" class="sl__body">
						<el-checkbox
							v-for="n in 10"
							:key="n"
							class="sl__body-item"></el-checkbox>
					</el-checkbox-group>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
export default {
	name: 'BomSelector',
	components: {},
	props: {},
	data() {
		return {
			searchText: '',
			selectedEquipments: [],
			selectedMBom: [],
			selectedPBom: [],
		};
	},
    watch: {
        selectedEquipments: {
            handler(val) {
                console.log(val);
            },
            deep: true,
        },
    },
	computed: {},
	methods: {},
};
</script>

<style scoped lang="scss">
.bom-selector {
	min-height: 200px;
}

.select-list {
}

.sl__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px;
    
	> .el-checkbox {
        margin: 0;
        padding: 3px 6px;
		border-radius: 4px;
        transition: background 0.3s ease-in-out;

		&:hover {
			background: #0001;
		}
	}
}

.sl__header {
    border-bottom: 1px solid #ccc;
}
</style>
