<template>

	<el-dialog :visible.sync="dialogVisible" title="库存一览" width="600px" @close="handleDialogClose">
		<div ref="reportHTML" v-html="msg" class="web-con"></div>
		<el-table :data="wmsInventoryList" v-loading="loading">
			<el-table-column width="100" property="itemName" label="物料名称"></el-table-column>
			<el-table-column width="150" property="itemTypeName" label="物料类别"></el-table-column>
			<el-table-column property="warehouseName" label="仓库/库区"></el-table-column>
			<el-table-column width="100" property="quantity" label="库存"></el-table-column>
		</el-table>
		<span slot="footer" class="dialog-footer">
			<el-button type="primary" @click="handleDialogConfirm">确 定</el-button>
		</span>
	</el-dialog>

</template>

<script>
	import { mapGetters } from 'vuex'
	import { listWmsInventory } from "@/api/wms/inventory";

	export default {
		props: {
			value: {
				type: [String, Number, Array],
				default: null
			},
			size: {
				type: String,
				default: 'small'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			prodId: {
				type: [Number, String],
				default: null
			},
			msg: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				wmsInventoryList: [],
				loading: true,
				dialogVisible: true,
				selectedValue: ''
			}
		},
		computed: {
			...mapGetters(['rackList', 'areaList', 'warehouseList']),
			selections: {
				get() {
					return this.value
				},
				set(v) {
					this.$emit('input', v)
				}
			}
		},
		created() {
			this.setOptions()
		},
		methods: {
			setOptions() {
				this.loading = true
				listWmsInventory({ itemId: this.prodId }, {}).then(response => {
					const { content, totalElements } = response
					this.wmsInventoryList = content

					content.forEach(item => {
						if (!item.warehouseName) {
							item.warehouseName = "暂未分配仓库"
						}
						if (item.areaName) {
							if (item.areaName) {
								item.warehouseName = `${item.warehouseName}/${item.areaName}`;
							}
						}
					});
					this.total = totalElements;
					this.loading = false;
				});
			},
			handleDialogClose() {
				this.selectedValue = this.selections;
			},
			showDialog() {
				this.dialogVisible = true;
			},
			handleDialogConfirm() {
				// 处理对话框确认按钮的逻辑
				// 可以在这里获取选中的值并进行相应的处理
				// 例如，将选中的值赋给输入框的绑定值
				this.selectedValue = this.selections;
				this.dialogVisible = false; // 关闭对话框
			}
		}
	}
</script>