<template>
	<!-- 酒店订单 酒店商家查看到的 -->
	<!-- 订单京津冀 -->
	<view class="hotelOrder yocode">
		<view class="basetopTab flex ali-c" >
			
			<view v-for="(item,index) in navlist" :key="index" class="basetabitem flex1 flexc" @tap="taggletabs(item.status_id)">
				<view class="title" :class="{active:tabactive==item.status_id}">{{item.status_name}}</view>
			</view>
			
		</view>
		
		<!-- 订单列表 -->
		<view class="HotelorderList">
			<view class="HotelOrderItem" v-for="(item,index) in orderList" :key="index">
				<view class="infosbox flex ali-c ">
					<image class="imgs" :src="staticUrl+item.photo" mode=""></image>
					<view class="infosbox_right flex1">
						<view class="titlebox flex ali-c jus-b">
							<view class="titles">{{item.title}}</view>
							<text class="orderStatus">{{item.order_status}}</text>
							
							
							
							<!-- <text class="orderStatus" v-if="item.order_status==0">待付款</text>
							<text class="orderStatus" v-else-if="item.order_status==1">待处理</text>
							<text class="orderStatus" v-else-if="item.order_status==2">已完成</text> -->
						</view>
						<view class="ordertime flex ali-c jus-b">
							<view class="flex ali-c">
								<text>{{item.stime}} </text>
								<text class="liens">-</text>
								<text>{{item.ltime}}</text>
							</view>
							<text class="endssum">共{{item.day}}晚</text>
						</view>
						<view class="userTel">
							<text class="tels">客户电话 {{item.mobile}}</text>
							<text>入住时间  {{item.last_time}}</text>
						</view>
					</view>
				</view>
				<view class="ali-c jus-e amountprice">
					合计:￥{{item.amount}}
				</view>
				<!-- 订单信息end -->
				<view class="footbodyorder flex ali-c jus-b">
					<!-- 退款 -->
					<view class="footbodyorder_l">
						<!-- <text class="tkmsg">新的退款申请，请及时处理</text> -->
						已付： <text style="color: #FF6900;">¥{{item.amount}}</text>
					</view>
					<!-- 退款 -->
					<view class="footbodyorder_r flex ali-c">
						
						<view class="btns iusbg isend ml-20" :data-orderid="item.order_id" @tap="orderDetails">查看订单</view>
						
						<view class="btns iusbg isend ml-20" v-if="item.order_status.indexOf('退')!=-1"  @tap="hotelConsentRefund(item)">同意退款</view>
						
						<view class="btns iusbg isend ml-20" v-if="item.order_status.indexOf('退')!=-1"   @tap="hotelRefuseRefund(item)">拒绝退款</view>
						
						
						
						
						<view class="btns iusbg isend ml-20"  v-if='item.order_status=="等待入住"' :data-orderid="item.order_id" @tap="affirmIntakefun">确认入住</view>
							
						<!-- <navigator url="/pages/myStore/HotelRefundExamine?id=11" class="btns iusbg isend">立即处理</navigator> -->
						<!-- <view class="ali-c" v-if="tabactive==0"> -->
						<!-- </view> -->
						<!-- <view class="ali-c" v-if="tabactive==2"> -->
							<!-- <view class="btns iusbg isend ml-20" :data-orderid="item.order_id"  @tap="orderDetails">查看订单</view> -->
						<!-- </view> -->
					</view>
				</view>
			</view>
			
			<empty v-if="orderList.length==0"></empty>
			
		</view>
		
	</view>
</template>

<script>
	// import { shopHotel,complete} from "@/utils/api/shop.js";
	import empty from "@/components/empty/empty.vue";
	import {hotelStatus,hotelOrder,hotelConsentRefund,hotelRefuseRefund,affirmIntake} from "@/utils/api/hotel.js";
	
	export default {
		components:{
			empty,
		},
		data(){
			return{
				tabactive:"all",//全部0 售后2
				page:0,
				orderList:[],
				isallshow:false,
				navlist:[],//tab nav
			}
		},
		computed: {
			staticUrl () {//静态资源地址
				return this.$store.state.staticUrl;
			},
			staticUrl1(){
				return this.$store.state.staticUrl1;
			},
			uploadurl(){
				return this.$store.state.uploadurl;
			}
		},
		onLoad(){
			this.shopHotelfun();
			
			this.gethotelStatus();
		},
		onReachBottom(){
			console.log("11");
			
			if(!this.isallshow){
				this.shopHotelfun();
			}
			
		},
		methods:{
			//获取酒店订单状态
			async gethotelStatus(){
				let res = await hotelStatus({
					
				});
				if(res.code==0){
					this.navlist = res.data;
				}else{
					this.$api.msg(res.msg);
				}
			},
			//确认核销 确认入驻接口
			affirmIntakefun(e){
				var that = this;
				var orderid = e.currentTarget.dataset.orderid;
				uni.showModal({
				  title: '确认核销',
				  content: '您确定客户入住吗？',
				  showCancel: true,
				  cancelText:"否",
				  cancelColor:'skyblue',
				  confirmText:"是",
				  confirmColor: 'skyblue',
				  success: (res)=> {
					 if (res.cancel) {
					 } else {
					  affirmIntake({order_id:orderid}).then(res=>{
						if(res.code==-2){
						  uni.showToast({
							title: res.msg,
						  })
						}
						if(res.code==0){
							this.$api.msg("操作成功");
							
							setTimeout(()=>{
								this.orderList = [];
								this.page = 0;
								this.isallshow = false;
								this.shopHotelfun();
							},1500)
							
						}
					  })
					 }
				  },
			    })
			},
			//进入详情
			orderDetails(e){
			    var orderid = e.currentTarget.dataset.orderid;
			    uni.navigateTo({
			      url: '/pages/hotelOrderDetaile/hotelOrderDetaile?order_id='+orderid+'&shop=shop'
			    })
			},
			//获取酒店订单列表
			async shopHotelfun(){
				this.page++;
				let res = await hotelOrder({
					status:this.tabactive,
					page:this.page
				});
				if(res.data.length!=0){
					this.orderList = [...this.orderList,...res.data];
				}else{
					this.$api.msg("没有更多了哦~");
					this.isallshow = true;
				}
				
			},
			//切换tab
			taggletabs(ids){
				if(ids!=this.tabactive){
					this.tabactive = ids;
					this.orderList = [];
					this.page = 0;
					this.isallshow = false;
					this.shopHotelfun();
				}
				
			},
			//酒店订单同意退房
			async hotelConsentRefund(data){
				let res = await hotelConsentRefund({
					order_id:data.order_id,
				});
				if(res.code==0){
					this.$api.msg(res.msg);
					
					this.orderList = [];
					this.page = 0;
					this.isallshow = false;
					this.shopHotelfun();//刷新列表
					
				}else{
					this.$api.msg(res.msg);
				}
			},
			//酒店订单拒绝退房
			async hotelRefuseRefund(data){
				let res = await hotelRefuseRefund({
					order_id:data.order_id,
				});
				if(res.code==0){
					this.$api.msg(res.msg);
					
					this.orderList = [];
					this.page = 0;
					this.isallshow = false;
					this.shopHotelfun();//刷新列表
					
				}else{
					this.$api.msg(res.msg);
				}
			}
			
		}
	}
</script>

<style lang="scss">
	@import "./hotelOrder.scss"
</style>
