<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<!-- <el-button type="primary" @click="add('do_in')">生产入库</el-button>
        <el-button type="primary" @click="add('do_out')">生产领料</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button type="primary" @click="add('pur_in')">采购入库</el-button>
        <el-button type="primary" @click="add('sale_out')">销售发货</el-button>
        <el-divider direction="vertical"></el-divider> -->
				<el-button
					type="primary"
					@click="add('other_in')"
					v-auth="'mio.other'"
					>其他入库</el-button
				>
				<el-button
					type="primary"
					@click="add('other_out')"
					v-auth="'mio.other'"
					>其他出库</el-button
				>
				<el-select
					v-model="query.type"
					clearable
					style="width: 120px; margin-left: 2px"
					placeholder="出入库类型"
					@change="handleQuery"
				>
					<el-option
						v-for="item in cateOptions"
						:key="item.id"
						:label="item.name"
						:value="item.id"
					></el-option>
				</el-select>
				<el-select
					v-model="query.state"
					clearable
					style="width: 120px; margin-left: 2px"
					placeholder="状态"
					@change="handleQuery"
				>
					<el-option
						v-for="item in stateOptions"
						: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" :apiObj="apiObj" row-key="id" stripe>
				<el-table-column type="index" width="50" />
				<el-table-column
					label="记录编号"
					prop="number"
				></el-table-column>
				<el-table-column label="出/入库类型">
					<template #default="scope">
						{{ typeDict[scope.row.type] }}
					</template>
				</el-table-column>
				<el-table-column label="记录状态">
					<template #default="scope">
						{{ stateDict[scope.row.state] }}
					</template>
				</el-table-column>
				<el-table-column label="出/入库日期" prop="inout_date">
				</el-table-column>

				<el-table-column label="创建人" prop="create_by_name">
				</el-table-column>
				<el-table-column label="创建时间" prop="create_time">
				</el-table-column>
				<el-table-column
					label="操作"
					fixed="right"
					align="center"
					width="150px"
				>
					<template #default="scope">
						<el-button
							link
							type="primary"
							@click="table_edit(scope.row)"
							v-if="scope.row.state == 10&&(scope.row.type == 'other_in' ||scope.row.type == 'other_out')"
						>
							编辑
						</el-button>
						<el-button
							link
							type="primary"
							@click="table_detail(scope.row)"
						>
							查看
						</el-button>
						<el-button
							link
							type="primary"
							@click="table_submit(scope.row)"
							v-auth="'mio.submit'"
							v-if="scope.row.state == 10 &&(scope.row.type == 'other_in' ||scope.row.type == 'other_out')"
						>
							提交
						</el-button>
						<el-button
							link
							type="warning"
							@click="revert(scope.row)"
							v-auth="'mio.submit'"
							v-if="scope.row.state == 20&&
								(scope.row.type == 'other_in' ||
									scope.row.type == 'other_out')"
						>
							撤回
						</el-button>
						<el-button
							link
							type="danger"
							@click="table_del(scope.row)"
							v-auth="'mio.delete'"
							v-if="
								scope.row.state == 10 &&
								(scope.row.type == 'other_in' ||
									scope.row.type == 'other_out')
							"
						>
							删除
						</el-button>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
	<save-dialog
		v-if="dialog.save"
		ref="saveDialog"
		@success="handleSaveSuccess"
		@closed="dialog.save = false"
	></save-dialog>
	<record-dialog
		ref="showDrawer"
		v-if="visibleDrawer"
		:type="type"
		:cate="cate"
		:mioId="mioId"
		@closed="visibleDrawer = false"
	>
	</record-dialog>
</template>
<script>
import saveDialog from "./mio_form.vue";
import recordDialog from "./mioitem.vue";

export default {
	name: "mio",
	components: {
		saveDialog,
		recordDialog,
	},
	data() {
		return {
			stateDict: {
				10: "创建中",
				20: "已提交",
			},
			stateOptions: [
				{ id: 10, name: "创建中" },
				{ id: 20, name: "已提交" },
			],
			typeDict: {
				do_out: "生产领料",
				sale_out: "销售发货",
				pur_in: "采购入库",
				do_in: "生产入库",
				other_in: "其他入库",
				other_out: "其他出库",
				borrow_out: "领用出库",
				return_in: "退还入库",
			},
			cateOptions: [
				{ id: "do_out", name: "生产领料" },
				{ id: "sale_out", name: "销售发货" },
				{ id: "pur_in", name: "采购入库" },
				{ id: "do_in", name: "生产入库" },
				{ id: "other_in", name: "其他入库" },
				{ id: "other_out", name: "其他出库" },
				{ id: "borrow_out", name: "领用出库" },
				{ id: "return_in", name: "退还入库" },
			],
			dialog: {
				save: false,
				record: false,
			},
			visibleDrawer: false,
			query: {
				search: "",
			},
			form: {},
			apiObj: this.$API.inm.mio.list,
			selection: [],
			type: "",
			mioId: "",
		};
	},
	methods: {
		//添加
		add(type) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("add", type);
			});
		},
		//编辑
		table_edit(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("edit", row.type).setData(row);
			});
		},
	
		//查看
		table_detail(row) {
			this.type = row.type;
			this.mioId = row.id;
			this.visibleDrawer = true;
			this.$nextTick(() => {
				this.$refs.showDrawer.open();
			});
		},
		//删除
		table_del(row) {
			this.$confirm(`确定删除吗？`, "提示", {
				type: "warning",
			})
				.then(() => {
					this.$API.inm.mio.delete
						.req(row.id)
						.then((res) => {
							this.$message.success("删除成功");
							this.$refs.table.refresh();
							return res;
						})
						.catch((err) => {
							return err;
						});
				})
				.catch(() => {});
		},
		table_submit(row) {
			this.$API.inm.mio.submit.req(row.id).then((res) => {
				this.$message.success("提交成功");
				this.$refs.table.refresh();
			});
		},
		revert(row) {
			this.$confirm(`确定撤回该操作吗？`, "提示", {
				type: "warning",
			})
				.then(() => {
					this.$API.inm.mio.revert
						.req(row.id)
						.then((res) => {
							this.$message.success("撤回成功");
							this.$refs.table.refresh();
							return res;
						})
						.catch((err) => {
							return err;
						});
				})
				.catch(() => {});
		},
		handleQuery() {
			this.$refs.table.queryData(this.query);
		},
		resetQuery() {
			this.query = {};
		},
		handleSaveSuccess() {
			this.$refs.table.refresh();
		},
	},
};
</script>
