<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 mate-col-width">
							<el-col :span="20">
								<el-row :gutter="2">
									<el-col :span="4">
										<el-form-item label="物料分类">
											<el-cascader
												:options="bomList"
												:props="{
													expandTrigger: 'hover',
													value: 'id',
													label: 'name',
													children: 'chinds',
													checkStrictly: true,
													emitPath: false,
												}"
												@change="handleChange"
												@remove-tag="clearData"
												clearable
												ref="materialType"
												v-model="search.groupId"
											></el-cascader>
										</el-form-item>
									</el-col>
									<el-col :span="4">
										<el-form-item
											class="Iisshow"
											label="物料"
										>
											<el-input
												:maxlength="255"
												@keyup.enter="
													searchComS(
														material,
														'material'
													)
												"
												class="f-12"
												placeholder="请输入子项物料编码/名称/规格型号"
												v-model.trim="search.product"
											></el-input>
											<div
												:data-clipboard-text="
													search.product
												"
												@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
												@change="supplyChange"
												clearable
												placeholder="请选择"
												v-model="search.supplyChain"
											>
												<el-option
													:key="key + index"
													:label="value"
													:value="key"
													class="f-12"
													v-for="(
														value, key, index
													) in supplyList"
												></el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="4">
										<el-form-item label="是否211">
											<el-select
												@change="is211Change"
												clearable
												filterable
												placeholder="请选择"
												v-model="search.is211"
											>
												<el-option
													:key="index"
													:label="item.name"
													:value="item.id"
													class="f-12"
													v-for="(
														item, index
													) in is211List"
												></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.isDisable"
											>
												<el-option
													label="是"
													:value="true"
													class="f-12"
												></el-option>
												<el-option
													label="否"
													:value="false"
													class="f-12"
												></el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="4">
										<el-form-item label="供应组织">
											<el-select
												@change="orgChange"
												clearable
												placeholder="请选择"
												v-model="search.supplyOrgId"
											>
												<el-option
													:key="index"
													:label="item.name"
													:value="item.id"
													class="f-12"
													v-for="(
														item, index
													) in orgList"
												></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">
											<div
												@click="openRow"
												class="alias-open"
											>
												<span
													:class="[
														isDown
															? 'icon-shuangjiantouzhankai-xia'
															: 'icon-shuangjiantoushouqi-shang',
													]"
													class="iconfont"
												></span>
											</div>
											<el-button
												@click="resetData"
												size="small"
												>重置</el-button
											>
											<el-button
												@click="searchData"
												size="small"
												type="primary"
												>搜索</el-button
											>
										</el-form-item>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
						<el-row
							class="form-row2 mate-col-width mate-lable-padding"
							v-show="rowShow"
						>
							<el-col :span="21">
								<el-row :gutter="2">
									<el-col :span="4">
										<el-form-item label="默认供应商">
											<el-select
												@change="defaultSupplyChange"
												clearable
												placeholder="请选择"
												v-model="search.supplierId"
											>
												<el-option
													:key="index"
													:label="item.name"
													:value="item.id"
													class="f-12"
													v-for="(
														item, index
													) in defaultSupplyList"
												></el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="4">
										<el-form-item
											class="Iisshow"
											label="条码"
										>
											<el-input
												:maxlength="255"
												@keyup.enter="
													searchComS1(
														material,
														'material'
													)
												"
												class="f-12"
												placeholder="请输入条码"
												v-model.trim="search.barCode"
											></el-input>
											<div
												:data-clipboard-text="
													search.barCode
												"
												@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
												:maxlength="255"
												@keyup.enter="
													searchComS2(
														material,
														'material'
													)
												"
												class="f-12"
												placeholder="请输入品牌名称"
												v-model.trim="search.brand"
											></el-input>
											<div
												:data-clipboard-text="
													search.brand
												"
												@click="saleOrderCopy"
												class="copyBtn"
											>
												<i
													class="el-icon-document-copy"
												/>
											</div>
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item label="自定义条件1">
											<CustomCondition
												:getCustomerItem="
													statusForm ? statusForm : {}
												"
												:key="compKey1"
												:reset="reset"
												@result="
													resultCom(
														$event,
														'customerSel1',
														'customerObj1',
														'tempObj1'
													)
												"
											></CustomCondition>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row
									:gutter="2"
									class="form-row2-row2 mate-col-width"
								>
									<!-- <el-col :span="10">
                    <el-form-item label="自定义条件2">
                      <CustomCondition :getCustomerItem="statusForm ? statusForm : {}" :key="compKey2" :reset="reset"
                        @result="resultCom($event, 'customerSel2', 'customerObj2', 'tempObj2')"></CustomCondition>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="自定义条件3">
                      <CustomCondition :getCustomerItem="statusForm ? statusForm : {}" :key="compKey3" :reset="reset"
                        @result="resultCom($event, 'customerSel3', 'customerObj3', 'tempObj3')"></CustomCondition>
                    </el-form-item>
                  </el-col>-->
								</el-row>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<!-- 列表 -->
				<div class="sale-page-table-body">
					<el-table
						:data="tableData"
						:max-height="heightNum"
						:row-style="tableRowClassName"
						@row-dblclick="rowDblclick"
						@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"
							fixed
							label="编码"
							prop="number"
							width="150"
						>
							<template #default="scope">
								<span
									@click="toDetail(scope.row)"
									style="color: #4178d5"
									>{{ scope.row.number }}</span
								>
							</template>
						</el-table-column>
						<el-table-column
							align="left"
							fixed
							label="规格型号"
							prop="specifications"
							width="280"
						></el-table-column>
						<el-table-column
							align="left"
							label="名称"
							prop="name"
							width="100"
						></el-table-column>
						<el-table-column
							align="center"
							label="图片"
							prop="picture"
							width="70"
						>
							<template #default="scope">
								<div class="img-box">
									<el-image
										:src="scope.row.picture"
										style="width: 57px; height: 57px"
										v-if="
											scope.row.picture != '' &&
											scope.row.picture != null
										"
									></el-image>
								</div>
							</template>
						</el-table-column>
						<el-table-column
							align="left"
							label="一级分类"
							prop="groupOne"
							width="150"
						/>
						<el-table-column
							align="left"
							label="二级分类"
							prop="groupTwo"
							width="150"
						/>
						<el-table-column
							align="left"
							label="三级分类"
							prop="groupThree"
							width="150"
						/>
						<!-- <el-table-column align="left" label="四级分类" prop="groupFour" width="150" /> -->
						<el-table-column
							align="center"
							label="单据状态"
							prop="documentStatus"
							width="72"
						>
							<template #default="scope">
								<span v-if="scope.row.documentStatus == 'a'"
									>创建</span
								>
								<span v-if="scope.row.documentStatus == 'b'"
									>审核中</span
								>
								<span v-if="scope.row.documentStatus == 'c'"
									>已审核</span
								>
								<span v-if="scope.row.documentStatus == 'd'"
									>重新审核</span
								>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							label="物料属性"
							prop="materialProperty"
							width="72"
						/>
						<el-table-column
							align="center"
							label="供应链"
							prop="supplyChain"
							width="72"
						/>
						<el-table-column
							align="center"
							label="是否211"
							prop="is211"
							width="72"
						>
							<template #default="scope">
								<span>{{
									scope.row.is211 == true ? '是' : '否'
								}}</span>
							</template>
						</el-table-column>
						<el-table-column
							align="left"
							label="产品定位"
							prop="productLocation"
							width="100"
						></el-table-column>
						<el-table-column
							align="left"
							label="生命周期"
							prop="lifeCycle"
							width="83"
						/>
						<el-table-column
							align="left"
							label="安规"
							prop="safety"
							width="72"
						/>
						<el-table-column
							align="left"
							label="颜色"
							prop="color"
							width="72"
						/>
						<el-table-column
							align="right"
							label="成本"
							prop="cost"
							width="100"
						/>
						<el-table-column
							align="right"
							label="采购价格"
							prop="purchasePrice"
							width="100"
						/>
						<el-table-column
							align="left"
							label="供应组织"
							prop="supplyOrg"
							width="172"
						/>
						<el-table-column
							align="left"
							label="默认供应商"
							prop="supplier"
							width="172"
						></el-table-column>
						<el-table-column
							align="center"
							label="条码"
							prop="barCode"
							width="120"
						></el-table-column>
						<el-table-column
							align="left"
							label="品牌类型"
							prop="brandType"
							width="120"
						></el-table-column>
						<el-table-column
							align="left"
							label="品牌"
							prop="brand"
							width="120"
						></el-table-column>
						<el-table-column
							align="left"
							label="产品（不含颜色）"
							prop="productNoColor"
							width="120"
						></el-table-column>
						<el-table-column
							align="left"
							label="产品（SPU）"
							prop="productSPU"
							width="120"
						></el-table-column>
						<el-table-column
							align="right"
							label="装箱/最小包装"
							prop="minNumber"
							width="100"
						></el-table-column>
						<el-table-column
							align="center"
							label="是否禁用"
							prop="isDisable"
							width="72"
						>
							<template #default="scope">
								<span>{{
									scope.row.isDisable === true ? '是' : '否'
								}}</span>
							</template>
						</el-table-column>
					</el-table>
				</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="total"
							@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;
									"
									>{{ selectionLen }}</text
								>行
							</span>
						</el-pagination>
					</div>
					<div class="footer-pagination-total-page">
						<span>共{{ totalPage }}页</span>
					</div>
				</div>
				<!-- 操作结果 -->
				<el-dialog
					:before-close="beforeClose"
					title="操作结果"
					v-model="dialogVisible"
					width="40%"
				>
					<div class="sale-page-table-body">
						<el-table
							:data="tableInfo"
							:header-cell-class-name="headerRigthMethod"
							border
							class="table-box"
							height="300"
							id="tableInfo-table1"
						>
							<el-table-column
								label="序号"
								prop="date"
								width="50"
							>
								<template #default="scope">
									<span>{{ scope.$index + 1 }}</span>
								</template>
							</el-table-column>
							<el-table-column
								label="物料编码"
								prop="orderNo"
								width="200"
							></el-table-column>
							<el-table-column label="指令" prop="a" width="110">
								<template #default>
									<span>
										{{
											actionType === 'submit'
												? '提交'
												: actionType === 'revoke'
												? '撤销'
												: actionType === 'audit'
												? '审核'
												: actionType === 'de-approval'
												? '反审'
												: actionType === 'delet'
												? '删除'
												: actionType === 'disabled'
												? '禁用'
												: actionType === 'de-disabled'
												? '反禁用'
												: ''
										}}
									</span>
								</template>
							</el-table-column>
							<el-table-column label="结果" width="80">
								<template #default="scope">
									<span
										:style="{
											'txt-Red': scope.row.isSuccess,
										}"
										>{{
											scope.row.isSuccess
												? '成功'
												: '失败'
										}}</span
									>
								</template>
							</el-table-column>
							<el-table-column label="信息" prop="msg">
								<template #default="scope">
									<span class="txt-Red">{{
										scope.row.msg
									}}</span>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<template #footer>
						<span class="dialog-footer">
							<span
								class="f-12 ext-black-light"
								style="margin-right: 25px"
							>
								共{{
									tableInfo && tableInfo.length > 0
										? tableInfo.length
										: 0
								}}条
							</span>
							<el-button
								@click="
									handelhtmlToExcel(
										'tableInfo-table1',
										'操作结果'
									)
								"
								size="small"
								>导 出</el-button
							>
							<el-button
								@click="beforeClose"
								size="small"
								type="primary"
								>关 闭</el-button
							>
						</span>
					</template>
				</el-dialog>
			</div>
		</div>
	</div>
</template>
<script>
import { mapState } from 'vuex';
import { toRaw } from 'vue';
import { orderCopy } from '@/utils/takeMethods';
import {
	getStatusType,
	exporthandel,
	htmlToExcel,
	customChangeMethods,
	resultComMethods,
} from '@/utils/pubulic.js';
import CustomCondition from '@/components/public/CustomCondition.vue';
export default {
	name: 'mateList',
	components: {
		CustomCondition,
	},
	data() {
		return {
			isLoading: false, //表格加载数据
			dialogVisible: false, //操作弹窗
			reset: false,
			// 自定义条件
			statusForm: {
				customCondition: [], //自定义条件集合
				MaterialProperty: [], //物料属性
				productLocation: [], //产品定位
				lifeCycle: [], //生命周期
				brand: [], //品牌类型
				safety: [], //安规
				materialBear: [], //物料承担方
				sendMaterial: [], //发料方式
				color: [], //颜色
				purchasePrice: [], //采购价格
				cost: [], //成本
				productNoColor: [], //产品(不含颜色)
				productSPU: [], //spu
				isDisable: [], //禁用状态
				InventoryType: [], // 存货类别
				documentStatus: [], // 单据状态
				unitlist:
					this.$store.state && this.$store.state.storeData.allUnit
						? this.$store.state.storeData.allUnit
						: [], // 获取计量单位数据
			},
			//条件
			customerSel1: '', //条件
			customerSel2: '',
			customerSel3: '',
			customerObj1: null,
			customerObj2: null,
			customerObj3: null,
			tempObj1: null,
			tempObj2: null,
			tempObj3: null,
			compKey1: 0,
			compKey2: 0,
			compKey3: 0,
			bomList: [], //物料下拉列表
			supplyList: [], //供应链列表
			is211List: [
				{
					id: false,
					name: '否',
				},
				{
					id: true,
					name: '是',
				},
			], //是否211列表
			orgList: [], //供应组织列表
			defaultSupplyList: [], //默认供应商列表
			// 搜索条件
			search: {
				orgId: 1,
				isDisable: false, // 仅显示正常状态物料
				groupId: '', // 物料分类
				product: '', // 物料名称/编码/规格
				supplyChain: '', //供应链
				is211: '', //是否211
				supplierId: '', //默认供应商
				supplyOrgId: '', //供应组织
				barCode: '', // 条码
				brand: '', // 品牌
				materialProperty: '', //物料属性
				productLocation: '', //产品定位
				lifeCycle: '', //生命周期
				color: '',
				safety: '',
				purchasePrice: '', //采购价格
				cost: '',
				brandType: '', //品牌类型
				productNoColor: '', //产品(不含颜色)
				productSPU: '', //产品SPU
				pageNo: 1, // 页码
				pageSize: 50, // 页数
			},
			tableData: [],
			isDown: true,
			rowShow: false,
			multipleSelection: [],
			total: 0,
			totalPage: 0,
			selectionLen: 0,
			heightNum: 0,
			actionType: '',
			materialList: [], //物料
			tableInfo: [], //操作结果
			OrdedetailIds: [], // 勾选的明细id集合
			OrderNoNames: [], // 选择的物料编码集合
			btnType: [
				'save',
				'disabled',
				'de-disabled',
				'push-down',
				'close',
				'de-close',
				'all-export',
				'query',
				'print-aterial-list',
				'finish',
				'close-case',
				'de-excute-start',
				'de-excute-finish',
				'print-brower',
				'just-check',
				'back-check',
			], // 不需要显示的顶部按钮类型
		};
	},
	computed: {
		...mapState({
			orgId: (state) => (state && state.user ? state.user.orgId : null),
			getorgId: (state) =>
				state && state.org && state.org.orgId ? state.org.orgId : null,
			orgIdArr: (state) => (state ? state.user.orgIdArr : null),
		}),
		orgIdChange() {
			// 监听组织ID
			return this.$store.state && this.$store.state.org
				? this.$store.state.org.orgId
				: null;
		},
	},
	activated() {
		// this.$refs.tableInfoRef.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();
		},
		customerSel1: function () {
			let returnR = customChangeMethods(
				this.customerSel1,
				this.customerSel2,
				this.customerSel3,
				'x',
				this.compKey1
			);
			this.customerSel1 = returnR.selfVal;
			this.customerSel2 = returnR.otherO;
			this.customerSel3 = returnR.otherT;
			this.compKey1 = returnR.keyRsf;
		},
		customerSel2: function () {
			let returnR = customChangeMethods(
				this.customerSel2,
				this.customerSel1,
				this.customerSel3,
				'y',
				this.compKey2
			);
			this.customerSel2 = returnR.selfVal;
			this.customerSel1 = returnR.otherO;
			this.customerSel3 = returnR.otherT;
			this.compKey2 = returnR.keyRsf;
		},
		customerSel3: function () {
			let returnR = customChangeMethods(
				this.customerSel3,
				this.customerSel1,
				this.customerSel2,
				'z',
				this.compKey3
			);
			this.customerSel3 = returnR.selfVal;
			this.customerSel1 = returnR.otherO;
			this.customerSel2 = returnR.otherT;
			this.compKey3 = returnR.keyRsf;
		},
	},
	created() {
		this.windowHeight = document.documentElement.clientHeight;
		this.heightNum =
			this.windowHeight - (40 + 30 + 54 + 34 + 34 + 34 + 16 + 16);
		// this.search.orgId = this.orgId
		// this.getList()
		this.Init();
		this.getStatusTypeInfo();
	},
	methods: {
		Init() {
			this.orgList = this.orgIdArr;
			this.search.orgId = this.orgId;
			this.getList();
			this.getBaseData();
			this.getStatusData();
		},
		// 是否显示正常的物料状态
		chagneisDisable(value) {
			this.search.pageNo = 1;
			this.getList();
		},
		// 物料禁用字体为红色
		tableRowClassName({ row, rowIndex }) {
			if (row.isDisable) {
				return 'color: red!important;';
			}
		},
		resetData() {
			this.search = {
				orgId: this.orgId,
				isDisable: false, // 仅显示正常状态物料
				groupId: '', // 物料分类
				product: '', // 物料名称/编码/规格
				supplyChain: '', //供应链
				is211: '', //是否211
				supplierId: '', //默认供应商
				supplyOrgId: '', //供应组织
				barCode: '', // 条码
				brand: '', // 品牌
				materialProperty: '', //物料属性
				productLocation: '', //产品定位
				lifeCycle: '', //生命周期
				color: '',
				safety: '',
				purchasePrice: '', //采购价格
				cost: '',
				brandType: '', //品牌类型
				productNoColor: '', //产品(不含颜色)
				productSPU: '', //产品SPU
				pageNo: 1, // 页码
				pageSize: 50, // 页数
			};
			this.reset = true;
			this.customerSel1 = '';
			this.customerSel2 = '';
			this.customerSel3 = '';
			setTimeout(() => {
				this.reset = false;
			}, 200);
			this.getList();
		},
		searchComS(val) {
			if (val) {
				//选择物料
				this.search.product = val;
			}
			this.getList();
		},

		searchComS1(val) {
			if (val) {
				//选择条码
				this.search.barCode = val;
			}
			this.getList();
		},

		searchComS2(val) {
			if (val) {
				//选择品牌
				this.search.brand = val;
			}
			this.getList();
		},

		// 选择物料分类
		handleChange(val) {
			// console.log(val)
			if (val) {
				this.search.groupId = val;
			}
			// this.getList()
			this.$refs.materialType.togglePopperVisible(); // 选择之后将下拉框界面收起
		},
		clearData() {
			//清空级联框对应操作
			this.search.groupId = '';
			this.$refs.materialType.togglePopperVisible();
			// this.getList()
		},

		//选择供应商
		supplyChange(val) {
			this.search.supplyChain = val;
			// this.getList()
		},
		// 选择是否211
		is211Change(val) {
			this.search.is211 = val;
			// this.getList()
		},
		//组织
		orgChange(val) {
			this.search.supplyOrgId = val;
			// this.getList()
		},
		//默认供应商
		defaultSupplyChange(val) {
			this.search.supplierId = val;
			// this.getList()
		},

		// 操作弹框导出
		handelhtmlToExcel(domid, title) {
			htmlToExcel(domid, title);
		},
		// 修改禁用状态
		disableChange(val, id) {
			// console.log(val)
			let ids = [];
			ids[0] = id;
			if (val == true) {
				this.$http
					.post('Materials/Disable', { ids: ids })
					.then((res) => {
						if (res.status == 200) {
							this.$message({
								type: 'success',
								message: res.message,
								showClose: true,
							});
						} else {
							this.$message({
								type: 'success',
								message: res.message,
								showClose: true,
							});
						}
					});
			} else {
				this.$http
					.post('Materials/NoDisable', { ids: ids })
					.then((res) => {
						if (res.status == 200) {
							this.$message({
								type: 'success',
								message: res.message,
								showClose: true,
							});
						} else {
							this.$message({
								type: 'success',
								message: res.message,
								showClose: true,
							});
						}
					});
			}
		},
		//双击列表行
		rowDblclick(row, column, event) {
			this.$router.push({
				path: '/material/mateBom/materialSet',
				query: { type: 'edit', id: row.id },
			});
		},
		// 获取列表数据
		getList() {
			this.search.orgId = this.orgId;
			this.$http
				.post('Materials/MaterialsQuery', this.search)
				.then((res) => {
					if (res.status == 200) {
						this.tableData = res.data.list;
						this.total = res.data.total;
						this.totalPage = Math.ceil(
							this.total / this.search.pageSize
						); //总页数
						if (
							this.multipleSelection.length &&
							this.multipleSelection.length > 0
						) {
							let detailsIds = [
								...new Set(
									this.multipleSelection.map((item) => {
										return item.id;
									})
								),
							];
							this.tableData.forEach((el, ind) => {
								if (detailsIds.indexOf(el.id) !== -1) {
									this.$refs.tableInfoRef.toggleRowSelection(
										this.tableData[ind],
										true
									);
								}
							});
						}
					}
				});
		},
		// 订单号 复制按钮
		saleOrderCopy() {
			orderCopy();
		},
		// 物料分类、组织，供应商
		getBaseData() {
			// 物料分类
			this.$http.get('MaterialGroup/GetDropDownAll').then((res) => {
				if (res.status == 200) {
					// 递归去除子级无数据的项
					this.bomList = this.removeChildren(res.data);
				}
			});
			// 供应商
			this.$http.get('SysConfig/supplier/select').then((res) => {
				if (res.status == 200) {
					this.defaultSupplyList = res.data;
				}
			});
		},
		removeChildren(arr) {
			if (arr.length) {
				for (let i in arr) {
					if (arr[i].chinds.length) {
						this.removeChildren(arr[i].chinds);
					} else {
						delete arr[i].chinds;
					}
				}
			}
			return arr;
		},
		// 根据物料编码/规格型号 查询物料
		matterCodeChange(val) {
			if (val !== '') {
				setTimeout(() => {
					this.$http
						.showLoading(false)
						.post('SysConfig/GetMaterial', {
							name: val,
							file: 'Number',
							orgId: this.orgId,
						})
						.then((res) => {
							if (res.status === 200) {
								this.materialList = res.data;
							}
						});
				}, 200);
			} else {
				this.materialList = [];
			}
		},
		// 获取物料
		metterChange(val, type) {
			// console.log(val, type)
			let metterInfo = {};
			if (type === 'number') {
				//物料编码
				metterInfo = this.materialList.filter((res) => {
					return val === res.id;
				})[0];
			}
		},
		resultCom(result, fieldSale, fieldObj, tempObj) {
			// 自定义条件赋值
			let returnResult = resultComMethods(
				result,
				this[fieldSale],
				toRaw(result.outResult),
				this[tempObj],
				this.search
			);
			this[fieldSale] = returnResult.fieldSale;
			this[fieldObj] = returnResult.fieldObj;
			this[tempObj] = returnResult.tempObj;
			this.search = returnResult.search;
		},
		customChangeData(selfVal, otherO, otherT, key, keyRsf) {
			// 监听自定义搜索
			if (this[selfVal] == undefined) {
				this[selfVal] = key;
			}
			if (this[selfVal] == key) {
				return;
			}
			if (
				this[selfVal] == this[otherO] ||
				this[selfVal] == this[otherT]
			) {
				this[selfVal] = key;
				this[keyRsf] += 1;
				this.$message.error({
					message: '不能重复选择!',
					showClose: true,
				});
			}
		},
		// 自定义的数据源
		getStatusData() {
			this.$http.get('Materials/GetStatus').then((res) => {
				if (res.status == 200) {
					let data = res.data;
					this.supplyList = data.supplyChainType; // 供应链
					for (let i in data.materialPropertyType) {
						//物料属性
						this.statusForm.MaterialProperty.push({
							id: i,
							name: data.materialPropertyType[i],
						});
					}
					for (let i in data.productLocationType) {
						//产品定位
						this.statusForm.productLocation.push({
							id: i,
							name: data.productLocationType[i],
						});
					}
					for (let i in data.lifeCycleType) {
						//生命周期
						this.statusForm.lifeCycle.push({
							id: i,
							name: data.lifeCycleType[i],
						});
					}
					for (let i in data.safetyType) {
						//安规
						this.statusForm.safety.push({
							id: i,
							name: data.safetyType[i],
						});
					}
					for (let i in data.brandType) {
						//品牌类型
						this.statusForm.brand.push({
							id: i,
							name: data.brandType[i],
						});
					}
					for (let i in data.materialType) {
						//存货类别
						this.statusForm.InventoryType.push({
							id: i,
							name: data.materialType[i],
						});
					}
					for (let i in data.documentStatus) {
						//单据状态
						this.statusForm.documentStatus.push({
							id: i,
							name: data.documentStatus[i],
						});
					}
					//单位
					var unitlist =
						this.$store.state && this.$store.state.storeData
							? this.$store.state.storeData.allUnit
							: [];
					if (
						JSON.stringify(
							this.$store.state && this.$store.state.storeData
								? this.$store.state.storeData.allUnit
								: []
						) === '[]'
					) {
						this.$http
							.get('SysConfig/GetUnitAllProperty')
							.then((r) => {
								if (r.status === 200) {
									this.statusForm.unitlist =
										this.$store.state.storeData.allUnit =
											r.data;
								}
							});
					} else {
						this.statusForm.unitlist = unitlist;
					}
					//禁用状态
					this.statusForm.isDisable = [
						{ id: true, name: '是' },
						{ id: false, name: '否' },
					];
				}
			});
		},
		async getStatusTypeInfo() {
			// GET or POST
			this.statusForm.customCondition = await getStatusType(
				'Dictionary/sysMaterials'
			); // 获取自定义条件
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
			this.selectionLen = val.length;
		},
		handleSizeChange(val) {
			this.search.pageSize = val;
			this.Init();
		},
		handleCurrentChange(val) {
			this.search.pageNo = val;
			this.Init();
		},
		// 搜索事件
		searchData() {
			this.search.pageNo = 1;
			this.getList();
		},
		headerRigthMethod({ row, column, rowIndex, columnIndex }) {
			return 'headerRight';
		},
		// 搜索切换高度
		openRow() {
			this.isDown = !this.isDown;
			this.rowShow = !this.rowShow;
			if (this.rowShow) {
				this.heightNum = this.heightNum - 80;
			} else {
				this.heightNum = this.heightNum + 80;
			}
		},
		// 顶部公共按钮操作
		actionhandel(type) {
			this.actionType = type;
			// 点击新增
			if (type === 'add') {
				this.$router.push({
					path: '/material/mateBom/materialSet',
					query: { type: 'add', id: '', sjtag: Math.random() * 36 },
				});
			}
			if (this.multipleSelection && this.multipleSelection.length > 0) {
				// console.log(this.multipleSelection)
				let nweArysize = 0;
				// 物料id集合 （有去重）
				let newArry = [
					...new Set(
						this.multipleSelection.map((item) => {
							return item.id;
						})
					),
				];
				// 物料id集合 （有去重）
				let bomNameArry = [
					...new Set(
						this.multipleSelection.map((item) => {
							return item.number;
						})
					),
				];
				// 物料id 集合的size
				nweArysize = new Set(
					this.multipleSelection.map((item) => {
						return item.id;
					})
				).size;
				// 点击复制
				if (type === 'copy') {
					if (nweArysize > 1) {
						this.$message.error({
							message: '只能克隆版本相同的物料',
							showClose: true,
						});
					} else {
						this.$router.push({
							path: '/material/mateBom/materialSet',
							query: {
								type: 'copy',
								id: this.multipleSelection[0].id,
								sjtag: Math.random() * 36,
							},
						});
					}
				}
				// 点击提交
				if (type === 'submit') {
					this.toolarFn('Materials/CommitList', newArry);
				}
				// 点击撤销
				if (type === 'revoke') {
					this.toolarFn('Materials/Revoke', newArry);
				}
				// 点击审核
				if (type === 'audit') {
					this.toolarFn('Materials/Check', newArry);
				}
				// 点击反审核
				if (type === 'de-approval') {
					this.toolarFn('Materials/NoCheck', newArry);
				}
				// 点击删除
				if (type === 'delet') {
					this.toolarFn('Materials/Delete', newArry);
				}
				// 禁用
				if (type === 'disabled') {
					this.toolarFn('Materials/Disable', newArry);
				}
				//反禁用
				if (type === 'de-disabled') {
					this.toolarFn('Materials/NoDisable', newArry);
				}
				// BOM正查
				if (type === 'just-check') {
					this.toolarFn('', newArry, 'just', bomNameArry);
				}
				// BOM反查
				if (type === 'back-check') {
					this.toolarFn('', newArry, 'back', bomNameArry);
				}
			} else {
				//按列表字段导出,点击全部导出
				if (
					type !== 'add' &&
					type !== 'refresh' &&
					type !== 'list-export'
				) {
					this.$message.error({
						message: '请先勾选',
						showClose: true,
					});
				}
			}
			if (type === 'list-export') {
				exporthandel('Materials/Export', this.search);
			}
			// 点击刷新
			if (type === 'refresh') {
				this.resetData();
			}
		},
		// 顶部操作方法-公共部分封装
		toolarFn(path, newArry, check, bomNameArry) {
			let formdata = { ids: newArry };
			if (check) {
				if (newArry.length > 1) {
					this.$message.error({
						message: '不允许查询多个物料！',
						showClose: true,
					});
				} else {
					// console.log('just back check')
					this.$router.push({
						path: '/material/mateBom/bomJust',
						query: {
							type: check,
							id: newArry[0],
							name: bomNameArry[0],
							sjtag: Math.random() * 36,
						},
					});
				}
			} else {
				this.$http.post(path, formdata).then((res) => {
					if (res.status === 200) {
						this.dialogVisible = true;
						this.tableInfo = res.data;
					}
				});
			}
		},
		beforeClose() {
			this.dialogVisible = false;
			this.search.pageNo = 1;
			this.search.pageSize = 50;
			this.getList();
		},
		// 详情
		toDetail(item) {
			this.$router.push({
				path: '/material/mateBom/materialSet',
				query: { type: 'edit', id: item.id },
			});
		},
	},
};
</script>
<style lang="scss" scoped>
@import '@/assets/style/saleOrder/saleOrderCommon.scss';
@import '@/assets/style/saleOrder/orderList.scss';
@import '@/assets/style/saleOrder/common.scss';
</style>
