<template>
	<div>
		<div class="m-order">
			<div class="order-img"><el-image style="width: 60px;height: 60px;" :src="value.payload.order.img" fit="fit"></el-image></div>
			<div class="order-info">
				<div class="title">{{value.payload.order.name}}</div>
				<div class="price">￥{{value.payload.order.price}}</div>
			</div>
			<div class="status info" v-if="value.payload.order.status=='0'">未支付</div>
			<div class="status primary" v-if="value.payload.order.status=='1'">待使用</div>
			<div class="status success" v-if="value.payload.order.status=='2'">已完成</div>
			<div class="status danger" v-if="value.payload.order.status=='3'">已退款</div>
			<div class="status warn" v-if="value.payload.order.status=='4'">退款中</div>
			<div class="status warn" v-if="value.payload.order.status=='5'">已关闭</div>
		</div>
	</div>
</template>


<script>
export default {
	props: {
		isMy: {
			type: [Boolean, Number],
			default: false
		},
		value: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {};
	},
}
</script>

<style>
.m-order{background-color: #fff;border-radius: 5px;display: flex;font-size: 14px;position: relative;min-width: 400px;}
.m-order .order-img image{width: 60px;height: 60px;}
.m-order .order-info {padding: 10px;}
.m-order .order-info .title{font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.m-order .order-info .price{font-size: 14px;color: #f00;}
.m-order .status{position: absolute;right: 0;bottom: 0;border-radius: 5px 0 5px 0;background-color: #909399;font-size: 12px;color: #fff;padding: 5px;}
.m-order .status.info{background-color: #909399;}
.m-order .status.primary{background-color: #409eff;}
.m-order .status.success{background-color: #67c23a;}
.m-order .status.danger{background-color: #f56c6c;}
.m-order .status.warn{background-color: #e6a23c;}
</style>