<template>
	<!-- 显示中文状态名称，而非原始英文值 -->
	<text class="status" :class="returnClass">{{ statusName }}</text>
</template>

<script setup>

	// 接收父组件传入的英文状态值（ing/wait_verify等）
	const props = defineProps({
		status: {
			type: String,
			default: ''
		}
	})

	// 状态映射表：英文值 → 中文名称 + 样式类
	const statusMap = ref([{
			name: '进行中', // 显示的中文
			value: 'ing', // 匹配的英文状态
			class: 'success' // 样式类
		},
		{
			name: '待核销',
			value: 'wait_verify',
			class: 'warning'
		},
		{
			name: '已核销',
			value: 'finish',
			class: 'primary' // 新增已核销专属样式
		},
		{
			name: '退款中',
			value: 'refunding',
			class: 'error' // 退款中复用error样式
		},
		{
			name: '已退款',
			value: 'refund',
			class: 'disabled' // 已退款复用error样式
		},
		{
			name: '已取消',
			value: 'cancel',
			class: 'disabled' // 新增已取消样式
		},
		{
			name: '超时',
			value: 'timeout',
			class: 'disabled' // 超时复用已取消样式
		}
	])

	// 计算要显示的中文名称
	const statusName = computed(() => {
		const item = statusMap.value.find(v => v.value === props.status)
		return item ? item.name : props.status // 未匹配到则显示原始值
	})

	// 计算要绑定的样式类
	const returnClass = computed(() => {
		const item = statusMap.value.find(v => v.value === props.status)
		return item ? item.class : ''
	})
</script>

<style lang="scss">
	.status {
		padding: 8rpx 18rpx;
		border-radius: 8rpx;
		border: 2rpx solid #333;
		font-size: 24rpx;

		// 进行中
		&.success {
			border-color: rgba(123, 209, 54, 1);
			color: rgba(123, 209, 54, 1);
			background: rgba(123, 209, 54, 0.12);
		}

		// 待核销
		&.warning {
			border-color: rgba(255, 141, 40, 1);
			color: rgba(255, 141, 40, 1);
			background: rgba(255, 141, 40, 0.12);
		}

		// 已核销（新增）
		&.primary {
			border-color: rgba(41, 148, 255, 1);
			color: rgba(41, 148, 255, 1);
			background: rgba(41, 148, 255, 0.12);
		}

		// 退款中/已退款
		&.error {
			border-color: #FF1C1C;
			color: #FF1C1C;
			background: rgba(255, 28, 28, 0.18);
		}

		// 已取消/超时（新增）
		&.disabled {
			border-color: rgba(153, 153, 153, 1);
			color: rgba(153, 153, 153, 1);
			background: rgba(153, 153, 153, 0.12);
		}
	}
</style>