<template>
	<view class="">
		<view class="main">	
			<view class="top">
				<text>{{item.dining_room_id == '1' ? '西单食堂' : '银座食堂'}}</text>
				<text class="status" v-if='item.order_status == 1'>预定成功</text>
				<text class="status" v-if='item.order_status == 0'>已取消</text>
			</view>
			<view class="middle">
				<view class="uni-list">
					<view class="uni-list-cell-left image" v-for="(item1, index) in item.orderDetails" :key="item1.id">
						<image style="width: 100%;" mode="widthFix" :src="item1.picture" />
						<text>{{item1.foods_name}}</text>
					</view>
				</view>
				<button @click='cancel(item)' v-if='item.order_status == 1' v-cloak>取消订单</button>
			</view>
			<view class="bottom">
				<view class="evaluate" v-if='item.order_status != 1'>
					<button class="ev" @click='evDining(item)' >食堂评价</button>
					<button class="ev" @click='evFood(item)' >菜品评价</button>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="top">
				<view><text></text>订单信息</text></view>
				<text class="">下单时间</text>
				<text class="status">{{item.order_time}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item:{
						id:'11',
						dining_room_id : 1,
						order_status : 1,
						orderDetails : [
							{
								id: '111',
								picture : '../../static/food/33.jpg',
								foods_name : '肉'
							}
							],
						order_time : '2019-12-13 12:30'
					}
			}
		},
		methods: {
			cancel : function(){
				alert('取消成功');
			}
		}
	}
</script>

<style>
	.main{
		border-radius: 10rpx;
		border: #B2B2B2 1rpx solid;
		margin:20rpx;
		background: white;
	}
	.middle{
		padding: 5rpx;
	}
	.image {
		width: 20%;
		float:left;
	}
	.status {
		/* color: #0066CC; */
		float: right;
	}
	text {
		font-size: 35rpx;
	}
	.ev{
		width: 50%;
		float: left;
	}
</style>
