<template>
	<!-- steps -->
	<div v-show="current != 3">
		<a-steps v-model:current="current" :items="items"></a-steps>
		<a-divider style="height: 2px; background-color: #7cb305" />
	</div>

	<!-- step1 -->

	<div v-show="current === 0" class="step-1">
		<apply-form ref="applyFormRef" :apply-type="applyType"></apply-form>
	</div>

	<div v-show="current === 1" class="step-2">
		<scan-form ref="scanFormRef" :total-value="totalValue"></scan-form>
	</div>
	<div v-show="current === 2" class="step-3">
		<apply-confirm ref="applyConfirmRef" :table-data="conformData"></apply-confirm>
	</div>
	<div v-show="current === 3" class="step-4">
		<successResult :apply-type="applyType"></successResult>
	</div>

	<!-- 按钮 -->
	<a-space v-show="current != 3" wrap class="fixed-button-container">
		<a-button v-if="current != 0" type="dashed" @click="current--">上一步</a-button>
		<a-button v-if="current != 2" type="primary" @click="nextStep">下一步</a-button>
		<a-button v-if="current === 2" type="primary" :loading="loading" @click="submit">提交申请</a-button>
	</a-space>
</template>

<script setup lang="ts">
	import applyForm, { RowVO } from './apply-form.vue'
	import scanForm from './scan-form.vue'
	import applyConfirm from './apply-confirm.vue'
	import successResult from './success-result.vue'
	import api from '@/api'
	// 和外层界面的数据交互
	defineProps(
		{
			applyType: {
				type: String,
				default: '',
			},
		}, // 申请类型  PURCHASE_RECEIPT 采购入库申请 , RETURN_RECEIPT 归还入库申请 , LOAN_OUT 外借出库申请, AUDIT 盘点申请
	)
	// steps
	const current = ref<number>(0) // 翻页的引用
	const applyFormRef = ref() // step1表单引用
	const scanFormRef = ref() // step2表单引用
	const applyConfirmRef = ref() // step3表单引用

	const selectData = ref() // step1中用户申请选择的物料数据,存的原始数据
	const totalValue = ref(0) // 传给扫码页面的合计数值
	const conformData = ref<Array<object>>([]) // step3中的待确认数据
	const loading = ref(false) // 提交按钮的loading状态

	const items = [{ title: '录入申请' }, { title: '扫码点货' }, { title: '人工确认' }]
	/**
	 * 点击下一步
	 */
	type GroupedSums = Record<string, number>
	const nextStep = () => {
		if (applyFormRef.value && current.value === 0) {
			totalValue.value = 0
			// 再step1中点击下一步的时候，就去获取step1中的表单数据
			selectData.value = applyFormRef.value.getTableData()
			selectData.value.forEach((item: RowVO) => {
				if (item.assignRule) {
					totalValue.value += item.quantity
				}
			})
		}
		if (scanFormRef.value && current.value === 1) {
			// 再step2中点击下一步的时候，就去获取step2中的表单数据
			const items = scanFormRef.value.getTableData()
			const groupedSums = items.reduce((acc: GroupedSums, item: RowVO) => {
				if (!acc[item.code]) {
					acc[item.code] = 0
				}
				acc[item.code]++
				return acc
			}, {})
			// 组装步骤三的原始数据
			conformData.value = selectData.value.map((item: RowVO) => {
				return {
					id: item.id,
					name: item.name,
					code: item.code,
					applyNum: item.quantity,
					assignRule: item.assignRule,
					scanNum: groupedSums[item.code] || 0,
					remark: item.quantity != groupedSums[item.code] && item.assignRule ? `数量不一致` : '',
				}
			})
		}

		// 切换到下一步
		current.value++
	}

	/**
	 * 提交申请
	 */
	const submit = () => {
		loading.value = true
		// 提交申请
		console.log('提交申请')
		// 获取用户最终确认的数据
		const applyDetails = applyConfirmRef.value.getTableData() // 申请明细数据
		const applyForm = applyFormRef.value.getApplyForm() // 申请表单数据
		const detailList = scanFormRef.value.getTableData() // 扫码明细数据

		api.materialApi.apply.saveApply(
			{ applyForm: applyForm, applyDetails: applyDetails, detailList: detailList },
			() => {
				console.log('申请成功')
				// 清理缓存数据
				loading.value = false
				current.value = 3
			},
		)
	}
</script>

<style scoped>
	/* 固定按钮容器样式 */
	.fixed-button-container {
		position: fixed;

		/* 距离底部的距离 */
		right: 30px;
		bottom: 80px;

		/* 距离右侧的距离 */
		z-index: 1000;

		/* 确保按钮在其他内容之上 */
	}
</style>
