<template>
	<text class="status  "  :class="returnClass">{{status}}</text>
</template>

<script setup>
import { computed } from 'vue'

	const props=defineProps({
		status:{
			default:''
		}
	})
	const list =ref( [{
			name: '全部',
			value: ''
		},
		{
			name: '待成团',
			value: '',
			class:'success'
		},
		{
			name: '待核销',
			value: '',
			class:'warning'
		},
		{
			name: '已核销',
			value: ''
		},
		{
			name: '退款',
			value: '',
			class:'error'
		},
	])
	const returnClass=computed(()=>{
		if(props.status=='已退款'){
			return 'gray';
		}
		const item=list.value.find(v=>props.status.includes(v.name))
		return item?item.class:''
	})

</script>

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

		&.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);
		}
		&.error {
			border-color: #FF1C1C;
			color: #FF1C1C;
			background: rgba(255, 28, 28, 0.18);
		}
		&.gray{
			color: #bbb;
			background-color: #f7f7f7;
			border-color: #bbb;
		}
	}
</style>