<template>
	<!-- steps -->
	<div>
		<a-steps v-model:current="current" :items="items"></a-steps>
	</div>
	<a-divider style="height: 2px; background-color: #7cb305" />
	<!-- step1 -->
	<div class="step-1" v-if="current === 0">
		<!-- 基本信息的表单 -->
		<div>
			<a-form :model="formData" name="basic" layout="horizontal" labelWrap>
				<a-form-item label="申请人" name="applicant">
					<a-input v-model:value="formData.applicant" style="width: 40%;" />
				</a-form-item>

				<a-form-item label="申请类型" name="applyType">
					<a-radio-group v-model:value="formData.applyType" button-style="solid" style="width: 40%;">
						<a-radio-button value=1>采购入库</a-radio-button>
						<a-radio-button value=2>归还入库</a-radio-button>
					</a-radio-group>
				</a-form-item>
				<a-form-item label="申请日期" name="applyDate" style="width: 40%;">
					<a-date-picker />
				</a-form-item>
				<a-form-item label="入库物料" name="selected">
					<a-select v-model:value="formData.slectedList" mode="multiple" bordered placeholder="请选择入库物料"
						style="width: 40%;" showArrow :options="options" @deselect="removeEvent"
						@select="insertEvent"></a-select>
				</a-form-item>
			</a-form>
		</div>

		<!-- vxe-table -->
		<div>
			<vxe-table border show-overflow ref="tableRef" max-height="500" :column-config="{ resizable: true }"
				size="medium" :data="tableData" empty-text="请先选择入库物料" :edit-config="{ trigger: 'click', mode: 'cell' }"
				:checkbox-config="{ trigger: 'row', highlight: true }">
				<vxe-column type="seq" title="序号" width="60"></vxe-column>
				<vxe-column field="id" title="物料id" :visible="false"></vxe-column>
				<vxe-column field="role" title="物料名称" beforeEditMethod="false">
					<template #default="{ row }">
						<span>{{ row.name }}</span>
					</template>
				</vxe-column>
				<vxe-column field="code" title="编码" beforeEditMethod="false">
					<template #edit="{ row }">
						<vxe-input v-model="row.code" type="text"></vxe-input>
					</template>
				</vxe-column>

				<vxe-column field="spec" title="规格" beforeEditMethod="false">
					<template #edit="{ row }">
						<vxe-input v-model="row.spec" type="text" transfer></vxe-input>
					</template>
				</vxe-column>
				<vxe-column field="type" title="类型" beforeEditMethod="false">
					<template #edit="{ row }">
						<vxe-input v-model="row.type" type="text" transfer>
						</vxe-input>
					</template>
				</vxe-column>
				<vxe-column field="assignRule" title="赋码规则" beforeEditMethod="false">
					<template #edit="{ row }">
						<vxe-input v-model="row.assignRule" type="text" transfer>
						</vxe-input>
					</template>
				</vxe-column>
				<vxe-column field="quantity" title="申请数量" :edit-render="{}">
					<template #edit="{ row }">
						<vxe-number-input v-model="row.quantity" type="integer"></vxe-number-input>
					</template>
				</vxe-column>
				<vxe-column field="oprator" title="操作" beforeEditMethod="false">
					<template #default="{ row }">
						<vxe-button mode="text" status="error" @click="removeRow(row)">删除</vxe-button>
					</template>
				</vxe-column>

			</vxe-table>
		</div>
	</div>


	<!-- step2 -->

	<div class="step-2" v-if="current === 1">
		<a-button type="primary" @click="autoInsertOneRow">开始扫码</a-button>
		<a-button type="primary" danger @click="" style="left: 20px;">重新扫码</a-button>
		<vxe-table border stripe show-overflow ref="applyDetailTableRef" max-height="500"
			:column-config="{ resizable: true }" :keyboard-config="{ isEsc: true, isEnter: true }" size="medium"
			:data="tableData" empty-text="请先扫码物料体条码" :edit-config="{ trigger: 'click', mode: 'cell', autoFocus: true}">

			<vxe-column type="seq" title="序号" width="60"></vxe-column>
			<vxe-column field="id" title="物料id" :visible="false"></vxe-column>
			<vxe-column field="barcode" title="物料条码" :edit-render="{ name: 'input', autoSelect: true }">
				<template #edit="{ row }">
					<vxe-input v-model="row.barcode" type="text" class="my-input" transfer></vxe-input>
				</template>
			</vxe-column>
			<vxe-column field="role" title="物料名称" beforeEditMethod="false">
				<template #default="{ row }">
					<span>{{ row.name }}</span>
				</template>
			</vxe-column>
			<vxe-column field="code" title="编码" beforeEditMethod="false">
				<template #edit="{ row }">
					<vxe-input v-model="row.code" type="text"></vxe-input>
				</template>
			</vxe-column>

			<vxe-column field="spec" title="规格" beforeEditMethod="false">
				<template #edit="{ row }">
					<vxe-input v-model="row.spec" type="text" transfer></vxe-input>
				</template>
			</vxe-column>
			<vxe-column field="type" title="类型" beforeEditMethod="false">
				<template #edit="{ row }">
					<vxe-input v-model="row.type" type="text" transfer>
					</vxe-input>
				</template>
			</vxe-column>
			<vxe-column field="oprator" title="操作" beforeEditMethod="false">
				<template #default="{ row }">
					<vxe-button mode="text" status="error" @click="removeStep2Row(row)">删除</vxe-button>
				</template>
			</vxe-column>

		</vxe-table>
	</div>
	<!-- 按钮 -->
	<a-space wrap class="fixed-button-container">
		<a-button type="default" @click="current = current - 1" v-if="current > 0">上一步</a-button>
		<a-button type="primary" @click="btnClick" v-if="current < 2">下一步</a-button>
		<a-button type="primary" @click="btnClick" v-if="current === 2">提交</a-button>
	</a-space>
</template>

<script setup lang="ts">
import { VxeTableInstance } from 'vxe-table'
import api from '@/api'
import { useUserStore } from '@/stores/user'
// steps
const current = ref<number>(0)
const items = [{ title: '录入申请' }, { title: '扫码点货' }, { title: '人工确认' }]



// 表单数据


interface FormData {
	applicant: string; // 申请人
	applyDate: Date; // 申请日期
	applyType: number; // 申请类型
	slectedList: string[]; // 入库物料
}

const userStore = useUserStore()
const formData = ref<FormData>({
	applicant: userStore.userName,
	applyDate: new Date(),
	applyType: 1, // 1: 采购入库 2: 归还入库 3: 出库外借
	slectedList: []

});



// vxe-table相关的设置
interface RowVO {
	id: number
	name: string
	code: string
	spec: string
	type: string
	quantity: number
	disabled: boolean
	checked: boolean
	assignRule: number
}
const tableRef = ref<VxeTableInstance<RowVO>>()
// vxe-table 数据结果
const tableData = ref<Array<RowVO>>([])
// 物料选择器
const options = ref<{ label: string, value: number }[]>([])
const materialList = ref<material.Material[]>([])
const getMaterialList = async () => {
	await api.materialApi.material.all((data) => {
		materialList.value = data
	})
	options.value = materialList.value.map((item) => {
		return { label: item.name ? item.name : '未知', value: item.id ? item.id : -1 }
	})
}
getMaterialList()



// 选中时在末尾新增一行
// value: number, option: { label: string, value: number }
const insertEvent = (value: string) => {

	window.console.log('insertEvent', tableData.value)

	// 根据value找到对应的物料信息
	const material = materialList.value.find((item) => item.id === (value ? parseInt(value) : -1))
	if (material) {
		const row: RowVO = {
			id: material.id ? material.id : -1,
			name: material.name ? material.name : '未知',
			code: material.code ? material.code : '未知',
			spec: material.spec ? material.spec : '未知',
			type: material.type ? material.type : '未知',
			quantity: 1,
			assignRule: material.assignRule ? material.assignRule : 1,
			disabled: false,
			checked: false
		}
		const $table = tableRef.value
		if ($table) {
			$table.insertAt(row, -1)
		}
	}


}

// 取消选中时，删除table中的行
const removeEvent = (value: string) => {
	const $table = tableRef.value
	// 根据value找到对应的行
	if ($table) {
		$table.getTableData().fullData.forEach((item) => {
			if (item.id === (value ? parseInt(value) : -1)) {
				$table.remove(item)
			}
		})
	}
}

// 手动删除table中的行
const removeRow = async (row: RowVO) => {
	//打印tableData数组
	const $table = tableRef.value
	if ($table) {
		// 根据row.id找到对应选中列表中的数据
		formData.value.slectedList.forEach((item, index) => {
			if (item.toString() === row.id.toString()) {
				formData.value.slectedList.splice(index, 1)
			}
		})

		$table.remove(row)
	}
}

// 点击下一步按钮
const btnClick = () => {
	// 在这里添加您想要执行的逻辑
	current.value = current.value + 1; // 跳转到下一步
};


// step2相关的逻辑

interface Step2RowVO {
	barcode: string
	name: string
	code: string
	spec: string
	type: string
	times: Date
}
// 扫码点货的table对象
const applyDetailTableRef = ref<VxeTableInstance<Step2RowVO>>()

// 移除table中的行
const removeStep2Row = async (row: Step2RowVO) => {
	const $table = applyDetailTableRef.value
	if ($table) {
		$table.remove(row)
	}
}

// 点击开始扫码按钮，自动新增一行 或者 扫码结束后也自动新增一行
const autoInsertOneRow = async () => {
	const $table = applyDetailTableRef.value
	// // 获取表格的最后一行，判断是否有数据
	// const fullData = $table?.getTableData().fullData;



	if ($table) {
		const row: Step2RowVO = {
			barcode: '',
			name: '',
			code: '',
			spec: '',
			type: '',
			times: new Date()
		}
		$table.insertAt(row, -1)
	}
}




</script>

<style scoped>
/* 固定按钮容器样式 */
.fixed-button-container {
	position: fixed;
	bottom: 80px;
	/* 距离底部的距离 */
	right: 30px;
	/* 距离右侧的距离 */
	z-index: 1000;
	/* 确保按钮在其他内容之上 */
}
</style>
