import { Component, TemplateRef, ViewChild } from '@angular/core'
import { FormControl, FormGroup } from '@angular/forms'

import { AnyObject, TableOption } from 'app/shared/components/server-paginated-table'
import { ApiService } from 'app/services'
import { SharedModule } from 'app/shared/shared.module'

import { lastValueFrom, map, of } from 'rxjs'
import { NzSafeAny } from 'ng-zorro-antd/core/types'
import { NzModalService } from 'ng-zorro-antd/modal'
import { NzMessageService } from 'ng-zorro-antd/message'
import { FormValidators } from 'app/utils'
import { comsMap } from '../flow-main/flow-main.component'
import { FLOW_STATUS } from 'app/constants'

@Component({
	selector: 'app-flow-my-finished',
	standalone: true,
	imports: [SharedModule],
	templateUrl: './flow-my-finished.component.html',
	styleUrl: './flow-my-finished.component.less',
})
export class FlowMyFinishedComponent {
	constructor(
		private api: ApiService,
		private modal: NzModalService,
		private msg: NzMessageService,
	) {}

	@ViewChild('createFormTpl') createFormTpl!: TemplateRef<{}>

	createForm = new FormGroup({
		formId: new FormControl(''),
		userId: new FormControl<NzSafeAny[]>([], [FormValidators.required('请选择')]),
	})

	table = new TableOption(this.fetchData.bind(this))

	queryForm = new FormGroup({
		name: new FormControl(''),
	})

	FLOW_STATUS = FLOW_STATUS

	ngOnInit(): void {
		this.table
			// .setConfig({
			// 	selectable: true,
			// 	rowKey: 'id',
			// })
			.setColumn([
				{ key: 'procVars', title: '名称', visible: true },
				// { key: 'status', title: '审批状态', visible: true },
				{ key: 'status', title: '流程状态', visible: true },
				{ key: 'urgency', title: '紧急程度', visible: true },
				{ key: 'procDefName', title: '流程类型', visible: true },
				{ key: 'assigneeName', title: '审批人', visible: true },
				{ key: 'createTime', title: '提交时间', visible: true },
				// { key: 'createTime', title: '作废时间', visible: true },
				// { key: 'createTime', title: '完成时间', visible: true },
			])
			.setRowOperate([{ title: '查看', onClick: this.onDetail.bind(this) }])
	}

	fetchData(p: {}, q: AnyObject) {
		return this.api.getMyFinishedAssetFlow({ ...p, ...q })
	}

	onDetail(model: NzSafeAny) {
		this.modal.create({
			nzTitle: '查看任务',
			nzContent: comsMap[model.procDefKey],
			nzWrapClassName: 'modal-lg',
			nzWidth: '80vw',
			nzData: {
				value: model,
				preview: true,
			},
		})
	}
}