<!-- 及时库存明细 -->
<template>
	<div class="main-container order-mc-bg">
		<div class="sale-container">
			<!-- 顶部按钮组 -->
			<toolBtn :btnType="btnType" @actionhandel="actionhandel"></toolBtn>
			<!-- 列表 -->
			<div class="sale-page-body">
				<!-- 表头 -->
				<div class="sale-page-table-header" ref="getSaleTableHeader">
					<el-form :inline="true">
						<el-row class="form-row1">
							<el-col :span="20">
								<el-row :gutter="2">
									<el-col :span="4">
										<el-form-item
											class="Iisshow"
											label="物料"
										>
											<el-input
												class="f-12"
												placeholder="请输入物料名称/编码/SKU"
												v-model.trim="search.productKey"
											></el-input>
											<div
												:data-clipboard-text="
													search.productKey
												"
												@click="saleOrderCopy"
												class="copyBtn"
											>
												<i
													class="el-icon-document-copy"
												/>
											</div>
										</el-form-item>
									</el-col>
									<el-col :span="4">
										<el-form-item
											class="Iisshow"
											label="库存量"
										>
											<el-input
												class="f-12"
												@input="
													comInput(
														search.realityQty,
														'realityQty'
													)
												"
												:maxlength="15"
												placeholder="请输入"
												v-model="search.realityQty"
											></el-input>
											<div
												:data-clipboard-text="
													search.realityQty
												"
												@click="saleOrderCopy"
												class="copyBtn"
											>
												<i
													class="el-icon-document-copy"
												/>
											</div>
										</el-form-item>
									</el-col>
									<el-col :span="4">
										<el-form-item label="仓库">
											<el-select
												clearable
												filterable
												placeholder="请选择"
												v-model="search.stockId"
											>
												<el-option
													:key="item.id"
													:label="item.name"
													:value="item.id"
													v-for="item in warehouseList"
												></el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<!-- <el-col :span="4">
										<el-form-item
											class="Iisshow"
											label="库存天数"
										>
											<el-input
												class="f-12"
												onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
												placeholder="请输入天数"
												v-model.number="
													search.stockDays
												"
											></el-input>
											<div
												:data-clipboard-text="
													search.stockDays
												"
												@click="saleOrderCopy"
												class="copyBtn"
											>
												<i
													class="el-icon-document-copy"
												/>
											</div>
										</el-form-item>
									</el-col> -->
									<!-- <el-col :span="4">
										<el-form-item label="供应商">
											<el-select
												clearable
												filterable
												placeholder="请选择"
												v-model="search.supplierId"
											>
												<el-option
													:key="item.code"
													:label="item.name"
													:value="item.code"
													class="f-12"
													v-for="item in supplierlist"
												></el-option>
											</el-select>
										</el-form-item>
									</el-col> -->
									<!-- <el-col :span="4">
										<el-form-item label="供应组织">
											<el-select
												clearable
												filterable
												placeholder="请选择"
												v-model="search.supplyOrgId"
											>
												<el-option
													:key="item.code"
													:label="item.name"
													:value="item.orgCode"
													class="f-12"
													v-for="item in orgIdArr"
												></el-option>
											</el-select>
										</el-form-item>
									</el-col> -->
									<!-- <el-col :span="4">
                    <el-form-item label="客戶">
                      <el-select v-model="search.customerId" placeholder="请选择" filterable clearable>
                        <el-option class="f-12" v-for="item in customelist" :key="item.code" :label="item.name" :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>-->
								</el-row>
							</el-col>
							<el-col :span="4" class="form-row-lastcol">
								<el-row :gutter="2">
									<el-col :span="24">
										<el-form-item class="form-group1">
											<el-button
												size="small"
												:loading="isLoading1"
												@click="accuracy()"
											>
												<span
													v-if="title === '库存校准'"
													>{{ title }}</span
												>
												<span
													class="fade-in"
													v-if="title === '校准中...'"
													>{{ title }}</span
												>
												<span
													class="fade-in"
													v-if="title === '校准成功'"
													>{{ title }}</span
												>
												<span
													class="fade-in"
													v-if="title === '校准失败'"
													>{{ title }}</span
												>
											</el-button>
											<el-button
												size="small"
												@click="resetSearch()"
												>重置</el-button
											>
											<el-button
												@click="searchData"
												size="small"
												type="primary"
												>搜索</el-button
											>
										</el-form-item>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<!-- 列表 -->
				<div class="sale-page-table-body">
					<el-table
						:data="tableData"
						:header-cell-class-name="headerRigthMethod"
						:header-cell-style="headerBg"
						:max-height="heightNum"
						@selection-change="handleSelectionChange"
						border
						class="table-box"
						element-loading-spinner="el-icon-loading"
						element-loading-text="加载中，请稍后..."
						ref="tableInfoRef"
						style="width: 100%; font-size: 12px"
						v-loading="isLoading"
					>
						<el-table-column
							align="center"
							fixed
							type="selection"
							width="40"
						/>
						<el-table-column
							align="left"
							label="物料编码"
							prop="materialNumber"
						/>
						<!-- width="172" -->
						<el-table-column
							align="left"
							label="规格型号(SKU)"
							prop="specification"
						/>
						<!-- width="280" -->
						<el-table-column
							align="left"
							label="物料名称"
							prop="materialName"
						/>
						<!-- width="150" -->

						<el-table-column
							align="left"
							label="仓库"
							prop="stockNumber"
						/>
						<!-- width="130" -->
						<el-table-column
							align="right"
							label="库存量"
							prop="realityQty"
						/>
						<el-table-column
							align="center"
							label="单位"
							prop="materialUnitName"
						/>
						<!-- width="90" -->
						<!-- width="100" -->
						<!-- <el-table-column align="right" label="待出量" prop="waitQty" width="100" />
            <el-table-column align="right" label="可用量" prop="availableQty" width="100" />
            <el-table-column align="left" label="日期" prop="date" width="83" />
            <el-table-column align="right" label="库存天数" prop="stockDays" width="72" /> -->
						<el-table-column
							align="left"
							label="库存组织"
							prop="stockOrgName"
						/>
						<!-- 	width="172" -->
						<!-- <el-table-column
							align="left"
							label="供应商/组织"
							prop="supplierName"
							width="172"
						/> -->
						<!-- <el-table-column
							align="left"
							label="客户"
							prop="customerName"
						/> -->
						<!-- width="120" -->
						<el-table-column
							align="left"
							label="客户仓库"
							prop="customerStockName"
						/>
						<!-- width="120" -->
					</el-table>
				</div>
			</div>
			<!-- 底部 -->
			<div class="sale-page-footer">
				<div class="footer-right">
					<el-pagination
						:currentPage="search.pageNo"
						:page-size="search.pageSize"
						:page-sizes="[50, 100, 150]"
						:total="orderTotal"
						@current-change="handleCurrentChange"
						@size-change="handleSizeChange"
						layout="slot,sizes, total,prev,pager, next,jumper"
						popper-class="每页显示"
					>
						<span class="total-select-item">
							共选中
							<text
								style="
									text-align: center;
									color: #4178d5;
									padding: 0 1px;
								"
							>
								{{
									multipleSelection
										? multipleSelection.length
										: 0
								}} </text
							>行
						</span>
					</el-pagination>
				</div>
				<div class="footer-pagination-total-page">
					<span
						>共{{ Math.ceil(orderTotal / search.pageSize) }}页{{
							orderTotal
						}}{{ search.pageSize }}</span
					>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { mapState } from 'vuex';
import { exporthandel } from '@/utils/pubulic.js';
import { orderCopy, numberRexgu } from '@/utils/takeMethods';
import { ElMessageBox } from 'element-plus';
export default {
	name: 'WarehouseQuerykDetail',
	data() {
		return {
			title: '库存校准',
			isLoading1: false,
			btnType: [
				's-p-t-g1',
				's-p-t-g2',
				's-p-t-g3',
				's-p-t-g4',
				's-p-t-g12',
				'operation',
				'push-down',
				'query',
				'finish',
				'close-case',
				'de-excute-start',
				'de-excute-finish',
				'close',
				'de-close',
				'all-export',
				'dayin',
				'print-aterial-list',
				'print-brower',
			], // 不需要显示的顶部按钮类型
			// 搜索条件
			search: {
				orgId: '', // 组织id
				pageNo: 1, // 页码
				pageSize: 50, // 页数
				productKey: '', // 产品（关键字）：物料表中的->>编码、名称、规格型号
				stockId: '', // 仓库id
				realityQty: '', // 库存量
				stockDays: null, // 库存天数
				customerId: null, // 客户id
				supplierId: null, // 供应商
				supplyOrgId: null,
			},
			multipleSelection: [],
			warehouseList: [], // 仓库数据
			customelist: [], // 客户下拉数据
			supplierlist: [], // 供应商下拉数据
			tableData: [],
			selectItem: 0,
			rowShow: false,
			heightNum: 0,
			orderTotal: 0,
			windowHeight: 0,
			isDown: true,
			isLoading: false,
		};
	},
	computed: {
		...mapState({
			orgId: (state) => (state && state.user ? state.user.orgId : null),
			orgIdArr: (state) => (state ? state.user.orgIdArr : null),
		}),
	},
	activated() {
		// 键盘监听事件
		document.addEventListener('keyup', this.keyupFn, false);
	},
	deactivated() {
		document.removeEventListener('keyup', this.keyupFn, false);
	},
	created() {
		this.customerSel1 = 1;
		this.windowHeight = document.documentElement.clientHeight;
		this.heightNum =
			this.windowHeight - (40 + 30 + 54 + 34 + 34 + 34 + 16 + 16);
		this.search.orgId = this.orgId;
		console.log(this.orgId, '====this.orgId');
		this.Init();
	},

	watch: {
		orgId(val) {
			if (val) {
				this.search = {
					orgId: val, // 组织id
					pageNo: 1, // 页码
					pageSize: 50, // 页数
					productKey: '', // 产品（关键字）：物料表中的->>编码、名称、规格型号
					stockId: '', // 仓库id
					realityQty: '', // 库存量
					stockDays: null, // 库存天数
					customerId: null, // 客户id
					supplierId: null, // 供应商
					supplyOrgId: null,
				};
				this.getwarehouse();
				this.getTimelyInventorydetail();
			}
		},
	},
	methods: {
		accuracy() {
			ElMessageBox.confirm(
				'当前库存较多,如要进行校准,请耐心等待(校准成功后请手动刷新列表)!',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			).then(() => {
				this.isLoading1 = true;
				this.title = '校准中...';
				this.$http
					.post('Public/Calibration', {
						orgId: this.search.orgId,
						materialId: null,
					})
					.then((res) => {
						if (res.status === 200) {
							if (res.isSuccess) {
								setTimeout(() => {
									this.isLoading1 = false;
									this.title = '校准成功';
								}, 3000);
								setTimeout(() => {
									this.isLoading1 = false;
									this.title = '库存校准';
								}, 6500);
							} else {
								setTimeout(() => {
									this.isLoading1 = false;
									this.title = '校准失败';
								}, 3000);
							}
						} else {
							setTimeout(() => {
								this.isLoading1 = false;
								this.title = '校准失败';
							}, 3000);
						}
					});
			});
		},
		keyupFn(e) {
			if (e.keyCode === 13) {
				// enter见搜索
				this.getTimelyInventorydetail();
			}
		},
		// 初始化
		Init() {
			this.getTimelyInventorydetail();
			this.getwarehouse();
			this.getsupplierList();
		},
		resetSearch() {
			this.search = {
				orgId: val, // 组织id
				pageNo: 1, // 页码
				pageSize: 50, // 页数
				productKey: '', // 产品（关键字）：物料表中的->>编码、名称、规格型号
				stockId: '', // 仓库id
				realityQty: '', // 库存量
				stockDays: null, // 库存天数
				customerId: null, // 客户id
				supplierId: null, // 供应商
				supplyOrgId: null,
			};
			this.getTimelyInventorydetail();
		},
		resetSearch() {
			this.search = {
				orgId: this.orgId, // 组织id
				pageNo: 1, // 页码
				pageSize: 50, // 页数
				productKey: '', // 产品（关键字）：物料表中的->>编码、名称、规格型号
				stockId: '', // 仓库id
				beginTime: '', //开始日期
				endTime: '', // 结束日期
			};
			this.getTimelyInventorydetail();
		},
		// 输入 验证
		comInput(val, key) {
			if (val) {
				this.search[key] = numberRexgu(val);
			}
		},
		// 订单号 复制按钮
		saleOrderCopy() {
			orderCopy();
		},
		// 获取客户下拉数据
		getCustomelist() {
			this.$http.get('SysConfig/GetCustomer').then((req) => {
				if (req.status === 200) {
					this.customelist = req.data;
				}
			});
		},
		// 获取仓库
		getwarehouse() {
			// 获取仓库
			if (this.orgId) {
				this.$http
					.get('SysConfig/GetWarehouseByOrg/' + this.orgId)
					.then((req) => {
						if (req.status === 200) {
							this.warehouseList = req.data;
						}
					});
			}
		},
		// 获取供应商-下拉列表
		getsupplierList() {
			this.$http.get('SysConfig/supplier/select').then((r) => {
				if (r.status === 200) {
					this.supplierlist = r.data;
				}
			});
		},
		// 搜索切换高度
		openRow() {
			this.isDown = !this.isDown;
			this.rowShow = !this.rowShow;
			if (this.rowShow) {
				this.heightNum = this.heightNum - 80;
			} else {
				this.heightNum = this.heightNum + 80;
			}
		},
		// 获取及时库存明细
		getTimelyInventorydetail() {
			this.isLoading = true;
			// this.search.realityQty = this.search.realityQty ? parseInt(this.search.realityQty) : null
			this.search.realityQty = this.search.realityQty
				? this.search.realityQty
				: null;
			this.search.stockDays = this.search.stockDays
				? parseInt(this.search.stockDays)
				: null;
			if (this.search.orgId) {
				this.$http.post('Inventory/list', this.search).then((res) => {
					if (res.status === 200) {
						this.tableData = res.data;
						this.orderTotal = res.totalCount;

						this.isLoading = false;
					}
				});
			}
		},
		// 顶部公共按钮操作
		actionhandel(type) {
			if (type === 'daochu') {
				exporthandel('Inventory/Export/Details', this.search);
			}
			if (type === 'dayin') {
				exporthandel('Inventory/Export/Details', this.search);
			}
			if (type === 'refresh') {
				// this.isLoading = true;
				this.search.orgId = this.orgId;
				this.search.pageNo = 1;
				this.getwarehouse();
				this.getTimelyInventorydetail();
			}
		},
		// 搜索事件
		searchData() {
			this.search.pageNo = 1;
			this.getTimelyInventorydetail();
		},
		//控制表头颜色
		headerBg({ row, column, rowIndex, columnIndex }) {
			if (columnIndex === 17 || columnIndex === 18) {
				return `text-align:right!important;`;
			}
		},
		headerRigthMethod({ row, column, rowIndex, columnIndex }) {
			return 'headerRight';
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		handleSizeChange(val) {
			this.search.pageNo = 1;
			this.search.pageSize = val;
			this.Init();
		},
		handleCurrentChange(val) {
			this.search.pageNo = val;
			this.Init();
		},
	},
};
</script>
<style lang="scss" scoped>
@import '@/assets/style/saleOrder/saleOrderCommon.scss';
@import '@/assets/style/saleOrder/orderList.scss';
@import '@/assets/style/saleOrder/common.scss';
.fade-in {
	animation: fadeInAnimation ease 5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
	0% {
		opacity: 0;
		color: #0f73d8;
	}
	25% {
		opacity: 0.25;
		color: #0f73d8;
	}
	50% {
		opacity: 0.5;
		color: #0f73d8;
	}
	75% {
		opacity: 0.75;
		color: #0f73d8;
	}
	100% {
		opacity: 1;
		color: #0f73d8;
	}
}
</style>
