<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-select
					v-model="query.mgroup"
					clearable
					placeholder="所在工段"
					@change="handleQuery"
					style="margin-left: 10px; width: 150px"
				>
					<el-option
						v-for="item in mgroupOptions"
						:key="item.id"
						:label="item.name"
						:value="item.id"
					></el-option>
				</el-select>
			</div>
			<div class="right-panel">
				<el-input
					v-model="query.search"
					placeholder="物料名/批次号"
					clearable
					style="margin-right: 5px"
				></el-input>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery"
				></el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table_wm"
				:apiObj="apiObjWm"
				row-key="id"
				:params="paramsWm"
				stripe
			>
				<el-table-column label="批次" prop="batch">
				</el-table-column>
				<el-table-column label="物料名" prop="material">
					<template #default="scope">{{scope.row.material_.name}}</template>
				</el-table-column>
				<el-table-column label="规格" prop="material">
					<template #default="scope">{{scope.row.material_.specification}}</template>
				</el-table-column>
				<el-table-column label="型号" prop="material">
					<template #default="scope">{{scope.row.material_.model}}</template>
				</el-table-column>
				<el-table-column label="已到工序" prop="material">
					<template #default="scope">{{scope.row.material_.process_name}}</template>
				</el-table-column>
				<el-table-column label="所在工段" prop="belong_dept_name">
				</el-table-column>
				<el-table-column label="数量" prop="count" width="80">
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
</template>
<script>
export default {
	name: "halfgood",
	data() {
		return {
			apiObj: this.$API.inm.warehouse.batch,
			params: { count__gte: 1, material__type: 10 },
			selection: [],
			query: {},
			mgroupOptions: [],
			apiObjWm: this.$API.wpm.wmaterial.list,
			paramsWm: { count__gte: 1, material__type: 10 },
			queryWm: {},
		};
	},
	mounted() {
		this.getMgroup();
	},
	methods: {
		getMgroup() {
			let that = this;
			this.$API.mtm.mgroup.list.req({ page: 0 }).then((res) => {
				this.mgroupOptions = res;
			});
		},
		getProcessOptions() {
			this.$API.mtm.process.list.req({ page: 0 }).then((res) => {
				this.processOptions = res;
			});
		},
		handleQueryWm() {
			this.$refs.table_wm.queryData(this.queryWm);
		},
		handleQuery() {
			this.$refs.table.queryData(this.query);
		},
		resetQuery() {
			this.query = {};
		},
	},
};
</script>
