<template>
	<lay-container class="content-box" :style="'padding-top:'+(editType!=1?0:35)+'px'">
		<view class="edit-box">
			<lay-form :model="searchObj" class="search-box edit-info">
				<lay-row class="color666">
					<lay-form-item label="物料号" prop="FCode">
						<lay-input v-model="searchObj.FCode"></lay-input>
					</lay-form-item>
					<lay-form-item label="试验号" prop="FTestCode">
						<lay-input v-model="searchObj.FTestCode"></lay-input>
					</lay-form-item>
					<lay-form-item label="物料描述" prop="FName">
						<lay-input v-model="searchObj.FName"></lay-input>
					</lay-form-item>
					<lay-form-item label="产品分类" prop="FType">
						<lay-select v-model="searchObj.FType">
							<lay-select-option v-for="(tIdv,tIdx) in typeListObj" :key="tIdx" :value="tIdv.FValue"
								:label="tIdv.FName"></lay-select-option>
						</lay-select>
					</lay-form-item>
					<lay-form-item v-if="editType != 1"></lay-form-item>
				</lay-row>
				<lay-form-item class="search-btn">
					<lay-button size="sm" type="primary" @click="_clickSearch">搜索</lay-button>
					<lay-button size="sm" @click="_clickReset">重置</lay-button>
				</lay-form-item>
			</lay-form>
			<lay-form :model="objInfo" class="search-box edit-info color999">
				<lay-form-item label="主物料号" prop="FCode">
					<lay-input :disabled="isDisabled" v-model="objInfo.FCode"></lay-input>
				</lay-form-item>
				<lay-form-item label="主物料描述" prop="FName">
					<lay-input :disabled="isDisabled" v-model="objInfo.FName" type="FName"></lay-input>
				</lay-form-item>
				<lay-form-item :label=" editType == 1 ? '替代料物料号' : '副产物物料号' ">
					<lay-input :disabled="isDisabled" v-model="objInfo.choseData.FCode"></lay-input>
				</lay-form-item>
				<lay-form-item :label=" editType == 1 ? '替代料描述' : '副产物描述' ">
					<lay-input :disabled="isDisabled" v-model="objInfo.choseData.FName"></lay-input>
				</lay-form-item>
				<lay-form-item v-if="editType != 1" label="副产物数量">
					<lay-input v-model="objInfo.choseData.FCount"></lay-input>
				</lay-form-item>
				<lay-form-item v-if="editType != 1" label="副产物单位">
					<lay-input v-model="objInfo.choseData.FUnit"></lay-input>
				</lay-form-item>
				<lay-form-item class="search-btn">
					<lay-button size="sm" type="danger" @click="submitClick">确定</lay-button>
					<lay-button size="sm" @click="cancelClick">取消</lay-button>
				</lay-form-item>
			</lay-form>
		</view>
		<view class="edit-box">
			<lay-table :class=" 'empty-small' + editType " :columns="dataColumn" id="id" :dataSource="dataList"
				v-model:selected-key="selectedKey" :page="dataList.length>0?pageInfo:null" @change="changePage">
			</lay-table>
		</view>
	</lay-container>
</template>

<style scoped>
	.content-box {
		height: 744px;
		display: block;
		position: relative;
		clear: both;
		float: none;
	}

	.edit-box {
		display: block;
		width: 99%;
		text-align: center;
		margin: 0 auto;
		clear: both;
		float: none;
	}

	.edit-info {
		margin: 20px 0 10px;
		width: 47%;
		padding-left: 1%;
		padding-right: 1%;
		display: inline-block;
		margin-right: 0.75%;
	}

	.edit-info+.edit-info {
		margin-left: 0.75%;
		margin-right: 0;
	}

	.layui-form-item {
		margin-bottom: 16px;
	}
</style>
<script>
	import {
		ref,
		watch
	} from 'vue';
	import {
		updateDataInfo,
		getPageList
	} from "/src/api/api/common";

	export default {
		setup() {
			const objInfo = ref({
				choseData: {
					FName: "",
					FType: "",
					FCode: ""
				}
			});
			const postData = ref({});

			const pageInfo = ref({
				total: 0,
				limit: 5,
				current: 1
			});
			let dataColumn = [{
					type: "radio"
				},
				{
					title: "物料号",
					key: "FCode",
					width: "200px"
				},
				{
					title: "试验号",
					key: "FTestCode",
					width: "200px"
				},
				{
					title: "物料描述",
					key: "FName",
					minWidth: "300px"
				},
				{
					title: "产品分类",
					key: "FTypeName",
					width: "110px"
				}
			];
			dataColumn.forEach((item) => {
				item.align = "center";
			});
			const dataList = ref([]);
			const selectedKey = ref("");
			const isDisabled = ref(true);
			const searchObj = ref({});
			watch(selectedKey, function() {
				const choseObj = dataList.value.find(s => s.id == selectedKey.value) || null;
				if (choseObj != null) {
					objInfo.value.choseData.FID = choseObj.FID;
					objInfo.value.choseData.FName = choseObj.FName;
					objInfo.value.choseData.FType = choseObj.FType;
					objInfo.value.choseData.FCode = choseObj.FCode;
				}
			});
			return {
				objInfo,
				postData,
				pageInfo,
				dataColumn,
				dataList,
				selectedKey,
				isDisabled,
				searchObj
			}
		},
		props: {
			objInfoObj: {
				type: Object,
				default: () => {},
			},
			typeListObj: {
				type: Array,
				default: () => [],
			},
			editType: {
				type: Number,
				default: () => 1,
			},
		},
		mounted() {
			let objInfo = JSON.parse(JSON.stringify(this.objInfoObj));
			objInfo.choseData = {
				FID: this.editType == 1 ? objInfo.FSuccedaneumID : objInfo.FFuProductsID,
				FName: this.editType == 1 ? objInfo.FSuccedaneumInfo : objInfo.FFuProductsInfo,
				FType: this.editType == 1 ? objInfo.FSuccedaneumType : objInfo.FFuProductsType,
				FCode: this.editType == 1 ? objInfo.FSuccedaneumCode : objInfo.FFuProductsCode,
				FCount: objInfo.FFuProductsCount || "",
				FUnit: objInfo.FFuProductsUnit || ""
			};
			if (this.editType == 1) this.pageInfo.limit = 6;
			this.objInfo = objInfo;
			this._getPageList();
		},
		methods: {
			//列表-分页
			changePage(obj) {
				this.pageInfo.current = obj.current;
				this._getPageList();
			},
			//检索-检索
			_clickSearch() {
				this.postData = {};
				for (let key in this.searchObj) {
					let val = this.searchObj[key];
					if (val != null && val != "") this.postData[key] = val;
				}
				this._getPageList(true);
			},
			//检索-重置
			_clickReset() {
				this.searchObj = {};
				this._clickSearch();
			},
			//列表-数据
			async _getPageList(isFirst) {
				this.pageInfo.total = 0;
				if (isFirst) {
					this.pageInfo.current = 1;
					this.pageInfo.total = 0;
				}
				this.postData.FPageIndex = this.pageInfo.current;
				this.postData.FPageSize = this.pageInfo.limit;
				let result = await getPageList(this.postData, "Material");
				result.Data.List = result.Data.List || [];
				let cD = this.objInfo.choseData;
				result.Data.List.forEach((item) => {
					let type = this.typeListObj.find(s => s.FValue == item.FType);
					item.FTypeName = type == null ? "" : type.FName;
					item.id = item.FID;
					if (item.FCode == cD.FCode && item.FName == cD.FName && item.FType == cD.FType &&
						this.selectedKey != item.id) {
						this.selectedKey = item.id
					}
				});
				this.pageInfo.total = result.Data.Total || 0;
				this.dataList = result.Data.List;
			},
			//提交
			async submitClick() {
				let updateInfo = {
					FID: this.objInfo.FID
				};
				if (this.editType == 1) {
					updateInfo.FSuccedaneumID = this.objInfo.choseData.FID || -1;
					updateInfo.FSuccedaneumInfo = this.objInfo.choseData.FName || "";
					updateInfo.FSuccedaneumType = this.objInfo.choseData.FType || "";
					updateInfo.FSuccedaneumCode = this.objInfo.choseData.FCode || "";
				} else {
					updateInfo.FFuProductsID = this.objInfo.choseData.FID || -1;
					updateInfo.FFuProductsInfo = this.objInfo.choseData.FName || "";
					updateInfo.FFuProductsType = this.objInfo.choseData.FType || "";
					updateInfo.FFuProductsCode = this.objInfo.choseData.FCode || "";
					updateInfo.FFuProductsCount = this.objInfo.choseData.FCount || "";
					updateInfo.FFuProductsUnit = this.objInfo.choseData.FUnit || "";
				}
				let result = await updateDataInfo(updateInfo, "Material") || 0;
				if (result > 0) {
					layer.msg("操作成功", {
						time: 1500,
						icon: 1
					});
					setTimeout(() => {
						this.cancelClick(true);
					}, 150)
				} else {
					layer.msg("操作失败", {
						time: 1000,
						icon: 2
					})
				}
			},
			//取消
			cancelClick(isRefresh) {
				this.$emit('cancelClick', isRefresh == undefined ? false : isRefresh);
			}
		}
	}
</script>
