<template>
	<div>
		<div class="selectS" @click="openWindows">查看</div>
		<vxe-modal v-model="vxeValue" width="50%" height="50%" show-zoom resize transfer>
			<template #title>
				<span>库存查看</span>
			</template>
			<template #default>
				<by-table :propConfig="config" ref="stockTable" style="margin-top: 10px;"></by-table>
			</template>
		</vxe-modal>
	</div>
</template>

<script lang="ts">
	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
	import request from '@/benyun/utils/request'
	@Component
	export default class StockLook extends Vue {
		vxeValue : any = false
		@Prop()
		parentValue : any;
		config = {
			attr: {
				size: 'medium',
				align: 'left'
			},
			columns: [{
				width: '150px',
				title: '仓库名称',
				field: 'storeName',
			}, {
				width: '150px',
				title: '仓位名称',
				field: 'storeLocationName',
			}, {
				width: '150px',
				title: '第三方仓库名称',
				field: 'threeStoreName',
			}, {
				width: '150px',
				title: '库存',
				field: 'inventory',
			}]
		}
		openWindows() {
			let loading = this.$loading({ target: '.main-container' });
			request({
				url: '/supply/supplyInventory/getInventorysBySkuid',
				method: 'get',
				params: { skuid: this.parentValue.materialSku },
			}).then((res : any) => {
				if (res.code === 200) {
					this.vxeValue = true;
					loading.close();
					setTimeout(() => {
						(this as any).$refs.stockTable.setValue(res.data);
					},0)
				} else loading.close();
			}).catch(() => loading.close())
		}
	}
</script>

<style scoped lang="scss">
	.selectS {
		color: #fff;
		background-color: #0089ff;
		padding: 0 10px;
		height: 22px;
		line-height: 22px;
		border-radius: 12px;
		text-align: center;
		cursor: pointer;
	}
</style>