<template>
	<view class="fabric-out-page">
		<OrderStatusBar class="fabric-out-mt32" :status="order.audit_status" :name="order.audit_status_name" />

		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">出仓单号</text>
			<text>{{ order.order_no }}</text>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">出仓类型</text>
			<text>{{ order.out_order_type_name || '正常加工出仓单' }}</text>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">加工单位</text>
			<text>{{ order.process_name || '-' }}</text>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">仓库名称</text>
			<text>{{ order.warehouse_name || '-' }}</text>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">单据备注</text>
			<text>{{ order.remark || '-' }}</text>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">创建人</text>
			<text>{{ order.creator_name }} {{ formatTime(order.create_time, 'YYYY-MM-DD') }}</text>
		</view>
		<view v-if="order.auditor_name" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">审核人</text>
			<text>{{ order.auditor_name }} {{ formatTime(order.audit_time, 'YYYY-MM-DD') }}</text>
		</view>

		<ProcessOutDetailList
			:title="detailTitle"
			:list="order.item_data"
		/>

		<FabricOutFooter :buttons="actionButtons" @action="handleAction" />
	</view>
</template>

<script>
import util from '@/common/util';
import OrderStatusBar from '@/components/storefabric/OrderStatusBar.vue';
import FabricOutFooter from '@/components/storefabric/FabricOutFooter.vue';
import ProcessOutDetailList from '@/components/storegoods/ProcessOutDetailList.vue';
import {
	normalizeOrder,
	getViewStatusActionButtons,
	confirmOrderStatusAction,
	formatDisplayTime,
} from '@/common/storeGoodsProcessOut';

export default {
	components: { OrderStatusBar, FabricOutFooter, ProcessOutDetailList },
	data() {
		return {
			orderId: 0,
			order: { item_data: [] },
		};
	},
	computed: {
		actionButtons() {
			return getViewStatusActionButtons(this.order.audit_status);
		},
		detailTitle() {
			return `出仓明细（共 ${this.order.total_roll || 0} 匹）`;
		},
	},
	onLoad(e) {
		uni.setNavigationBarTitle({ title: '查看加工出仓单' });
		if (e.id) {
			this.orderId = Number(e.id);
			this.refreshOrder();
		}
	},
	onShow() {
		if (this.orderId) this.refreshOrder();
	},
	methods: {
		formatTime: formatDisplayTime,
		refreshOrder() {
			this.$u.api.fpmProcessOutOrder.detail({ id: this.orderId })
				.then((res) => {
					const order = normalizeOrder(res);
					if (!order) {
						this.showError('单据不存在');
						return;
					}
					this.order = order;
				})
				.catch((err) => {
					this.showError(err.message || '加载单据失败');
				});
		},
		handleAction(action) {
			if (action === 'edit') {
				uni.navigateTo({ url: `./storeGoodsProcessOutEdit?id=${this.orderId}` });
				return;
			}
			confirmOrderStatusAction(this, {
				orderId: this.orderId,
				action,
				onSuccess: () => this.$u.api.fpmProcessOutOrder.detail({ id: this.orderId })
					.then((res) => {
						uni.hideLoading();
						const order = normalizeOrder(res);
						if (order) this.order = order;
						util.playSuccessAudio();
						uni.showToast({ title: '操作成功', icon: 'success' });
					}),
			});
		},
		showError(message) {
			util.playErrorAudio();
			uni.showModal({ title: '提示', content: message, showCancel: false });
		},
	},
};
</script>

<style lang="scss">
@import '@/pages/storefabric/storeFabricBusinessOutPage.scss';
page {
	background-color: #F8F8F8;
	padding-bottom: 260rpx;
}
</style>
