<template>
	<view class="statusRow">
		<text class="statusLabel">订单状态</text>
		<text class="statusTag" :class="'status-' + status">{{ displayName }}</text>
	</view>
</template>

<script>
import { AUDIT_STATUS_MAP, DRAFT_AUDIT_STATUS, DRAFT_AUDIT_STATUS_NAME } from '@/common/storeFabricBusinessOut';

export default {
	props: {
		status: { type: [Number, String], default: 0 },
		name: { type: String, default: '' },
	},
	computed: {
		displayName() {
			if (Number(this.status) === DRAFT_AUDIT_STATUS) return DRAFT_AUDIT_STATUS_NAME;
			return this.name || AUDIT_STATUS_MAP[Number(this.status)] || '-';
		},
	},
};
</script>

<style scoped>
.statusRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 26rpx;
	background: #fff;
	border-bottom: 1rpx solid #f5f5f5;
}
.statusLabel {
	font-size: 28rpx;
	color: #333;
}
.statusTag {
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 6rpx;
	font-weight: normal;
}
.status-0 { background: #f0f0f0; color: #666; }
.status-1 { background: #fff7e6; color: #fa8c16; }
.status-2 { background: #f6ffed; color: #52c41a; }
.status-3 { background: #fff1f0; color: #f5222d; }
.status-4 { background: #f5f5f5; color: #999; }
</style>
