<!--
 * @Author: zhp
 * @Date: 2024-01-30 10:54:51
 * @LastEditTime: 2024-02-01 14:46:19
 * @LastEditors: zhp
 * @Description:
-->
<template>
  <div>
    <div class="bom-selection" v-for="item in list__inner" :key="item.id + randomKey">
      <el-checkbox :label="item.name" :checked="item.choose" @change="(e) => handleChange(item, e)"
        class="sl__body-item"></el-checkbox>
    </div>
  </div>

</template>

<script>
export default {
	name: 'BomSelection',
	components: {},
	// model: {
	// 	prop: 'selected',
	// 	event: 'update',
	// },
	props: {
		currentSelect: {
			type: Array,
			default: ()=>[],
		},
		list: {
			type: Array,
			default: () => [],
		},
		equipmentId: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			list__inner: [],
			selected: null,
			randomKey: Math.random(),
		};
	},
	watch: {
		list: {
      handler(val) {
        console.log(val)
				if (val) {
					this.list__inner = val.map((item) => ({ ...item, choose: false }));
				}
			},
			deep: true,
			immediate: true,
		},
		currentSelect: {
      handler(val) {
        console.log(val)
				// val: string
				this.selected = val;
				this.randomKey = Math.random();
				// 更新选中状态
				if (val) {
          this.list__inner.forEach((item,index) => {
            val.forEach((ele) => {
              console.log(ele)
              if (item.id == ele.id) item.choose = true;console.log(ele.id)
              // else item.choose = false;
            })
					});
				}
			},
			immediate: true,
		},
	},
	methods: {
		handleChange(bomItem, selected) {
			this.list__inner = this.list__inner.map((item) => ({
				...item,
				disabled: selected ? item.id !== bomItem.id : false,
			}));

			if (selected) this.selected = null;


			this.$emit('change', this.equipmentId, bomItem.id, selected);
			this.$nextTick(() => {
				this.$forceUpdate();
			});
		},
		clearSelected() {
			console.log('clearSelected');
			this.selected = null;
			this.randomKey = Math.random();
			// this.$emit('update', null);
			// this.$nextTick(() => {
			// 	this.$forceUpdate();
			// });
		},
	},
};
</script>

<style scoped lang="scss">
.bom-selection {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px;
}

.sl__body-item {
	margin: 0;
	padding: 3px 6px;
	border-radius: 4px;
	transition: background 0.3s ease-in-out;

	&:hover {
		background: #0001;
	}
}
</style>
