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 { format } from 'date-fns'
import { lastValueFrom, of } from 'rxjs'
import { AssetFormComponent, ManufacturerSelectComponent, PositionSelectComponent } from 'app/components'
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal'
import { NzMessageService } from 'ng-zorro-antd/message'
import { NzSafeAny } from 'ng-zorro-antd/core/types'
import { ASSET_SOURCE_MAP, ASSET_STATUS, ASSET_STATUS_MAP, ASSET_TYPE } from 'app/constants'
import { Utils } from 'app/utils'

@Component({
	selector: 'app-asset-management',
	standalone: true,
	imports: [SharedModule, AssetFormComponent, PositionSelectComponent, ManufacturerSelectComponent],
	templateUrl: './asset-management.component.html',
	styleUrl: './asset-management.component.less',
})
export class AssetManagementComponent {
	constructor(
		private api: ApiService,
		private modal: NzModalService,
		private msg: NzMessageService,
	) {}

	queryForm = new FormGroup({
		name: new FormControl(),
		model: new FormControl(),
		status: new FormControl(),
		assetCode: new FormControl(),
		serialNumber: new FormControl(),
		sourceId: new FormControl(),
		positionId: new FormControl(),
		manufacturersVendorId: new FormControl(),
	})

	ASSET_STATUS_MAP = ASSET_STATUS_MAP()

	ASSET_SOURCE_MAP = ASSET_SOURCE_MAP

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

	copyNum = 1

	ASSET_TYPE = ASSET_TYPE

	ngOnInit(): void {
		this.table
			.setConfig({
				selectable: true,
				rowKey: 'assetId',
			})
			.setColumn([
				{ key: 'assetCode', title: '业务编号', visible: true },
				{ key: 'name', title: '流程名称', visible: true },
				{ key: '_category', title: '流程类型', visible: true },
				{ key: 'status', title: '流程状态', visible: true },
				{ key: '_ownCompany', title: '紧急程度', visible: true },
				{ key: '_useOrganization', title: '发起人', visible: true },
				{ key: '_position', title: '创建时间', visible: true },
				{ key: '_position', title: '当前节点', visible: true },
				{ key: '_position', title: '备注', visible: true },
			])
			.setRowOperate([
				{
					title: '查看',
					onClick: (v) => {
						this.onCreate(v, true)
					},
				},
				{ title: '修改', onClick: this.onCreate.bind(this) },
				{ title: '复制', onClick: this.onCopy.bind(this) },
				{ title: '二维码', onClick: this.qrcode.bind(this) },
				{ title: '删除', onClick: this.deleteItem.bind(this) },
			])
	}

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

	onCopy(data: NzSafeAny) {}

	onCreate(data?: NzSafeAny, preview?: boolean) {
		let nzTitle = data ? '编辑资产' : '添加资产'
		if (preview) {
			nzTitle = '预览资产'
		}
		this.modal.create({
			nzTitle,
			nzContent: AssetFormComponent,
			nzWidth: '80vw',
			nzWrapClassName: 'modal-lg',
			nzData: {
				value: data,
				preview,
			},
			nzOnOk: async (e) => {
				const vals = e.getValues()
				if (vals) {
					const res = await lastValueFrom(this.api.saveAsset(vals))
					this.msg.success(res.desc)
					this.table.ref.reload()
					return true
				}

				return false
			},
		})
	}

	deleteItem(item?: NzSafeAny) {
		const ids = item ? [item.assetId] : Array.from(this.table.ref.selected)
		this.modal.confirm({
			nzTitle: '警告',
			nzContent: `是否要删除${ids.length}个资产？`,
			nzOnOk: async () => {
				const res = await lastValueFrom(this.api.deleteAsset(ids))
				this.msg.success(res.desc)
				this.table.ref.reload()
			},
		})
	}

	confirmAsset() {
		const ids = Array.from(this.table.ref.selected).map((i) => Number(i))
		this.modal.confirm({
			nzTitle: '警告',
			nzContent: `是否对选择的${ids.length}个资产进行确认？`,
			nzOnOk: async () => {
				const res = await lastValueFrom(this.api.confirmAsset(ids))
				this.msg.success(res.desc)
				this.table.ref.reload()
			},
		})
	}

	qrcode(d: NzSafeAny) {
		this.msg.loading('二维码生成中...')
		this.api.assetQrcode(d.assetId).subscribe((res) => {
			Utils.downLoadFile(res, 'application/pdf')
			this.msg.remove()
			this.msg.success('二维码生成成功')
		})
	}

	downloadTemplate() {
		this.msg.loading('模板下载中...')
		this.api.downloadAssetTemplate().subscribe((res) => {
			Utils.downLoadFile(res, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8')
			this.msg.remove()
			this.msg.success('模板下载成功')
		})
	}

	importModalRef?: NzModalRef
	importExcel(nzContent: TemplateRef<{}>) {
		this.importModalRef = this.modal.create({
			nzTitle: '资产数据导入',
			nzContent,
			nzWidth: 800,
			nzFooter: null,
		})
	}

	onFileChange(e: Event) {
		const target = e.target as HTMLInputElement
		const file = target.files![0]
		target.value = ''
		const formdata = new FormData()
		formdata.append('file', file)
		this.api.uploadAsset(formdata).subscribe((res) => {
			this.importModalRef?.close()
			this.msg.success(res.desc)
			this.table.ref.reload()
		})
	}
	exportExcel() {
		const ids = Array.from(this.table.ref.selected).map((i) => Number(i))
		if (ids.length === 0) {
			return
		}
		this.msg.loading('Excel生成中...')
		this.api.exportAsset(ids).subscribe((res) => {
			Utils.downLoadFile(res, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8')
			this.msg.remove()
			this.msg.success('Excel生成成功')
		})
	}
}