import { Component, OnInit, TemplateRef, ViewChild } from "@angular/core";
import { FormControl, FormGroup } from "@angular/forms";
import { NzDrawerRef, NzDrawerService } from "ng-zorro-antd/drawer";
import { AnyObject, TableListOption } from "@cdk/public-api";
import { DishFormComponent } from "@admin/app/components";
import { ApiService } from "@admin/app/services";
import { ActivatedRoute, Router } from "@angular/router";

@Component({
	selector: "app-ingredient-review",
	templateUrl: "./ingredient-review.component.html",
	styleUrls: ["./ingredient-review.component.less"],
})
export class IngredientReviewComponent {
	constructor(
		private drawer: NzDrawerService,
		private router: Router,
		private route: ActivatedRoute,
		private api: ApiService
	) {}

	@ViewChild("foofFormFooterTpl") foofFormFooterTpl!: TemplateRef<{}>;

	private drawerRef?: NzDrawerRef;

	status = 0;

	tempImg = "https://cdn.pixabay.com/photo/2023/08/08/18/01/butterfly-8177925_1280.jpg";

	public tableList = new TableListOption(this.fetchData.bind(this), {
		selectable: true,
	});

	public queryForm = new FormGroup({
		name: new FormControl(""),
	});

	ngOnInit(): void {
		this.status = Number(this.route.snapshot.queryParamMap.get("status")) || 0;
		this.initTableList();
	}

	initTableList() {
		this.tableList.scroll = { x: null };
		this.tableList = this.tableList.setColumns([
			{ key: "name", title: "食谱名称" },
			{ key: "name", title: "单位" },
			{ key: "name", title: "提交审核时间" },
			{ key: "name", title: "提交人" },
		]);

		this.tableList = this.tableList.setOptions([
			{
				title: "详情",
				premissions: [],
				onClick: this.showFoodForm.bind(this),
			},
			{
				title: "导出食谱",
				premissions: [],
				onClick: this.showFoodForm.bind(this),
			},

			{
				title: "取消发布",
				premissions: [],
				onClick: this.showFoodForm.bind(this),
			},
		]);
	}

	fetchData(query: AnyObject, pager: AnyObject) {
		return this.api.page(pager, query);
	}

	showFoodForm(food?: any) {
		this.drawerRef = this.drawer.create({
			nzTitle: food ? "编辑菜品" : "新增菜品",
			nzWidth: 700,
			nzContent: DishFormComponent,
			nzFooter: this.foofFormFooterTpl,
		});
	}

	cancelFoodForm() {
		this.drawerRef?.close();
	}

	deleteItem() {}

	onStatusChange(index: number) {
		this.status = index;
		this.router.navigate(["/ingredient/review"], {
			queryParams: {
				status: index,
			},
			queryParamsHandling: "merge",
		});
	}
}