<template>
	<div style="padding: 8px">
		<div>
			<el-card style="width: 100%" header="基本信息" shadow="hover">
				<el-descriptions>
					<el-descriptions-item label="订单编号">{{
						orderObj.number
					}}</el-descriptions-item>
					<el-descriptions-item label="订单状态">{{
						stateOption[orderObj.state]
					}}</el-descriptions-item>
					<el-descriptions-item label="供应商">{{
						orderObj.supplier_name
					}}</el-descriptions-item>
					<el-descriptions-item label="所属部门">{{
						orderObj.belong_dept_name
					}}</el-descriptions-item>
					<el-descriptions-item label="创建人">{{
						orderObj.create_by_name
					}}</el-descriptions-item>
					<el-descriptions-item label="创建时间">{{
						orderObj.create_time
					}}</el-descriptions-item>
				</el-descriptions>
			</el-card>
		</div>
		<div style="height: 8px"></div>
		<div>
			<el-card style="width: 100%" header="订单明细" shadow="hover">
				<div>
					<el-button
						type="primary"
						@click="addLinkPlanItem"
						v-auth="'pu_orderitem.create'"
						v-if="orderObj.state == 10"
						>计划明细变更采购明细</el-button
					>
					<el-button
						type="primary"
						icon="el-icon-plus"
						@click="add"
						v-auth="'pu_orderitem.create'"
						v-if="orderObj.state == 10"
						>手动新增</el-button
					>
				</div>
				<scTable
					ref="table"
					:apiObj="apiObj"
					row-key="id"
					stripe
					:params="params"
					:query="query"
					hidePagination
					hideDo
				>
					<el-table-column type="index" width="50" />
					<el-table-column
						label="物料"
						prop="material"
						show-overflow-tooltip
					>
						<template #default="scope">
							<span v-if="scope.row.material_">
								{{ scope.row.material_.name }}</span
							>
						</template>
					</el-table-column>
					<el-table-column label="所需数量" prop="count">
					</el-table-column>
					<el-table-column label="已到货数量" prop="delivered_count">
					</el-table-column>
					<el-table-column
						label="创建时间"
						prop="create_time"
						show-overflow-tooltip
					>
					</el-table-column>
					<el-table-column
						label="更新时间"
						prop="update_time"
						show-overflow-tooltip
					>
					</el-table-column>
					<el-table-column
						label="操作"
						fixed="right"
						align="left"
						width="100px"
					>
						<template #default="scope">
							<el-button
								link
								type="primary"
								@click="table_edit(scope.row)"
								v-auth="'pu_orderitem.update'"
								v-if="orderObj.state == 10"
							>
								编辑
							</el-button>
							<el-button
								link
								type="danger"
								@click="table_del(scope.row)"
								v-auth="'pu_orderitem.delete'"
								v-if="orderObj.state == 10"
							>
								删除
							</el-button>
						</template>
					</el-table-column>
				</scTable>
			</el-card>
		</div>
	</div>
	<save-dialog
		v-if="dialog.save"
		ref="saveDialog"
		:puOrder="puOrder"
		@success="handleSaveSuccess"
		@closed="dialog.save = false"
	></save-dialog>
	<plan-dialog
		v-if="dialog.plan"
		ref="planDialog"
		:puOrder="puOrder"
		@success="handlePlanSuccess"
		@closed="dialog.plan = false"
	></plan-dialog>
</template>
<script>
import saveDialog from "./orderitem_form.vue";
import planDialog from "./orderitemplan.vue";
export default {
	name: "rparty",
	components: {
		saveDialog,
		planDialog,
	},
	props: {
		orderId: {
			type: String,
			default: "",
		},
	},
	data() {
		return {
			dialog: {
				save: false,
				splan: false,
			},
			apiObj: null,
			params: {
				pu_order: "",
			},
			query: {},
			puOrder: "",
			orderObj: {},
			selection: [],
			stateOption: {
				10: "创建中",
				20: "已提交",
				30: "到货中",
				40: "已完成",
			},
		};
	},
	mounted() {
		this.puOrder = this.orderId;
		this.params.pu_order = this.orderId;
		this.apiObj = this.$API.pum.orderitem.list;
		this.getOrder();
	},
	methods: {
		getOrder() {
			this.$API.pum.order.item.req(this.puOrder).then((res) => {
				this.orderObj = res;
			});
		},
		//添加
		add() {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("add");
			});
		},
		addLinkPlanItem(row) {
			this.dialog.plan = true;
			this.$nextTick(() => {
				this.$refs.planDialog.open();
			});
			// this.$router.push({
			//       name: "orderitemplan",
			//       query:{
			//         pu_order:this.puOrder
			//       }
			//     });
		},

		//编辑
		table_edit(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("edit").setData(row);
			});
		},
		//查看
		table_show(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("show").setData(row);
			});
		},
		//删除
		table_del(row) {
			this.$confirm(`确定删除吗？`, "提示", {
				type: "warning",
			})
				.then(() => {
					this.$API.pum.orderitem.delete
						.req(row.id)
						.then((res) => {
							this.$message.success("删除成功");
							this.$refs.table.refresh();
							return res;
						})
						.catch((err) => {
							return err;
						});
				})
				.catch(() => {});
		},
		//本地更新数据
		handleSaveSuccess(data, mode) {
			if (mode == "add") {
				this.$refs.table.refresh();
			} else if (mode == "edit") {
				this.$refs.table.refresh();
			}
		},
		handlePlanSuccess() {
			this.dialog.plan = false;
			this.$refs.table.refresh();
		},
		handleQuery() {
			this.$refs.table.queryData(this.query);
		},
		resetQuery() {
			this.query = {};
		},
	},
};
</script>
