<template>
	<!-- 外卖订单卡片 -->
	<view 
	class="orderItemss"  
	@tap="operation" 
	data-action="orderDetails" 
	:data-orderid='dataorder.order_id'
	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="beizhu flex jus-b ali-c" style="border-bottom: 1px solid #f1f1f1;">
			<text class="price">{{dataorder.username_tel}}</text>
		</view>
		<!-- 上面的是 -->
		<!-- reorder -->
		<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-if="dataorder.message">退款原因：{{dataorder.message||''}}</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">
				<block  v-for="(action,index) in dataorder.order_operation"  :key="index">
					<view :class="action.class_name" :data-orderid='dataorder.order_id' @tap.stop="operation"  :data-action='action.way' :data-is_ld='dataorder.buytype'>{{action.name}}</view>
				</block>
			</view>
		</view>
	</view>
</template>
<script>
	import {immediatelyOrder,refuseOrder,consentEleRefund,refuseEleRefund} from "@/utils/api/api.js";
	export default {
		name:"orderItemss",
		props:["dataorder","tabindex","index","status"],
		data() {
			return {
				
			};
		},
		mounted() {
			console.log('啊啊啊啊')
		},
		updated (){
			console.log('玩了')
		},
		watch:{
			dataorder(){
				console.log('变了')
			}
		},
		computed: {
			staticUrl () {//静态资源地址
				return this.$store.state.staticUrl;
			}
		},
		methods:{
			/**
			 * 订单操作
			 * 
			 */
			operation (event) {
				let action = event.currentTarget.dataset.action;
				let order_id = event.currentTarget.dataset.orderid;
				let index=this.index;
				uni.setStorageSync('obj',{order_id,index});
				console.log(order_id,'aaa')
				switch (action) {
				  case 'immediatelyOrder': //立即接单 OK
					this.immediatelyOrderfun(order_id, action,index);
					break;
				  case 'refuseOrder': //拒接此单 OK
					this.refuseOrderfun(order_id, action,index);
					break;
				  case 'orderDetails':  //订单详情
					this.toxq(order_id,order_id);
					break;
				  case 'consentEleRefund'://同意退款
					  this.consentEleRefund(order_id,action,index);
					  break;
				  case 'refuseEleRefund'://拒绝退款
					  this.refuseEleRefund(order_id,action,index);
					  break;
				  default:
					//其他的 退款啥的 处理ok了
					console.info("1111",action);
					break;
				}
			},		
			async consentEleRefund(order_id, action,index){ // 同意退款
				let res = await consentEleRefund({
					order_id:this.dataorder.order_id,
				});
				this.$api.msg(res.msg);
				if(res.code==0){
					this.$emit("reload",{index});
				}
			},
			// 拒绝退款
			async refuseEleRefund(order_id, action,index){
				let res = await refuseEleRefund({
					order_id:this.dataorder.order_id,
				});
				this.$api.msg(res.msg);
				if(res.code==0){
					this.$emit("reload",{index});
				}
			},
			
			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(order_id, action,index){
				let res = await immediatelyOrder({
					order_id:this.dataorder.order_id,
				})
				this.$api.msg(res.msg);
				if(res.code==0){
					this.$emit("reload",{index});
				}
			},
			//商家拒绝接单的方法
			async refuseOrderfun(order_id, action,index){
				let res = await refuseOrder({
					order_id:this.dataorder.order_id,
				});
				this.$api.msg(res.msg);
				if(res.code==0){
					this.$emit("reload",{index});
				}
			}
		}
	}
</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{
			border-radius:4upx;
			margin-left: 20upx;
			width:152upx;
			height:62upx;
			line-height: 62upx;
			text-align: center;
			background:rgba(255,102,0,1);
			color:#FFFFFF;
			border:0;
		}
	}
	
}
</style>
