<template>
	<div class="main-container order-mc-bg">
		<div
			class="sale-container"
			:style="{ height: containerHeight + 'px!important' }"
		>
			<toolBtn @actionhandel="actionhandel" :btnType="btnType"></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 label="需求日期">
											<el-date-picker
												class="item-date"
												v-model="needDate"
												format="YYYY-MM-DD"
												value-format="YYYY-MM-DD"
												type="date"
												:clearable="true"
												@change="
													searchCom(
														needDate,
														'needDate',
														'ipt'
													)
												"
												placeholder="年/月/日"
											></el-date-picker>
										</el-form-item>
									</el-col>
									<el-col :span="4">
										<el-form-item
											class="Iisshow"
											label="成品"
										>
											<!-- <el-select
                        v-model="materialId"
                        filterable
                        placeholder="请输入成品规格型号（SKU）"
                        :clearable="true"
                        @change="clearCom(materialId,'materialId')"
                        remote
                        reserve-keyword
                        :remote-method="skuCodeChange"
                      >
                        <el-option
                          class="f_12"
                          v-for="item in statusForm.specificationsList"
                          @click="searchCom(materialId,'materialId')"
                          :key="item.id"
                          :label="item.specifications"
                          :value="item.id"
                        ></el-option>
                      </el-select>-->
											<el-input
												v-model.trim="materialId"
												placeholder="请输入成品规格型号（SKU）"
												class="f_12"
												@keyup.enter="searchList()"
												@input="
													searchCom(
														materialId,
														'materialId',
														'ipt'
													)
												"
											></el-input>
											<div
												:data-clipboard-text="
													materialId
												"
												@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
												v-model.trim="material"
												placeholder="请输入物料编码/名称/规格型号"
												class="f_12"
												@keyup.enter="searchList()"
												@input="
													searchCom(
														material,
														'material',
														'ipt'
													)
												"
											></el-input>
											<div
												:data-clipboard-text="material"
												@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
												v-model="supplierId"
												filterable
												placeholder="请选择供应商"
												:clearable="true"
												@change="
													clearCom(
														supplierId,
														'supplierId'
													)
												"
											>
												<el-option
													class="f_12"
													v-for="item in statusForm.supplys"
													@click="
														searchCom(
															supplierId,
															'supplierId'
														)
													"
													:key="item.id"
													:label="item.name"
													:value="item.id"
												></el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="3">
										<el-form-item>
											<el-checkbox
												v-model="viewWaitNumber"
												@change="
													viewWaitNumberMeth(
														viewWaitNumber,
														'viewWaitNumber'
													)
												"
												>仅显示待通知物料</el-checkbox
											>
										</el-form-item>
									</el-col>
									<el-col :span="3">
										<el-form-item>
											<el-checkbox
												v-model="viewOweNumber"
												@change="
													viewOweNumberMeth(
														viewOweNumber,
														'viewOweNumber'
													)
												"
												>仅显示欠料物料</el-checkbox
											>
										</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"
												@click="resetSearch"
												>重置</el-button
											>
											<el-button
												type="primary"
												size="small"
												@click="searchList"
												>搜索</el-button
											>
										</el-form-item>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<div
					class="sale-page-table-body"
					:style="{ height: heightNum + 'px' }"
				>
					<el-table
						class="table-box"
						:data="tableData"
						border
						ref="fileTable"
						style="width: 100%; font-size: 12px"
						:max-height="heightNum"
						:header-cell-style="headerBg"
						:cell-style="cellColor"
						v-loading="tableLoading"
						@cell-click="getRowCol"
						@sort-change="onSortTime"
						@selection-change="handleSelectionChange"
					>
						<el-table-column
							type="selection"
							align="center"
							width="40"
							fixed
						/>
						<el-table-column
							prop="needDate"
							label="需求日期"
							align="left"
							width="160"
							fixed
						/>
						<el-table-column
							prop="materialNumber"
							label="物料编码"
							align="left"
							width="160"
							fixed
						/>
						<el-table-column
							prop="specification"
							label="规格型号"
							align="left"
							width="160"
						/>
						<el-table-column
							prop="materialName"
							label="物料名称"
							align="left"
							width="160"
							fixed
						/>
						<el-table-column
							prop="materialProperty"
							label="物料属性"
							align="left"
							width="84"
						/>
						<el-table-column
							prop="supplyOrgOrSupplier"
							label="供应组织/供应商"
							align="left"
							width="160"
						/>
						<el-table-column
							prop="toDayNumber"
							label="当日需求"
							sortable="custom"
							align="center"
							width="100"
						>
							<template #default="scope">
								<div
									style="color: #4178d5"
									@click="
										openDemand(
											scope.row.materialId,
											'false',
											'当日需求',
											scope.row.needDate
										)
									"
									class="hover-line"
								>
									{{
										scope.row.toDayNumber
											? scope.row.toDayNumber
											: 0
									}}
								</div>
							</template>
						</el-table-column>
						<el-table-column
							prop="allNumber"
							label="累计需求"
							sortable="custom"
							align="center"
							width="100"
						>
							<template #default="scope">
								<div
									style="color: #4178d5"
									@click="
										openDemand(
											scope.row.materialId,
											'true',
											'累计需求',
											scope.row.needDate
										)
									"
									class="hover-line"
								>
									{{
										scope.row.allNumber
											? scope.row.allNumber
											: 0
									}}
								</div>
							</template>
						</el-table-column>
						<el-table-column
							prop="factoryStockNumber"
							sortable="custom"
							label="工厂库存"
							align="right"
							width="100"
						/>
						<el-table-column
							prop="supplierStockNumber"
							sortable="custom"
							label="供应商库存"
							align="right"
							width="120"
						/>
						<el-table-column
							prop="oweNumber"
							label="欠料数量"
							sortable="custom"
							align="right"
							width="100"
						>
							<template #default="scope">
								<span
									:class="{
										'f-c-r': scope.row.oweNumber > 0,
									}"
									>{{ scope.row.oweNumber }}</span
								>
							</template>
						</el-table-column>
						<el-table-column
							prop="factoryStockStatus"
							label="库存状态(工厂)"
							align="right"
							width="120"
						>
							<template #default="scope">
								<span>{{ scope.row.factoryStockStatus }}%</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="allStockStatus"
							label="库存状态(工厂+供应商)"
							align="right"
							width="150"
						>
							<template #default="scope">
								<span>{{ scope.row.allStockStatus }}%</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="noDeliverNumber"
							sortable="custom"
							label="需求未交"
							align="center"
							width="100"
						>
							<template #default="scope">
								<div
									style="color: #4178d5"
									@click="
										openUnpaidDemand(
											scope.row.materialId,
											'false',
											'需求未交',
											scope.row.needDate
										)
									"
									class="hover-line"
								>
									{{
										scope.row.noDeliverNumber
											? scope.row.noDeliverNumber
											: 0
									}}
								</div>
							</template>
						</el-table-column>
						<el-table-column
							prop="allNoDeliverNumber"
							sortable="custom"
							label="总未交"
							align="center"
							width="100"
						>
							<template #default="scope">
								<div
									style="color: #4178d5"
									@click="
										openUnpaidDemand(
											scope.row.materialId,
											'true',
											'总未交',
											scope.row.needDate
										)
									"
									class="hover-line"
								>
									{{
										scope.row.allNoDeliverNumber
											? scope.row.allNoDeliverNumber
											: 0
									}}
								</div>
							</template>
						</el-table-column>
						<el-table-column
							prop="remarks"
							label="备注"
							align="left"
							width="140"
						>
							<template #header>
								<span
									class="iconfont icon-bianji1 iconfont-mg"
								></span
								>备注
							</template>
							<template #default="scope">
								<span v-if="!scope.row.isRemarks">{{
									scope.row.remark
								}}</span>
								<div
									v-if="scope.row.isRemarks"
									class="el-input click-cell-ipt"
								>
									<input
										:id="'remarks' + scope.$index"
										v-model.lazy="scope.row.remark"
										placeholder=" "
										autocomplete="off"
										class="el-input__inner"
									/>
								</div>
							</template>
						</el-table-column>
						<el-table-column
							prop="waitSendNumber"
							sortable="custom"
							label="待通知数量"
							align="center"
							width="140"
							fixed="right"
						>
							<template #header>
								<span
									class="iconfont icon-bianji1 iconfont-mg"
								></span
								>待通知数量
							</template>
							<template #default="scope">
								<span v-if="!scope.row.isWaitSendNumber">{{
									scope.row.waitSendNumber
								}}</span>
								<div
									v-if="scope.row.isWaitSendNumber"
									class="el-input click-cell-ipt"
								>
									<input
										:id="'waitSendNumber' + scope.$index"
										v-model="scope.row.waitSendNumber"
										autocomplete="off"
										@blur="
											waitSendNumberMethods(
												scope.row.waitSendNumber,
												scope.row.index,
												'waitSendNumber',
												scope.row.precision
											)
										"
										:maxlength="19"
										class="el-input__inner"
									/>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<!-- 底部 -->
				<div class="sale-page-footer">
					<div class="footer-left"></div>
					<div class="footer-right">
						<el-pagination
							:page-sizes="pagingList"
							:page-size="pageSize"
							layout="slot,sizes, total,prev,pager, next,jumper"
							:total="totalItemNumber"
							popper-class="每页显示"
							:pager-count="5"
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
						>
							<span class="total-select-item">
								共选中
								<text
									style="
										text-align: center;
										color: #4178d5;
										padding: 0 1px;
									"
									>{{ selectItem }}</text
								>行
							</span>
						</el-pagination>
					</div>
					<div class="footer-pagination-total-page">
						<span>共{{ totalPageNumber }}页</span>
					</div>
				</div>
				<!-- 需求结果 -->
				<el-dialog
					:title="needQueTitle"
					v-model="dialogVisible"
					width="40%"
				>
					<div class="dialog-top">
						<div style="font-size: 12px">
							<span>物料编码:</span>
							<span>{{ tableInfo.materialNumber }}</span>
						</div>
						<div style="font-size: 12px">
							<span>物料名称:</span>
							<span>{{ tableInfo.materialName }}</span>
						</div>
						<div style="font-size: 12px">
							<span>规格型号:</span>
							<span>{{ tableInfo.specification }}</span>
						</div>
					</div>
					<div class="dialog-table">
						<el-table
							class="table-box"
							:data="tableInfo.details"
							height="300"
							border
							:header-cell-class-name="headerRigthMethod"
						>
							<el-table-column
								prop="saleOrderNo"
								label="上游销售订单"
								width="160"
							/>
							<el-table-column
								prop="specification"
								label="成品规格型号(SKU)"
								width="160"
							/>
							<el-table-column
								prop="sheetType"
								label="单据类型"
								width="80"
							/>
							<el-table-column
								prop="sheetNo"
								label="单据编号"
								width="140"
							/>
							<el-table-column
								prop="planStartDate"
								label="计划开工日期"
								width="100"
							/>
							<el-table-column
								prop="noReceiveNumber"
								label="需求数量"
								width="80"
							/>
						</el-table>
					</div>
					<template #footer>
						<span class="dialog-footer">
							<span
								class="f-12 ext-black-light"
								style="margin-right: 25px"
								>共{{ tableInfo.total }}条</span
							>
							<el-button
								type="primary"
								size="small"
								@click="dialogVisible = false"
								>确定</el-button
							>
						</span>
					</template>
				</el-dialog>
				<!-- 未交结果 -->
				<el-dialog
					:title="UnpaidQueTitle"
					v-model="dialogUnVisible"
					width="40%"
				>
					<div class="dialog-top">
						<div style="font-size: 12px">
							<span>物料编码:</span>
							<span>{{ tableInfoUn.materialNumber }}</span>
						</div>
						<div style="font-size: 12px">
							<span>物料名称:</span>
							<span>{{ tableInfoUn.materialName }}</span>
						</div>
						<div style="font-size: 12px">
							<span>规格型号:</span>
							<span>{{ tableInfoUn.specification }}</span>
						</div>
					</div>
					<div class="dialog-table">
						<el-table
							class="table-box"
							:data="tableInfoUn.details"
							height="300"
							border
							:header-cell-class-name="headerRigthMethod"
						>
							<el-table-column
								prop="sheetType"
								label="单据类型"
								width="100"
							/>
							<el-table-column
								prop="sheetNo"
								label="单据编码"
								width="140"
							/>
							<el-table-column
								prop="purchaseDate"
								label="下单日期"
								width="120"
							/>
							<el-table-column
								prop="expectDate"
								label="期望交期"
								width="120"
							/>
							<el-table-column
								prop="orgOrSupplier"
								label="供应组织/供应商"
								width="180"
							/>
							<el-table-column
								prop="noDeliverNumber"
								label="未交数量"
								width="80"
							/>
						</el-table>
					</div>
					<template #footer>
						<span class="dialog-footer">
							<span
								class="f-12 ext-black-light"
								style="margin-right: 25px"
								>共{{ tableInfoUn.total }}条</span
							>
							<el-button
								type="primary"
								size="small"
								@click="dialogUnVisible = false"
								>确定</el-button
							>
						</span>
					</template>
				</el-dialog>
			</div>
		</div>
	</div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import { getNowTime, getStatusType, exporthandel } from '@/utils/pubulic.js';
import { orderCopy } from '@/utils/takeMethods';
export default {
	name: 'SupplyPlay',
	data() {
		return {
			recordIndex: '',
			statusForm: {
				specificationsList: [], // 成品
				supplys: [], // 供应商
			},
			needQueTitle: '', // 需求标题
			UnpaidQueTitle: '', // 未交标题
			dialogVisible: false, // 需求操作弹框显示
			dialogUnVisible: false, // 未交
			needDate: '', // 需求日期
			materialId: '', // 成品
			material: '', // 物料
			supplierId: '', // 供应商
			viewWaitNumber: false, // 待采购
			viewOweNumber: false, // 欠采购
			search: {
				// 列表请求参数
				pageNo: 1,
				pageSize: 50,
				orgId:
					this.$store.state &&
					this.$store.state.org &&
					this.$store.state.org.orgId === ''
						? this.orgIdArr[0].id
						: this.$store.state.org.orgId,
				ids: [], // 勾选刷新时传的id
			},
			pageSize: 50, // 页数
			containerHeight: '', // body容器高度
			tableLoading: false, // 加载
			pagingSaleNumber: '', // 调出数量
			pagingList: [50, 100, 150], // 底部分页
			totalItemNumber: 0,
			totalPageNumber: 0,
			selectItem: 0, // 共选择的条目数
			tableData: [], // 表格数据
			heightNum: 0, // 搜索高度
			windowHeight: 0, // 屏幕高度
			multipleSelection: [], // 选择的条目
			tableInfo: [], // 需求结果
			tableInfoUn: [], // 未交结果
			actionType: '', // 操作类型
			btnType: [
				'add',
				'push-order',
				'out-export',
				'global-refresh',
				'tick-refresh',
				'refresh',
				'copy',
				'submit',
				'revoke',
				'audit',
				'de-approval',
				'delete',
				'push-down',
				'operation',
				'query',
				'save',
				'split-order',
				'print-aterial-list',
				'finish',
				'close-case',
				'de-excute-start',
				'de-excute-finish',
				'de-close',
				'close',
			], // 禁用按钮
		};
	},
	methods: {
		getRowCol(row, column, cell) {
			let _that = this;
			if (_that.recordIndex != '' || _that.recordIndex == '0') {
				this.tableData[_that.recordIndex].isRemarks = false;
				this.tableData[_that.recordIndex].isWaitSendNumber = false;
			}
			switch (column.label) {
				case '备注':
					row.isRemarks = true;
					_that.recordIndex = row.index;
					break;
				case '待通知数量':
					row.isWaitSendNumber = true;
					_that.recordIndex = row.index;
					break;
			}
		},
		viewWaitNumberMeth(val, key) {
			if (val) {
				this.search[key] = val;
			} else {
				delete this.search[key];
			}
			this.getList(this.search);
		},
		viewOweNumberMeth(val, key) {
			if (val) {
				this.search[key] = val;
			} else {
				delete this.search[key];
			}
			this.getList(this.search);
		},
		waitSendNumberMethods(val, index, key, precision) {
			if (val) {
				if (precision == 0 || precision == null) {
					this.tableData[index][key] =
						val.toString().replace(/\D/g, '') * 1;
				} else {
					let numD = '';
					let count = '\\d';
					for (let ind = 0; ind < precision; ind++) {
						numD = numD + count;
					}
					let reg = '/^(-)*(\\d+)\\.(' + numD + ').*$/';
					this.tableData[index][key] =
						val
							.toString()
							.replace(/[^\d^\\.]+/g, '')
							.replace('.', '$#$')
							.replace(/\./g, '')
							.replace('$#$', '.')
							.replace(eval(reg), '$1$2.$3') * 1;
				}
			}
		},
		onSortTime(column) {
			if (column.order == 'ascending') {
				// 升
				this.tableData.sort(this.compare(column.prop, 'asc'));
			} else if (column.order == 'descending') {
				// 降
				this.tableData.sort(this.compare(column.prop, 'des'));
			} else {
				this.tableData.sort(
					this.compare('needDate', 'other', 'materialNumber')
				);
			}
		},
		compare(key, type, keyT) {
			if (type === 'asc') {
				return function (a, b) {
					let valO = a[key];
					let valT = b[key];
					return valO - valT;
				};
			} else if (type === 'des') {
				return function (a, b) {
					let valO = a[key];
					let valT = b[key];
					return valT - valO;
				};
			} else {
				return function (a, b) {
					let valO = a[key];
					let valT = b[key];
					return valO.replace(/-/g, '') - valT.replace(/-/g, '');
				};
			}
		},
		actionhandel(type) {
			// 顶部公共按钮操作
			this.actionType = type;
			if (this.multipleSelection && this.multipleSelection.length > 0) {
				let ids = [
					...new Set(
						this.multipleSelection.map((it) => {
							return it.materialId;
						})
					),
				];
				this.search.ids = ids;
			} else {
				this.search.ids = [];
				if (type === 'tick-refresh') {
					this.$message.error({
						message: '请先勾选!',
						showClose: true,
					});
				}
			}
			// 下单
			if (type === 'push-order') {
				if (this.multipleSelection.length > 0) {
					let ifMaterialType = this.multipleSelection.filter(
						(it) => it.materialProperty == '自制'
					);
					let ifNumberNull = this.multipleSelection.filter((it) =>
						!it.waitSendNumber ? it : false
					);
					if (ifMaterialType.length == 0) {
						if (ifNumberNull.length == 0) {
							let tempList = this.multipleSelection.filter(
								(it) => it.waitSendNumber == 0
							);
							let str = '';
							if (tempList.length > 0) {
								tempList.forEach((element, index) => {
									index < tempList.length - 1
										? (str += element.materialNumber + '、')
										: (str += element.materialNumber);
								});
								this.$message.error({
									message:
										'物料：' + str + ',下单数量必须大于0!',
									showClose: true,
								});
							} else {
								let query = {
									orgId:
										this.$store.state &&
										this.$store.state.org
											? this.$store.state.org.orgId
											: null,
									details: this.multipleSelection,
								};
								this.$http
									.post('EveryDayMaterial/Order', query)
									.then((r) => {
										if (r.status === 200) {
											if (r.message === 'Success') {
												this.$message.success({
													message: '下单成功!',
													showClose: true,
												});
											}
										}
									});
							}
						} else {
							this.$message.error({
								message: '下单数量不能为空!',
								showClose: true,
							});
						}
					} else {
						this.$message.error({
							message: '下单物料属性不能为自制',
							showClose: true,
						});
					}
				} else {
					this.$message.error({
						message: '请先选择要下单的物料',
						showClose: true,
					});
				}
			}
			if (type === 'out-export') {
				// 导出
				exporthandel('EveryDayMaterial/Export', this.search);
			}
			if (type === 'global-refresh') {
				// 全局刷新
				this.$http.get('EveryDayMaterial/Refresh').then((r) => {
					if (r.status === 200) {
						if (r.success == true) {
							this.$message.success({
								message: r.message,
								showClose: true,
							});
							this.getList(this.search);
						} else {
							this.$message.error({
								message: r.message,
								showClose: true,
							});
						}
					}
				});
			}
			if (type === 'tick-refresh') {
				// 勾选刷新
				if (
					this.multipleSelection &&
					this.multipleSelection.length > 0
				) {
					this.getList(this.search, 'tick-refresh');
				}
			}
		},
		saleNum(index, val, key) {
			//  输入整数
			if (val) {
				this.tableData[index][key] = val
					.toString()
					.replace(/[^\d]/g, '')
					.replace(/(^\s*)|(\s*$)/g, '');
			}
		},
		toolarFn(path, newArry, detailsIds, type) {
			// 顶部操作方法
			let formdata = detailsIds ? { ids: detailsIds } : { ids: newArry };
			this.$http.post(path, formdata).then((res) => {
				if (res.status === 200) {
					this.getList(this.search);
				}
			});
		},
		headerBg({ columnIndex }) {
			// 表头居右
			if (columnIndex === 30) {
				return `text-align:right!important;`;
			}
		},
		headerRigthMethod({ row, column, rowIndex, columnIndex }) {
			return 'headerRight';
		},
		handleSelectionChange(val) {
			// 表格选中条目发生改变
			this.selectItem = val.length;
			this.multipleSelection = val;
		},
		handleSizeChange(val) {
			// 每页条数
			this.pageSize = val;
			this.totalPageNumber = Math.ceil(
				this.totalItemNumber / this.pageSize
			);
			this.getList(this.search);
		},
		handleCurrentChange(val) {
			// 分页当前页切换
			this.search.pageNo = val;
			this.getList(this.search);
		},
		getList(search, type) {
			// 列表请求
			this.tableLoading = true;
			// if (!this.search.needDate) {
			//   this.search.needDate = getNowTime()
			// }
			this.$http
				.post('EveryDayMaterial/EveryDayMaterialQuery', search)
				.then((req) => {
					if (req.status == 200) {
						this.tableLoading = false;
						this.tableData = req.data;
						this.tableData.forEach((el, ind) => {
							el.isRemarks = false;
							el.isWaitSendNumber = false;
						});
						this.totalItemNumber = req.totalCount;
						this.totalPageNumber = Math.ceil(
							this.totalItemNumber / this.pageSize
						);
						if (type === 'tick-refresh') {
							this.$message.success({
								message: '勾选数据已更新!',
								showClose: true,
							});
						}
					}
				});
		},
		// 订单号 复制按钮
		saleOrderCopy() {
			orderCopy();
		},
		searchList() {
			// 搜索
			this.getList(this.search);
		},
		searchCom(val, key, type, e) {
			// 搜索公共方法
			if (type === 'ipt') {
				if (val) {
					this.search[key] = val;
				} else {
					delete this.search[key];
				}
			} else {
				this.search[key] = val;
			}
			// if(key === 'needDate'){
			//   console.log('change',val)
			//   if(!val){
			//     this.search.needDate = ''
			//   }
			// }
			if (key !== 'material' && key !== 'materialId') {
				this.getList(this.search);
			}
		},
		clearCom(val, key) {
			// 删除的公共方法
			if (!val) {
				delete this.search[key];
				// this.getList(this.search)
			}
		},
		Init() {
			this.windowHeight = document.documentElement.clientHeight; // 计算表格高度和底部位置
			this.heightNum = this.windowHeight - 258; // 计算表格高度
			this.containerHeight = this.windowHeight - 102; // 计算容器的高度
			// this.needDate = getNowTime()

			if (this.supplierSelect && this.supplierSelect.length > 0) {
				this.statusForm.supplys = JSON.parse(
					JSON.stringify(this.supplierSelect)
				);
			} else {
				this.$http
					.showLoading(false)
					.get('SysConfig/supplier/select')
					.then((r) => {
						if (r.status == 200) {
							this.setSupplierSelect(r.data);
							this.statusForm.supplys = r.data;
						}
					});
			}
			this.getList(this.search); // 获取列表
		},
		resetSearch() {
			let arr = [
				'needDate',
				'materialId',
				'material',
				'supplierId',
				'viewWaitNumber',
				'viewOweNumber',
			];
			for (let index = 0; index < arr.length; index++) {
				if (
					arr[index] == 'viewWaitNumber' ||
					arr[index] == 'viewOweNumber'
				) {
					this[arr[index]] = false;
				} else if (arr[index] == 'needDate') {
					this[arr[index]] = getNowTime();
				} else {
					this[arr[index]] = '';
				}
			}
			this.search = {
				pageNo: this.pageNo,
				pageSize: this.pageSize,
				orgId:
					this.$store.state && this.$store.state.org
						? this.$store.state.org.orgId
						: null,
			};
			this.getList(this.search);
		},
		cellColor({ row, column, rowIndex, columnIndex }) {
			row.index = rowIndex;
			column.index = columnIndex;
			if (columnIndex == 12) {
				if (row.factoryStockStatus <= 100) {
					return 'color: #fff;background-color: #F33B3B;';
				}
				if (
					row.factoryStockStatus <= 150 &&
					row.factoryStockStatus > 100
				) {
					return 'color: #fff;background-color: #77CB44;';
				}
				if (row.factoryStockStatus > 150) {
					return 'color: #fff;background-color: #A0A0A0;';
				}
			}
			if (columnIndex == 13) {
				if (row.allStockStatus <= 100) {
					return 'color: #fff;background-color: #F33B3B;';
				}
				if (row.allStockStatus <= 150 && row.allStockStatus > 100) {
					return 'color: #fff;background-color: #77CB44;';
				}
				if (row.allStockStatus > 150) {
					return 'color: #fff;background-color: #A0A0A0;';
				}
			}
		},
		openDemand(id, isAll, val, date) {
			// 需求
			this.dialogVisible = true;
			this.needQueTitle = val;
			this.$http
				.post('EveryDayMaterial/NeedQuery', {
					materialId: id,
					isAll: isAll,
					orgId:
						this.$store.state && this.$store.state.org
							? this.$store.state.org.orgId
							: null,
					needDate: date,
				})
				.then((r) => {
					if (r.status === 200) {
						this.tableInfo = r.data;
					}
				});
		},
		openUnpaidDemand(id, isAll, val, date) {
			// 未交
			this.dialogUnVisible = true;
			this.UnpaidQueTitle = val;
			this.$http
				.post('EveryDayMaterial/NoDeliverQuery', {
					materialId: id,
					isAll: isAll,
					orgId:
						this.$store.state && this.$store.state.org
							? this.$store.state.org.orgId
							: null,
					needDate: date,
				})
				.then((r) => {
					if (r.status === 200) {
						this.tableInfoUn = r.data;
					}
				});
		},
		async backMaterSkuMethods(val, key, id) {
			// 匹配物料sku的方法
			return this.$http
				.showLoading(false)
				.post('SysConfig/GetMaterial', {
					name: val,
					file: key,
					orgId: id,
					isProduct: true,
				})
				.then((res) => {
					if (res.status === 200) {
						return res.data;
					} else {
						return [];
					}
				});
		},
		async skuCodeChange(val) {
			// 获取型号SKU信息
			if (val) {
				this.statusForm.specificationsList =
					await this.backMaterSkuMethods(
						val,
						'Specifications',
						this.$store.state && this.$store.state.org
							? this.$store.state.org.orgId
							: null
					);
			} else {
				this.statusForm.specificationsList = [];
			}
		},
		...mapActions({
			setSupplierSelect: 'storeData/setSupplierSelect',
		}),
	},
	computed: {
		...mapState({
			orgIdArr: (state) => (state ? state.user.orgIdArr : null),
			getDeptId: (state) => (state ? state.org.orgId : null),
			supplierSelect: (state) => state.storeData.supplierSelect,
		}),
		orgIdChange() {
			// 监听ID
			return this.$store.state && this.$store.state.org
				? this.$store.state.org.orgId
				: null;
		},
	},
	created: function () {
		this.Init();
	},
	activated() {
		this.$refs.fileTable.clearSelection();
	},

	watch: {
		orgIdChange: function () {
			// 监听组织
			this.search.orgId =
				this.$store.state && this.$store.state.org
					? this.$store.state.org.orgId
					: null;
			// if (!this.search.orgId) {
			// 	return;
			// }
			this.getList(this.search);
		},
	},
};
</script>
<style lang="scss" scoped>
@import '@/assets/style/saleOrder/saleOrderCommon.scss';
@import '@/assets/style/saleOrder/orderList.scss';
@import '@/assets/style/211/playCom.scss';
@import '@/assets/style/211/play.scss';
@import '@/assets/style/saleOrder/common.scss';
</style>
