<template>
	<view class="mealsBox rad8 flex column m-r-24 m-l-24 m-b-24 p-24 bg-w boxshadow">
		<view class="flex">
			<view class="flex3 ofh">
				<view class="fz24 fcb m-t-12">订单号：{{order.order_sn}}</view>
				<view class="fz24 fcb">{{order.order_time | parseTime}}</view>
				<view class="fz32 l-h-18 fb">取餐点：{{order.receive_site_name}}</view>
				<view class="spuGmap flex m-t-12 ofa">
					<view class="m-r-12" v-for="(ps,index) in order.product_snapshot" :key="index">
						<u--image :src="ps.spu_photo[0]" width="147rpx" height="110rpx" radius="4rpx" />
					</view>
				</view>
			</view>
			<view class="flex1 flex column md">
				<view class="fz28 fb fcm l-h-18">{{order.shipment_status}}</view>
				<view class="priceBox fz36 fb">
					¥{{Number(order.transport_price) + Number(order.pack_price) + Number(order.total_price) | formatPrice}}
				</view>
				<view class="fz24 fcb">共{{order.total_num}}件</view>
			</view>
		</view>
		<view class="m-t-24 flex mr">
			<view class="numberBut bg-m fci rad8 fz28 fb flex mac mc" :key="foodSn">
				{{ foodSn }}
			</view>
			<view class="nullBut border fcb rad8 fz28 flex mac mc m-l-24" style="">
				申请售后
			</view>
		</view>
	</view>
</template>

<script>
	import {
		parseTime,
		formatPrice
	} from '@/utils/index.js'
	export default {
		name: 'orderItem',
		data() {
			return {
				foodSn: '取餐号', //取餐号 文字轮播
				intervalId: null, // 存储定时器ID，用于清除定时器
			}
		},
		onReady() {
			this.intervalId = setInterval(() => {
				this.foodSn = this.foodSn === '取餐号' ? this.order.food_sn : '取餐号'
			}, 1200)
		},
		destroyed() {
			// 清除定时器，避免内存泄漏
			clearInterval(this.intervalId);
		},
		props: {
			order: {
				type: Object,
				deep: true
			}
		},
		filters: {
			parseTime, //日期 格式化
			formatPrice //价格 格式化
		},
	}
</script>

<style lang="scss" scoped>
	.spuGmap {
		height: 110rpx;
	}

	.priceBox {
		margin-top: 85rpx;
	}

	.numberBut {
		width: 130rpx;
		height: 48rpx;
	}

	.nullBut {
		width: 159rpx;
		height: 48rpx;
	}
</style>