diet-web-ui/projects/cdk/src/shared/components/search-and-select/search-and-select.component.ts

import { Component, EventEmitter, Input, Output } from "@angular/core";
import { OptionItemInterface } from "@cdk/types";
import { NzSelectModeType } from "ng-zorro-antd/select";
import { Observable, debounceTime } from "rxjs";

@Component({
	selector: "search-and-select",
	templateUrl: "./search-and-select.component.html",
	styleUrls: ["./search-and-select.component.less"],
})
export class SearchAndSelectComponent {
	constructor() {}

	@Input() handleSearh!: (keyword: string) => Observable<OptionItemInterface[]>;

	@Input() placeHolder: string = "输入关键字搜索然后选择";

	@Input() mode: NzSelectModeType = "multiple";

	@Output() onSelect = new EventEmitter<Array<OptionItemInterface>>();

	listOfOption: Array<OptionItemInterface> = [];

	searchValue = "";

	selected = new Set<string>();

	nzFilterOption = (): boolean => true;

	search(value: string) {
		if (!value) {
			return;
		}
		this.handleSearh
			.call(this, value)
			.pipe(debounceTime(500))
			.subscribe((data) => {
				this.listOfOption = data;
				// this.listOfOption = Array.from({ length: 2 }, (_, i) => ({ label: "dd" + i, value: i.toString() }));
			});
	}

	handleSelect(v: string) {
		if (this.selected.has(v)) {
			this.selected.delete(v);
		} else {
			this.selected.add(v);
		}
	}

	onSubmit() {
		const selects: OptionItemInterface[] = [];
		this.selected.forEach((i) => {
			selects.push(this.listOfOption.find((f) => f.value === i)!);
		});
		this.onSelect.emit(selects);
	}
}