<template>
	<!-- 外卖订单卡片 -->
	<view class="orderItemss"  @tap="toxq" hover-class="uni-list-cell-hover">
		
		<view class="shopinfo flex ali-c">
			<image class="imgs" :src="staticUrl+dataorder.photo" mode=""></image>
			<view class="titlebox flex1">
				<view class="title flex ali-c jus-b">
					<text class="bt">{{dataorder.shop_name}}</text>
					<view class="zt" >{{dataorder.order_status}}</view>
				</view>
				<view class="time">{{dataorder.create_time}}</view>
			</view>
		</view>
		<!-- 上面的是 -->
		
		<view class="mingxi oneline" v-for="(item,index) in dataorder.products" :key="index">{{item.productname}} x {{item.num}}</view>
		<view class="beizhu flex jus-b ali-c">
			<text class="beizhutext oneline flex1" v-if="dataorder.remark">备注：{{dataorder.remark}}</text>
			<text class="beizhutext oneline flex1" v-else></text>
			<text class="price">合计：¥{{dataorder.total}}</text>
		</view>
		<view class="orderItemss_foot jus-b">
			<view class="titmeboxs ali-c" >
				<text style="color: #FF6900;" ></text>
			</view>
			
			<view class="btnbox flex flex1 jus-e">
				<view class="btns"   @tap.stop="toxq" >查看详情</view>
				<view class="btns"  v-if="dataorder.status==1"   @tap.stop="immediatelyOrderfun" >立即接单</view>
				<view class="btns"  v-if="dataorder.status==1"   @tap.stop="refuseOrderfun" >拒绝接单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {immediatelyOrder,refuseOrder} from "@/utils/api/api.js";
	export default {
		name:"orderItemss",
		props:["dataorder","tabindex","index"],
		data() {
			return {
				
			};
		},
		computed: {
			staticUrl () {//静态资源地址
				return this.$store.state.staticUrl;
			}
		},
		methods:{
			toxq(){
				uni.navigateTo({
				    url: '/pages/order/detail/detail?id='+ this.dataorder.order_id 
				});
			},
			//删除订单
			deleteOrderFun(){
				this.dataorder.index = this.index;
				
				this.$emit('deleteOrderFun',this.dataorder);
			},
			//立即接单 方法 外卖的
		 	async immediatelyOrderfun(){
				let res = await immediatelyOrder({
					order_id:this.dataorder.order_id,
				});
				if(res.code==0){
					this.$api.msg(res.msg);
					this.$emit("reload",{});//重新加载
				}else{
					this.$api.msg(res.msg);
				}
			},
			//商家拒绝接单的方法
			async refuseOrderfun(){
				let res = await refuseOrder({
					order_id:this.dataorder.order_id,
				});
				if(res.code==0){
					this.$api.msg(res.msg);
					this.$emit("reload",{});//重新加载
				}else{
					this.$api.msg(res.msg);
				}
			}
		}
	}
</script>

<style lang="scss">
	
.uni-list-cell-hover{
		background: #fbfbfb;
		opacity: .7;
	}
//单个订单
.orderItemss{
	background: #FFFFFF;
	padding: 30upx 20upx;
	border-radius:14upx;
	margin-bottom: 20upx;
	.shopinfo{
		.imgs{
			width: 71upx;
			height: 71upx;
			margin-right: 25upx;
		}
		.titlebox{
			.title{
				font-family:PingFang SC;
				font-weight:bold;
				.bt{
					font-size:28upx;
					color:rgba(51,51,51,1);
					
				}
				.zt{
					font-size:30upx;
					color:rgba(255,105,0,1);
					
				}
			}
			.time{
				font-size:24upx;
				color:rgba(51,51,51,1);
				margin-top: 5upx;
			}
		}
	}
	.mingxi{
		margin-top: 10upx;
		margin-bottom: 10upx;
		font-size:30upx;
		color:rgba(51,51,51,1);
		border-bottom: 1px solid rgb(241, 241, 241);
	}
	.beizhu{
		margin-top: 20upx;
		
		// border-top: 1px solid #EFF0F4;
		height: 80upx;
		line-height: 80upx;
		.beizhutext{
			font-size:28upx;
			color:rgba(51,51,51,1);
		}
		.price{
			font-size:30upx;
			color:rgba(51,51,51,1);
		}
	}
	
	//底部
	.orderItemss_foot{
		border-top: 1px solid #EFF0F4;
		padding-top: 24upx;
		.titmeboxs{
			color:#333333;
			font-size: 30upx;
			.shuzi{
				color:#FF6900;
			}
		}
		.msgtuikuan{
			font-size:32upx;
			color:rgba(255,102,0,1);
		}
		.btnbox{
			
		}
		.btns{
			width:152upx;
			height:62upx;
			line-height: 62upx;
			text-align: center;
			border:1px solid rgba(204,204,204,1);
			border-radius:4upx;
			font-size:26upx;
			color:rgba(51,51,51,1);
			margin-left: 20upx;
		}
		.btns1{
			background:rgba(255,102,0,1);
			color:#FFFFFF;
			border:0;
		}
	}
	
}
</style>
