<template>
	<div class="main-container order-mc-bg">
		<div
			class="sale-container"
			:style="{ height: containerHeight + 'px!important' }"
		>
			<toolBtn
				@actionhandel="actionhandel"
				:btnType="btnType"
				:isDisable="isDisable"
			></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-select
												v-model="stockId"
												filterable
												placeholder="请选择仓库"
												:clearable="true"
												@change="
													clearCom(stockId, 'stockId')
												"
											>
												<el-option
													class="f_12"
													v-for="item in statusForm.stocks ||
													[]"
													@click="
														searchCom(
															stockId,
															'stockId'
														)
													"
													:key="item.id"
													:label="item.name"
													:value="item.id"
												></el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="4">
										<el-form-item label="下单客户">
											<el-select
												v-model="customerId"
												filterable
												placeholder="请选择客户"
												:clearable="true"
												@change="
													clearCom(
														customerId,
														'customerId'
													)
												"
											>
												<el-option
													class="f_12"
													v-for="item in statusForm.customers"
													@click="
														searchCom(
															customerId,
															'customerId'
														)
													"
													:key="item.id"
													:label="item.name"
													:value="item.id"
												></el-option>
											</el-select>
										</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="
													searchComS(
														material,
														'material',
														'ipt'
													)
												"
												@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="12"></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"
						@sort-change="onSortTime"
						@selection-change="handleSelectionChange"
						@cell-click="getRowCol"
						:row-key="getRowKeys"
					>
						<el-table-column
							type="selection"
							align="right"
							:reserve-selection="true"
							width="40"
							fixed
						/>
						<el-table-column
							prop="materialNumber"
							label="物料编码"
							align="left"
							width="150"
							fixed
							class="Iisshow"
						>
							<template #default="scope" class="Iisshow">
								<span>{{ scope.row.materialNumber }}</span>
								<div
									:data-clipboard-text="
										scope.row.materialNumber
									"
									@click="saleOrderCopy"
									class="copyBtn copyBtnS"
								>
									<i class="el-icon-document-copy" />
								</div>
							</template>
						</el-table-column>
						<el-table-column
							prop="specifications"
							label="规格型号"
							align="left"
							width="280"
							fixed
						/>
						<el-table-column
							prop="materialName"
							label="物料名称"
							align="left"
							width="150"
							fixed
						/>
						<el-table-column
							prop="orderDate"
							label="应下单日期"
							align="left"
							width="83"
							fixed="left"
						/>
						<el-table-column
							prop="stockName"
							label="仓库"
							align="left"
							width="120"
						/>
						<el-table-column
							prop="is211"
							label="是否211"
							align="center"
							width="72"
						>
							<template #default="scope">
								<span>{{
									scope.row.is211 === true ? '是' : '否'
								}}</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="supplyChain"
							label="供应链"
							align="center"
							width="72"
						/>
						<el-table-column
							prop="saleDay"
							label="平均日销"
							align="right"
							sortable="custom"
							width="96"
						/>
						<el-table-column
							prop="replenDate"
							label="下次补货日期"
							align="left"
							width="100"
						/>
						<el-table-column
							prop="logistics"
							label="物流周期"
							align="right"
							width="83"
						/>
						<el-table-column
							prop="stockQ"
							label="安全备货期"
							align="right"
							width="83"
						/>
						<el-table-column
							prop="realStock"
							label="实际库存"
							sortable="custom"
							align="right"
							width="100"
						/>
						<el-table-column
							prop="otherStock"
							label="其它仓库存"
							sortable="custom"
							align="right"
							width="110"
						/>
						<el-table-column
							prop="readyStock"
							label="应备库存"
							sortable="custom"
							align="right"
							width="100"
						/>
						<el-table-column
							prop="stockState"
							label="库存状态"
							sortable="custom"
							align="center"
							width="100"
						>
							<template #default="scope">
								<span>{{ scope.row.stockState + '%' }}</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="outDate"
							label="断货预警日期"
							align="right"
							width="120"
						/>
						<el-table-column
							prop="afloatQty"
							label="在途"
							sortable="custom"
							align="right"
							width="100"
						/>
						<el-table-column
							prop="cofapaQty"
							label="可发"
							sortable="custom"
							align="right"
							width="100"
						/>
						<el-table-column
							prop="unpaidQty"
							label="未交"
							sortable="custom"
							align="right"
							width="100"
						/>
						<el-table-column
							prop="shouldQty"
							label="应发货"
							sortable="custom"
							align="right"
							width="100"
						/>
						<el-table-column
							prop="customerName"
							label="默认下单客户"
							align="left"
							width="172"
						/>
						<!-- :id="'number'+scope.$index" -->
						<el-table-column
							prop="number"
							label="应下单数量"
							sortable="custom"
							align="right"
							width="140"
							fixed="right"
						>
							<template #header>
								<span
									class="iconfont icon-bianji1 iconfont-mg"
								></span
								>应下单数量
							</template>
							<template #default="scope">
								<span v-if="!scope.row.isNumber">{{
									scope.row.number
								}}</span>
								<div
									v-if="scope.row.isNumber"
									class="el-input click-cell-ipt"
								>
									<input
										:id="'number' + scope.$index"
										:ref="'number' + scope.$index"
										autocomplete="off"
										@blur="
											saleNum(
												scope.$index,
												'number',
												scope.row.precision,
												scope.row,
												scope.row.number
											)
										"
										v-model.lazy="scope.row.number"
										:maxlength="19"
										class="el-input__inner overflow"
									/>
								</div>
							</template>
						</el-table-column>
						<el-table-column
							prop="waitSendNumber"
							label="趋势图"
							align="center"
							width="200"
							fixed="center"
						>
							<template #default="scope">
								<span
									class="iconfont icon-zhexiantu icon-zxt-sty"
									style="color: "
									@click="openEcharts(scope.row)"
								></span>
							</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="search.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>
				<!-- eharts -->
				<el-dialog
					:title="'产品趋势图: ' + titleSku"
					v-model="dialogVisible"
					width="40%"
				>
					<div class="dialog-table">
						<div id="main" />
					</div>
					<template #footer>
						<span class="dialog-footer">
							<el-button
								type="primary"
								size="small"
								@click="downloadImpByChart('main')"
								>另存为图片</el-button
							>
						</span>
					</template>
				</el-dialog>
				<!-- 下单表 -->
				<el-dialog v-model="dialogDownVisible" width="34%">
					<div class="dialog-header">
						<span>{{ '下单表' }}</span>
					</div>
					<div class="dialog-table">
						<el-table
							class="table-box"
							:data="pushDownOrder.details"
							height="300"
							border
							:cell-style="cellStyle"
							:header-cell-class-name="headerRigthMethod"
						>
							<el-table-column
								label="序号"
								type="index"
								align="center"
								width="60"
							>
								<template #default="scope">
									<span>{{ scope.$index + 1 }}</span>
								</template>
							</el-table-column>
							<el-table-column
								prop="specifications"
								label="规格型号(SKU)"
								width="200"
							/>
							<el-table-column
								prop="number"
								label="下单数量"
								width="80"
								align="center"
							/>
							<el-table-column
								prop="remark"
								label="备注"
								width="210"
							>
								<template #default="scope">
									<el-input
										v-model.trim="scope.row.remark"
										:maxlength="2000"
									></el-input>
								</template>
							</el-table-column>
							<el-table-column
								label="操作"
								width="60"
								align="center"
							>
								<template #default="scope">
									<span
										class="iconfont icon-shanchu"
										@click="deleteRow(scope.row)"
									></span>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<template #footer>
						<span class="dialog-footer">
							<el-button
								type="primary"
								size="small"
								@click="dialogDownVisible = false"
								>取消</el-button
							>
							<el-button
								type="primary"
								size="small"
								@click="sureDownOrder"
								>确定下单</el-button
							>
						</span>
					</template>
				</el-dialog>
				<!-- 下单结果 -->
				<el-dialog
					title="下单结果"
					v-model="dialogVisibleDwon"
					width="40%"
				>
					<div class="sale-page-table-body" id="tableInfo-table">
						<el-table
							class="table-box"
							:data="tableInfo"
							height="300"
							border
							:header-cell-class-name="headerRigthMethod"
						>
							<el-table-column
								prop="specifications"
								label="SKU"
								width="150"
							></el-table-column>
							<el-table-column
								prop="stockName"
								label="仓库"
								width="250"
							></el-table-column>
							<el-table-column
								prop="orderNo"
								label="销售订单号"
								width="150"
							></el-table-column>
							<el-table-column
								prop="isSuccess"
								label="状态"
								width="100"
							>
								<template #default="scope">
									<span>{{
										scope.row.isSuccess === true
											? '成功'
											: '失败'
									}}</span>
								</template>
							</el-table-column>
							<el-table-column
								prop="msg"
								label="失败原因"
								width="130"
							></el-table-column>
						</el-table>
					</div>
					<template #footer>
						<span class="dialog-footer">
							<el-button
								type="primary"
								size="small"
								@click="
									handelhtmlToExcel(
										'tableInfo-table',
										'下单结果'
									);
									dialogVisibleDwon = false;
								"
								>导 出</el-button
							>
							<el-button
								type="primary"
								size="small"
								@click="dialogVisibleDwon = false"
								>关闭</el-button
							>
						</span>
					</template>
				</el-dialog>
			</div>
		</div>
	</div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import { nextTick } from 'vue';
import { exporthandel, htmlToExcel } from '@/utils/pubulic.js';
import { orderCopy } from '@/utils/takeMethods';
import * as echarts from 'echarts';
var chartDom;
export default {
	name: 'SaleIndex',
	data() {
		return {
			recordIndex: '',
			timer: null,
			select_Id: [], //表格select复选框选中的id
			isDisable: false,
			stockId: '', // 仓库
			customerId: '', // 下单客户
			material: '', // 成品
			statusForm: {
				stocks: [], // 仓库
				customers: [], // 下单客户
				matterCodelist: [], // 产品
			},
			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,
			},
			pushDownOrder: {
				orgId: '', // 当前组织
				details: [],
			},
			tableInfo: [], // 下单结果
			dialogVisibleDwon: false, // 下单结果
			dialogVisible: false, // 操作弹框显示
			dialogDownVisible: false, // 下单
			titleSku: 'ORICO-PHM-25-BK-EP',
			containerHeight: '', // body容器高度
			tableLoading: false, // 加载
			pagingSaleNumber: '', // 调出数量
			pagingList: [50, 100, 150], // 底部分页
			totalItemNumber: 0,
			totalPageNumber: 0,
			selectItem: 0, // 共选择的条目数
			tableData: [], // 表格数据
			heightNum: 0, // 搜索高度
			windowHeight: 0, // 屏幕高度
			multipleSelection: [], // 选择的条目
			selectRowIndex: '', // 当前选择行的index
			actionType: '', // 操作类型
			btnType: [
				'add',
				'push-order',
				'out-export',
				'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') {
				_that.tableData[_that.recordIndex].isNumber = false;
			}
			switch (column.label) {
				case '应下单数量':
					row.isNumber = true;
					_that.recordIndex = row.index;
					break;
			}
			this.$nextTick(() => {
				let strArr = ['应下单数量'];
				if (strArr.indexOf(column.label) !== -1) {
					// document.getElementById(column.property + row.index).focus()
					this.$refs[column.property + row.index].focus();
				}
			});
		},
		//记录每行的key值
		getRowKeys(row) {
			return row.id;
		},
		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('readyStock'));
			}
		},
		compare(key, type) {
			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 valT - valO;
				};
			}
		},
		// 删除行
		deleteRow(row) {
			this.pushDownOrder.details.splice(row.index, 1);
		},
		//  输入整数 1 向上 2向下 3四舍五入
		saleNum(index, key, precision, row, value) {
			let _value = document.getElementById(key + index).value;
			document.getElementById(key + index).value = _value;
			this.tableData[index][key] = _value;
			if (this.tableData[index][key]) {
				if (precision == 0 || precision == null) {
					this.tableData[index][key] = this.tableData[index][key]
						.toString()
						.replace(/\D/g, '');
					document.getElementById(key + index).value =
						this.tableData[index][key];
				} else {
					let numD = '';
					let count = '\\d';
					for (let ind = 0; ind < precision; ind++) {
						numD = numD + count;
					}
					let reg = '/^(-)*(\\d+)\\.(' + numD + ').*$/';
					this.tableData[index][key] = this.tableData[index][key]
						.toString()
						.replace(/[^\d^\\.]+/g, '')
						.replace('.', '$#$')
						.replace(/\./g, '')
						.replace('$#$', '.')
						.replace(eval(reg), '$1$2.$3');
					document.getElementById(key + index).value =
						this.tableData[index][key];
				}
			}
			this.tableData[index][key] = this.valueRemoveZero(row, key);
			document.getElementById(key + index).value =
				this.tableData[index][key];
			this.recordIndex = '';
			this.tableData[index].isNumber = false;
		},
		// 确定下单
		sureDownOrder() {
			this.$http
				.showLoading(false)
				.post('CompleteProduct/Order', this.pushDownOrder)
				.then((r) => {
					if (r.status === 200) {
						this.dialogDownVisible = false;
						this.tableInfo = r.data;
						this.dialogVisibleDwon = true;
						this.multipleSelection = [];
						this.$refs.fileTable.clearSelection();
						this.getList(this.search);
					}
				});
		},
		// 打开Echarts
		openEcharts(row) {
			this.dialogVisible = true;
			let templateDate = [];
			let xAxDate = [];
			let realStock = []; // 实际库存
			let unpaidQty = []; // 未交
			let readyStock = []; // 应备库存
			let query = {
				stockId: row.stockId,
				materialId: row.materialId,
				orgId:
					this.$store.state &&
					this.$store.state.org &&
					this.$store.state.org.orgId === ''
						? 1
						: this.$store.state.org.orgId,
			};
			this.$http.post('CompleteProduct/GetMentchart', query).then((r) => {
				if (r.status === 200) {
					templateDate = r.data;
					nextTick(() => {
						if (
							myChart != null &&
							myChart != '' &&
							myChart != undefined
						) {
							myChart.dispose();
						}
						xAxDate = templateDate.map((it) => it.date);
						realStock = templateDate.map((it) => it.realStock);
						unpaidQty = templateDate.map((it) => it.unpaidQty);
						readyStock = templateDate.map((it) => it.readyStock);
						chartDom = document.getElementById('main');
						var myChart = echarts.init(chartDom);
						var option;
						option = {
							legend: {
								data: [
									{
										name: '实际库存',
										icon: 'circle',
									},
									{
										name: '未交数量',
										icon: 'circle',
									},
									{
										name: '应备库存',
										icon: 'rect',
									},
								],
							},
							xAxis: {
								type: 'category',
								boundaryGap: false,
								data: xAxDate,
							},
							yAxis: {
								type: 'value',
							},
							dataZoom: [
								{
									type: 'inside',
									start: 0,
									end: 20,
								},
								{
									start: 0,
									end: 20,
								},
							],
							series: [
								{
									name: '实际库存',
									type: 'line',
									stack: 'Total',
									areaStyle: {
										color: '#FEF3C8',
									},
									emphasis: {
										focus: 'series',
									},
									itemStyle: {
										normal: {
											color: '#FDC027',
											lineStyle: {
												color: '#FDC027',
											},
										},
									},
									data: realStock,
								},
								{
									name: '未交数量',
									type: 'line',
									stack: 'Total',
									areaStyle: {
										color: '#DEFFF6',
									},
									emphasis: {
										focus: 'series',
									},
									itemStyle: {
										normal: {
											color: '#3AD6AC',
											lineStyle: {
												color: '#3AD6AC',
											},
										},
									},
									data: unpaidQty,
								},
								{
									name: '应备库存',
									type: 'line',
									stack: 'Total',
									emphasis: {
										focus: 'series',
									},
									itemStyle: {
										normal: {
											color: '#FF5363',
											lineStyle: {
												color: '#FF5363',
											},
										},
									},
									data: readyStock,
								},
							],
						};
						option && myChart.setOption(option);
					});
				}
			});
		},
		// 清0
		valueRemoveZero(row, key) {
			if (
				this.tableData[row.index][key]
					.toString()
					.charAt(
						this.tableData[row.index][key].toString().length - 1
					) != '.'
			) {
				return this.tableData[row.index][key] * 1;
			} else {
				return this.tableData[row.index][key];
			}
		},
		downloadImpByChart(chartId) {
			var myChart = echarts.getInstanceByDom(
				document.getElementById(chartId)
			);
			var url = myChart.getConnectedDataURL({
				pixelRatio: 1,
				backgroundColor: '#fff',
				excludeComponents: ['toolbox'],
				type: 'png',
			});
			var $a = document.createElement('a');
			var type = 'png';
			$a.download = '产品趋势图' + '.' + type;
			$a.target = '_blank';
			$a.href = url;
			// Chrome and Firefox
			if (typeof MouseEvent === 'function') {
				var evt = new MouseEvent('click', {
					view: window,
					bubbles: true,
					cancelable: false,
				});
				$a.dispatchEvent(evt);
			}
			// IE
			else {
				var html =
					'' +
					'<body style="margin:0;">' +
					'<img src="' +
					url +
					'" style="max-width:100%;" title="' +
					myChart.getOption().title[0].text +
					'" />' +
					'</body>';
				var tab = window.open();
				tab.document.write(html);
			}
		},
		actionhandel(type) {
			// 顶部公共按钮操作
			this.actionType = type;
			if (this.multipleSelection && this.multipleSelection.length > 0) {
				let ids = [
					...new Set(
						this.multipleSelection.map((it) => {
							return it.id;
						})
					),
				];
				this.search.ids = ids;
			} else {
				this.search.ids = [];
			}
			if (type === 'push-order') {
				// 下单
				if (this.multipleSelection.length > 0) {
					let tempList = this.multipleSelection.filter(
						(it) => it.number == 0
					);
					let str = '';
					if (tempList.length > 0) {
						tempList.forEach((element, index) => {
							index < tempList.length - 1
								? (str += element.specifications + '、')
								: (str += element.specifications);
						});
						this.$message.error({
							message: 'SKU：' + str + ',下单数量必须大于0!',
							showClose: true,
						});
					} else {
						this.pushDownOrder.orgId = '';
						this.pushDownOrder.details = [];
						this.dialogDownVisible = true;
						let useList = [...new Set(this.multipleSelection)];
						this.pushDownOrder.orgId =
							this.$store.state && this.$store.state.org
								? this.$store.state.org.orgId
								: null;
						useList.forEach((el) => {
							this.pushDownOrder.details.push({
								materialId: el.materialId,
								specifications: el.specifications,
								stockId: el.stockId,
								stockType: el.stockType,
								purchasePrice: el.purchasePrice,
								number: el.number,
								remark: '',
							});
						});
					}
				} else {
					this.$message.error({
						message: '请先选择要下单的SKU',
						showClose: true,
					});
				}
			}
			if (type === 'out-export') {
				this.isDisable = true;
				setTimeout(() => {
					this.isDisable = false;
				}, 2000);
				// 导出
				exporthandel('CompleteProduct/Export', this.search);
			}
			if (type === 'refresh') {
				this.isDisable = true;
				setTimeout(() => {
					this.isDisable = false;
				}, 2000);
				// 全局刷新
				this.$http.get('CompleteProduct/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,
							});
						}
					}
				});
			}
		},
		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.select_Id = [];
			if (val) {
				val.forEach((row) => {
					if (row && (row.id || row.id == 0)) {
						this.select_Id.push(row.id);
					}
				});
			}
		},
		handleSizeChange(val) {
			// 每页条数
			this.search.pageSize = val;
			this.totalPageNumber = Math.ceil(
				this.totalItemNumber / this.search.pageSize
			);
			this.getList(this.search);
		},
		handleCurrentChange(val) {
			// 分页当前页切换
			this.search.pageNo = val;
			this.getList(this.search);
		},
		getList(search) {
			// 列表请求
			this.tableLoading = true;
			this.$http
				.post('CompleteProduct/CompleteProductQuery', search)
				.then((req) => {
					if (req.status == 200) {
						this.tableLoading = false;
						this.tableData = req.data;
						this.tableData.forEach((it) => {
							it.isNumber = false;
						});
						this.totalItemNumber = req.totalCount;
						this.totalPageNumber = Math.ceil(
							this.totalItemNumber / this.search.pageSize
						);
					}
				});
		},
		// 订单号 复制按钮
		saleOrderCopy() {
			orderCopy();
		},

		searchList() {
			// 搜索
			this.getList(this.search);
		},

		cellStyle({ row, column, rowIndex, columnIndex }) {
			row.index = rowIndex;
			column.index = columnIndex;
		},
		cellColor({ row, column, rowIndex, columnIndex }) {
			row.index = rowIndex;
			column.index = columnIndex;
			if (columnIndex == 15) {
				if (row.stockState >= 120) {
					return 'color: #fff;background-color:#A0A0A0;';
				}
				if (row.stockState < 120 && row.stockState >= 100) {
					return 'color: #fff;background-color: #77CB44;';
				}
				if (row.stockState < 100 && row.stockState > 0) {
					return 'color: #fff;background-color: #F33B3B;';
				}
				if (row.stockState == 0) {
					return 'color: #fff;background-color: #000;';
				}
			}
		},
		searchCom(val, key, type) {
			// 搜索公共方法
			if (type) {
				if (val) {
					this.search[key] = val;
				} else {
					delete this.search[key];
				}
			} else {
				this.search[key] = val;
			}
		},
		//回车搜索
		searchComS(val, key, type) {
			if (type) {
				if (val) {
					this.search[key] = val;
				} else {
					delete this.search[key];
				}
			} else {
				this.search[key] = val;
			}
			this.getList(this.search);
		},
		clearCom(val, key) {
			// 删除的公共方法
			if (!val) {
				delete this.search[key];
			}
		},
		Init() {
			this.windowHeight = document.documentElement.clientHeight; // 计算表格高度和底部位置
			this.heightNum = this.windowHeight - 258; // 计算表格高度
			this.containerHeight = this.windowHeight - 102; // 计算容器的高度
			this.getList(this.search); // 获取列表
			let vuexKey = ['customer', 'supplierSelect'];
			let setVuexData = ['setCustomer', 'setSupplierSelect'];
			let requestQueryUrl = [
				'SysConfig/GetCustomer',
				'SysConfig/supplier/select',
			];
			let resDataQuery = ['customers', 'supplys'];
			vuexKey.forEach((ele, ind) => {
				if (this[vuexKey[ind]] && this[vuexKey[ind]].length > 0) {
					if (typeof resDataQuery[ind] == 'string') {
						this.statusForm[resDataQuery[ind]] = JSON.parse(
							JSON.stringify(this[vuexKey[ind]])
						);
					} else {
						resDataQuery[ind].forEach((ele, index) => {
							this.statusForm[resDataQuery[ind][index]] =
								JSON.parse(JSON.stringify(this[vuexKey[ind]]));
						});
					}
				} else {
					this.$http.get(requestQueryUrl[ind]).then((r) => {
						if (r.status === 200) {
							if (typeof resDataQuery[ind] == 'string') {
								this.statusForm[resDataQuery[ind]] = r.data;
							} else {
								resDataQuery[ind].forEach((ele, index) => {
									this.statusForm[resDataQuery[ind][index]] =
										r.data;
								});
							}
							this[setVuexData[ind]](
								this.statusForm[resDataQuery[ind]]
							);
						}
					});
				}
			});
			if (this.$store.state && this.$store.state.org.orgId) {
				// 获取仓库
				this.$http
					.get(
						'SysConfig/GetWarehouseByOrg/' +
							this.$store.state.org.orgId
					)
					.then((r) => {
						if (r.status === 200) {
							this.statusForm.stocks = r.data;
						}
					});
			}
		},
		// 操作弹框导出
		handelhtmlToExcel(domid, title) {
			htmlToExcel(domid, title);
		},
		resetSearch() {
			let arr = ['stockId', 'customerId', 'material'];
			for (let index = 0; index < arr.length; index++) {
				this[arr[index]] = '';
			}
			this.search = {
				pageNo: 1,
				pageSize: 50,
				orgId:
					this.$store.state && this.$store.state.org
						? this.$store.state.org.orgId
						: null,
			};
			this.getList(this.search);
		},
		async backMaterSkuMethods(val, key, id) {
			// 匹配物料sku的方法
			return this.$http
				.showLoading(false)
				.post('SysConfig/GetMaterial', {
					name: val,
					file: key,
					orgId: id,
				})
				.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({
			setCustomer: 'storeData/setCustomer',
			setSupplierSelect: 'storeData/setSupplierSelect',
		}),
	},
	computed: {
		...mapState({
			orgIdArr: (state) => (state ? state.user.orgIdArr : null),
			customer: (state) => state.storeData.customer,
			supplierSelect: (state) => state.storeData.supplierSelect,
		}),
		orgIdChange() {
			// 监听ID
			return this.$store.state && this.$store.state.org
				? this.$store.state.org.orgId
				: null;
		},
	},
	activated() {
		this.$refs.fileTable.clearSelection();
	},
	created: function () {
		this.Init();
	},
	watch: {
		select_Id(thenew, theold) {
			// 添加选中的数据信息
			thenew.forEach((itemid) => {
				this.multipleSelection.forEach((item, index) => {
					if (!thenew.includes(item.id)) {
						this.multipleSelection.splice(index, 1);
					}
				});
				this.tableData.forEach((it) => {
					if (itemid === it.id) {
						this.multipleSelection.push(it);
					}
				});
			});
		},
		orgIdChange: function () {
			// 监听组织 获取仓库 + 客户
			this.search.orgId =
				this.$store.state && this.$store.state.org
					? this.$store.state.org.orgId
					: null;
			this.getList(this.search);
			if (
				this.$store.state &&
				this.$store.state.org &&
				this.$store.state.org.orgId
			) {
				this.$http
					.get(
						'SysConfig/GetWarehouseByOrg/' +
							this.$store.state.org.orgId
					)
					.then((r) => {
						if (r.status === 200) {
							this.statusForm.stocks = r.data;
						}
					});
				this.$http.get('SysConfig/GetCustomer').then((r) => {
					if (r.status === 200) {
						this.statusForm.customers = r.data;
					}
				});
			}
		},
	},
};
</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/saleindex.scss';
@import '@/assets/style/saleOrder/common.scss';
</style>
