<template>
	<view class="default-box-padding bg-fff border-r-12 u-m-t-20" v-if="data.length">
		<view class="u-font-32">
			<text>共</text>
			<text class="color-main font-bold"> {{goodsNumber}}</text>
			<text>份菜品</text>
		</view>
		<view class="u-m-t-20 list">
			<view class="item  u-m-b-20" v-for="(item,index) in data" :key="index">
				<view class="u-flex u-col-top">
					<view>
						<image class="img" :src="item.coverImg" mode=""></image>
					</view>
					<view class="u-p-l-30 u-flex-1">
						<view class="u-flex u-row-between u-col-top">
							<view>{{item.name}}</view>
							<view class="u-text-right">
								<view>￥{{item.salePrice}}</view>
								<view class="u-m-t-10 u-font-24">X{{item.number}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="u-flex u-row-right gap-20 u-m-t-20">
					<my-button :height="60" color="#333" plain type="cancel" shape="circle">更多操作</my-button>
					<my-button :width="168" :height="60" plain shape="circle">退菜</my-button>
				</view>
			</view>
		</view>

		<view class="bg-gray u-p-20 u-m-t-20 ">
			<view>备注</view>
			<view class="u-m-t-10">无</view>
		</view>
		<view class="u-m-t-40">
			<view class="u-flex u-row-between border-bottom u-p-b-20">
				<view class="tag no-pay">
					未支付
				</view>
				<view>
					<text>小计￥</text>
					<text class="font-bold u-font-32">{{allPrice}}</text>
				</view>
			</view>

			<view class="u-flex u-row-between u-m-t-20">
				<view></view>
				<view>
					<text>总计￥</text>
					<text class="font-bold u-font-32">{{allPrice}}</text>
				</view>
			</view>
			<view class="u-m-t-30">
				<my-button type="cancel" :color="color.ColorMain">重新打印</my-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue';
	import color from '@/commons/color.js'
	const props = defineProps({
		data: {
			type: Array,
			default: () => []
		}
	})
	const allPrice = computed(() => {
		return props.data.reduce((prve, cur) => {
			return prve + cur.salePrice * cur.number
		}, 0).toFixed(2)
	})

	const goodsNumber = computed(() => {
		let result = 0
		result = props.data.reduce((prve, cur) => {
			return prve + cur.number
		}, 0)
		return result
	})
</script>

<style lang="scss" scoped>
	.img {
		width: 70rpx;
		height: 70rpx;
	}
	.border-bottom{
		border-color: rgb(240, 240, 240);
	}
	.tag {
		padding: 2rpx 8rpx;
		border-radius: 8rpx;

		&.no-pay {
			background-color: rgb(170, 170, 170);
			color: #fff;
		}
	}
</style>