<template>
	<vxe-table
		ref="resulRef"
		border
		stripe
		show-overflow
		max-height="500"
		:column-config="{ resizable: true }"
		:data="tableData"
		:keyboard-config="{ isEsc: true }"
		size="medium"
		empty-text="盘点数据和库存数据一致，可以直接提交审核"
		:edit-config="{ trigger: 'click', mode: 'cell' }"
	>
		<vxe-column type="seq" title="序号" width="60"></vxe-column>
		<vxe-column field="id" title="ID" :visible="false" />
		<vxe-column field="materialName" title="物料名称" />
		<vxe-column field="barcode" title="物料条码" />
		<vxe-column field="exceptionReason" title="异常原因">
			<template #default="{ row }">
				<template v-if="row.exceptionReason === 'SOCK_IN_BUT_SCAN_NOT_EXIST'">库房在库状态但是扫码不存在</template>
				<template v-if="row.exceptionReason === 'SOCK_OUT_BUT_SCAN_EXIST'">库房不是在库状态但是扫码存在</template>
				<template v-if="row.exceptionReason === 'SOCK_NOT_EXIST_BUT_SCAN_EXIST'">库房不存在该条码但是扫码存在</template>
			</template>
		</vxe-column>
		<vxe-column field="exceptionHandle" title="异常处理（手动选择）" :edit-render="handelEditRender"></vxe-column>
		<vxe-column field="remark" title="备注说明" width="25%" :edit-render="{ name: 'textarea' }"></vxe-column>
	</vxe-table>
	<slot></slot>
</template>
<script setup lang="ts">
	import api from '@/api'
	import { toRefs } from 'vue'
	import type { VxeColumnPropTypes, VxeTableInstance } from 'vxe-table'
	import type { VxeSelectProps } from 'vxe-pc-ui'

	// 父组件数据交互
	const props = defineProps({
		applyId: {
			type: Number,
			required: false,
			default: 0,
		},
	})
	const resulRef = ref<VxeTableInstance<material.StocktakingScanExceptionalData>>()
	const getTableData = () => {
		const $table = resulRef.value
		if ($table) {
			return $table.getTableData().fullData.map((item) => ({
				id: item.id,
				exceptionHandle: item.exceptionHandle,
				remark: item.remark,
			}))
		}
	}
	defineExpose({ getTableData })

	const { applyId } = toRefs(props)
	const tableData = ref<Array<material.StocktakingScanExceptionalData>>()
	const result = ref()

	api.materialApi.apply.getComparisonRes(props.applyId + '', (data) => {
		result.value = data
		tableData.value = data.exceptionalData
	})
	//监听id的变化
	watch(applyId, () => {
		api.materialApi.apply.getComparisonRes(props.applyId + '', (data) => {
			result.value = data
			tableData.value = data.exceptionalData
		})
	})
	//下拉框
	const handelEditRender = ref<VxeColumnPropTypes.EditRender<undefined, VxeSelectProps>>({
		name: 'VxeSelect',
		options: [
			{ label: '标记为丢失', value: 'MARK_LOST' },
			{ label: '保持不变', value: 'MARK_KEEP' },
			{ label: '标记为归还', value: 'MARK_RETURN' },
			{ label: '标记为舍弃', value: 'MARK_DISCARD' },
			{ label: '标记为新入库', value: 'MARK_NEW' },
		],
	})
</script>
