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

@Component({
	selector: "app-user-list",
	templateUrl: "./user-list.component.html",
	styleUrls: ["./user-list.component.less"],
})
export class UserListComponent {
	constructor(private api: ApiService, private route: ActivatedRoute, private modal: NzModalService) {}

	@ViewChild("userFormTpl") public userFormTpl!: TemplateRef<void>;

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

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

	roleId: string | null = null;

	ngOnInit(): void {
		this.route.queryParamMap.subscribe((r) => {
			this.roleId = r.get("roleId");
			if (this.roleId) {
				this.tableList.reset();
			}
		});
		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.openForm.bind(this),
			},
			{
				title: "删除",
				premissions: [],
				onClick: this.deleteItem.bind(this),
			},
		]);
	}

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

	deleteItem() {}

	openForm(item?: any) {
		this.modal.create({
			nzTitle: item ? "编辑用户" : "新增用户",
			nzContent: this.userFormTpl,
		});
	}
}