<template>
	<div>
		<div class="half-transfer">
			<div class="el-transfer-panel">
				<div>
					<el-checkbox v-model="selectAll" @change="handleSelectAll">全部</el-checkbox>
				</div>
				<el-input v-model="searchInput" placeholder="请输入搜索内容" clearable @clear="clearSearch"></el-input>
				<div class="el-transfer__list">
					<el-checkbox-group v-model="selectedData" @change="handleCheckbox" class="el-transfer__list">
						<el-checkbox v-for="option in filteredOptions" :key="option.key" :label="option.key">{{ option.label }}</el-checkbox>
					</el-checkbox-group>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			searchInput: '',
			selectedData: [],
			data: [
				{ key: 1, label: '选项1' },
				{ key: 2, label: '选项2' },
				{ key: 3, label: '选项3' },
				{ key: 4, label: '选项4' },
				{ key: 5, label: '选项5' },
				{ key: 6, label: '选项6' },
				{ key: 7, label: '选项7' },
				{ key: 8, label: '选项8' },
			],
			selectAll: false,
		};
	},
	computed: {
		filteredOptions() {
			return this.data.filter((option) => option.label.toLowerCase().includes(this.searchInput.toLowerCase()));
		},
	},
	watch: {
		selectedData(newData) {
			if (newData.length === this.filteredOptions.length) {
				this.selectAll = true;
			} else {
				this.selectAll = false;
			}
		},
	},
	methods: {
		clearSearch() {
			this.searchInput = '';
		},
		handleSelectAll(checked) {
			if (checked) {
				this.selectedData = this.filteredOptions.map((option) => option.key);
			} else {
				this.selectedData = [];
			}
		},
		// 数据权限选择问题
		handleCheckbox() {
			if (this.data.length === this.selectedData.length) {
				this.selectAll = true;
			} else {
				this.selectAll = false;
			}
		},
	},
};
</script>
<style scoped>
.half-transfer {
	margin-top: 20px;
	margin-left: 20px;
	width: 335px;
	height: 260px;
	background: #fff;
	padding: 20px;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
}

.el-transfer-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.el-transfer__list {
	overflow-y: auto;
	border-radius: 4px;
	margin-top: 8px;
}

.el-transfer__list .el-checkbox {
	display: flex;
	margin-bottom: 5px;
	line-height: 24px;
}

.el-transfer__list .el-checkbox:last-child {
	margin-bottom: 0;
}

.el-transfer__list .el-scrollbar {
	background-color: #f5f7fa;
}
</style>