<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>{{ billTypeName }}</text>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">染厂</text><text>{{ order.business_unit_name }}</text>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">出货日期</text><text>{{ formatTime(order.delivery_time) }}</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.auditer_name" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">审核人</text><text>{{ order.auditer_name }} {{ formatTime(order.audit_time, 'YYYY-MM-DD') }}</text>
		</view>

		<FabricOutDetailList
			:title="detailTitle"
			:list="order.item_data"
			@fabric-info="openFabricInfo"
			@fine-code="openFineCode"
		/>

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

		<FabricInfoPopup :show.sync="fabricInfoShow" :data="currentFabricInfo" />
		<FineCodePopup :show.sync="fineCodeShow" :list="currentFineCodes" :readonly="true" />
	</view>
</template>

<script>
import util from '@/common/util';
import FabricInfoPopup from '@/components/storefabric/FabricInfoPopup.vue';
import FineCodePopup from '@/components/storefabric/FineCodePopup.vue';
import OrderStatusBar from '@/components/storefabric/OrderStatusBar.vue';
import FabricOutDetailList from '@/components/storefabric/FabricOutDetailList.vue';
import FabricOutFooter from '@/components/storefabric/FabricOutFooter.vue';
import {
	BILL_TYPES,
	normalizeOrder,
	getViewStatusActionButtons,
	confirmOrderStatusAction,
	formatDisplayTime,
} from '@/common/storeFabricBusinessOut';

export default {
	components: { FabricInfoPopup, FineCodePopup, OrderStatusBar, FabricOutDetailList, FabricOutFooter },
	data() {
		return {
			orderId: 0,
			order: {},
			billTypeName: (BILL_TYPES[0] || {}).label || '坯布其他出货单',
			fabricInfoShow: false,
			fineCodeShow: false,
			currentFabricInfo: {},
			currentFineCodes: [],
		};
	},
	computed: {
		actionButtons() {
			return getViewStatusActionButtons(this.order.audit_status);
		},
		detailTitle() {
			return `出仓细码（共 ${this.order.total_roll || 0} 匹 / ${this.order.total_weight || 0} KG）`;
		},
	},
	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.gfmOtherDeliveryOrder.detail({ id: this.orderId })
				.then((res) => {
					const order = normalizeOrder(res);
					if (!order) {
						this.showError('单据不存在');
						return;
					}
					this.order = order;
				})
				.catch((err) => {
					this.showError(err.message || '加载单据失败');
				});
		},
		openFabricInfo(row) {
			this.currentFabricInfo = { ...row };
			this.fabricInfoShow = true;
		},
		openFineCode(row) {
			this.currentFineCodes = [...(row.fine_codes || [])];
			this.fineCodeShow = true;
		},
		handleAction(action) {
			if (action === 'edit') {
				uni.navigateTo({ url: `./storeFabricBusinessOutEdit?id=${this.orderId}` });
				return;
			}
			confirmOrderStatusAction(this, {
				orderId: this.orderId,
				action,
				onSuccess: () => this.$u.api.gfmOtherDeliveryOrder.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>
