<template>
	<page-container>
		<!-- 页面操作栏 -->
		<template #ops>
			<a-row>
				<a-col :span="18">
					<a-input-search
						v-model:value="searchKey"
						:placeholder="`请输入`"
						allow-clear
						enter-button
						@search="loadData()"
					></a-input-search>
				</a-col>
				<a-col :span="6">
					<a-button type="primary" style="margin-left: 10px" @click="formDrawer?.show()">
						<template #icon>
							<icon-font type="icon-plus" />
						</template>
						申请扫码
					</a-button>
				</a-col>
			</a-row>
		</template>
		<!-- 页面表格内容 -->
		<div style="min-height: calc(100vh - 305px)">
			<!-- 表格行 -->
			<a-table
				:columns="columns"
				:data-source="auditPage?.records"
				bordered
				:pagination="pagination"
				:loading="loading"
				row-key="key"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'auditType'">
						{{ record.auditType === 'ALL' ? '全部盘点' : '部分盘点' }}
					</template>
					<template v-if="column.dataIndex === 'reviewResult'">
						<template v-if="record.reviewResult === 'WAIT_SCAN'">待扫码</template>
						<template v-if="record.reviewResult === 'WAIT_SUBMIT'">待提交</template>
						<template v-if="record.reviewResult === 'WAIT_REVIEW'">待审核</template>
						<template v-if="record.reviewResult === 'PASS'">审核通过</template>
						<template v-if="record.reviewResult === 'REJECT'">退回</template>
					</template>
					<template v-if="column.dataIndex === 'operation'">
						<a-button
							v-if="record.reviewResult === 'WAIT_SCAN' || record.reviewResult === 'REJECT'"
							type="link"
							@click="showModal(record.id)"
						>
							<template #icon>
								<icon-font type="icon-edit" />
							</template>
							开始扫码
						</a-button>
						<a-button
							v-if="record.reviewResult === 'WAIT_SUBMIT' || record.reviewResult === 'WAIT_SCAN'"
							type="link"
							style="margin-left: 10px"
							@click="showResultModal(record.id)"
						>
							<template #icon>
								<icon-font type="icon-plus" />
							</template>
							生成结果
						</a-button>
					</template>
				</template>
			</a-table>
		</div>
	</page-container>

	<!-- 新增申请抽屉 -->
	<form-drawer
		ref="formDrawer"
		v-model="applyForm"
		:form-items="items"
		:config="formConfig"
		:disabled-fields="disabledFields"
		title="扫码盘点"
		@ok="doSave"
	/>
	<!-- 盘点作业弹窗 -->
	<a-modal
		v-model:open="open"
		title="盘点作业"
		width="100%"
		wrap-class-name="full-modal"
		:confirm-loading="confirmLoading"
		@ok="handleOk"
	>
		<scan-form ref="scanFormRef" :apply-id="applyIdRef" :total-value="88"></scan-form>
	</a-modal>
	<!-- 盘点结果弹窗 -->
	<a-modal
		v-model:open="openResult"
		title="盘点异常数据："
		ok-text="提交审核"
		width="80%"
		:confirm-loading="confirmLoading"
		@ok="submitHandle"
	>
		<result-form ref="handleResultRef" :apply-id="applyIdRef"></result-form>
	</a-modal>
</template>

<script setup lang="ts">
	import api from '@/api'
	import { IPage } from '@/api/api'
	import FormDrawer from '@/components/form-render/form-drawer.vue'
	import { config, formItems } from './form'
	import { notification } from 'ant-design-vue'
	import dayjs from 'dayjs'
	import { useUserStore } from '@/stores/user'
	import scanForm from '../component/scan-form.vue'
	import resultForm from './result-form.vue'

	const searchKey = ref('')
	const userStore = useUserStore()
	const scanFormRef = ref() // 盘点作业弹窗组件
	const handleResultRef = ref() // 盘点结果弹窗组件
	const confirmLoading = ref(false) // 盘点作业弹窗提交按钮loading
	// 新增申请表单对象
	const applyForm = ref<Partial<material.AuditApplyInfo>>({
		auditType: 'ALL',
		applicant: userStore.userName,
		type: 'AUDIT',
		applyDate: dayjs() + '',
		confirm: false,
		reviewResult: 'WAIT_SCAN',
	})

	//列表数据
	const auditPage = ref<IPage<material.ApplyForm>>()
	const loading = ref(false)

	//新增申请的下拉框选择对象
	const materialList = ref<Array<{ value: string | undefined; label: string | undefined }>>([])
	const personList = ref<Array<{ value: string | undefined; label: string | undefined }>>([])
	const required = ref(false)
	api.materialApi.material.all((data) => {
		materialList.value = data.map((item) => {
			return {
				value: item?.id + '',
				label: item?.name,
			}
		})
	})
	api.aclApi.user.all((data) => {
		personList.value = data.map((item) => {
			return {
				value: item?.name,
				label: item?.fullName,
			}
		})
	})

	//是否必填
	const disabledFields = computed(() => {
		return applyForm.value?.auditType === 'ALL' ? ['materials'] : []
	})

	//抽屉组件
	const formDrawer = ref<typeof FormDrawer>()
	const formConfig = computed(() => {
		return config
	})
	//表单配置
	const items = computed(() => {
		return formItems(materialList.value, required, personList.value)
	})
	// 加载数据的方法
	const loadData = async (page = 1, size = 10) => {
		loading.value = true
		api.materialApi.apply.searchAuditPage(
			{
				page: page,
				size: size,
				reviewResults: ['WAIT_SUBMIT', 'WAIT_SCAN', 'WAIT_REVIEW', 'PASS'],
			},
			(data) => {
				auditPage.value = data
				loading.value = false
			},
		)
	}
	//初始加载
	loadData()

	//表格列
	const columns = [
		{
			title: '申请ID',
			dataIndex: 'id',
		},
		{
			title: '盘点类型',
			dataIndex: 'auditType',
		},
		{
			title: '申请人',
			dataIndex: 'applicant',
		},
		{
			title: '盘点人',
			dataIndex: 'taker',
		},
		{
			title: '任务状态',
			dataIndex: 'reviewResult',
		},
		{
			title: '盘点审核人',
			dataIndex: 'reviewer',
		},

		{
			title: '创建时间',
			dataIndex: 'createdTime',
		},
		{
			title: '操作',
			dataIndex: 'operation',
			width: 400,
		},
	]

	//分页信息
	const pagination = computed(() => {
		return {
			current: auditPage.value?.current,
			pageSize: auditPage.value?.size,
			total: auditPage.value?.total,
			onChange: (page: number, pageSize: number) => {
				loadData(page, pageSize)
			},
		}
	})

	// 新增申请保存
	const doSave = (_data: material.AuditApplyInfo) => {
		api.materialApi.apply.auditApply(_data, () => {
			formDrawer.value?.close()
			notification.success({
				message: '操作成功',
				description: '盘点申请保存成功,页面将自动刷新!',
				onClose: () => {
					loadData(1)
				},
			})
		})
	}

	// 盘点作业弹窗相关
	const open = ref<boolean>(false)
	const applyIdRef = ref()
	const showModal = (applyId: number) => {
		open.value = true
		applyIdRef.value = applyId
	}
	// 盘点作业提交数据

	//关闭弹窗 提交数据
	const handleOk = () => {
		confirmLoading.value = true
		if (scanFormRef.value) {
			const data = scanFormRef.value.getApplyData()
			api.materialApi.apply.saveScanData(applyIdRef.value, data, () => {
				open.value = false
				confirmLoading.value = false
				loadData(1)
			})
		}
	}

	// 盘点结果弹窗相关
	const openResult = ref<boolean>(false)
	const showResultModal = (applyId: number) => {
		window.console.log('点击传参' + applyId)
		openResult.value = true
		applyIdRef.value = applyId
	}

	// 盘点结果提交数据
	const submitHandle = () => {
		confirmLoading.value = true
		const handleData = handleResultRef.value.getTableData()
		api.materialApi.apply.updateReviewResult(applyIdRef.value, handleData, () => {
			openResult.value = false
			loadData(1)
		})
		confirmLoading.value = false
	}
</script>

<style lang="less">
	.full-modal {
		.ant-modal {
			max-width: 100%;
			top: 0;
			padding-bottom: 0;
			margin: 0;
		}

		.ant-modal-content {
			display: flex;
			flex-direction: column;
			height: calc(100vh);
		}

		.ant-modal-body {
			flex: 1;
		}
	}
</style>
