<template>
	<!-- 商家看到的 酒店订单详情 -->
	<!-- 商家订单 -->
	<view class="orderdetails yocode" >
		<!-- 头部 -->

		<view class="orderDetailsHead flex jus-b ali-c" v-if="orderinfos.order_status==1">
			<view class="heleftss">
				<!-- <view class="title">亲您已成功预定房间</view>
				<view class="time">请尽快到店核销订单，祝您入住愉快</view> -->
				
				<view  class="title" v-if="orderinfos.order_status==0" >待付款</view>
				<view  class="title" v-if="orderinfos.order_status==1" >待处理</view>
				<view  class="title" v-if="orderinfos.order_status==2" >已完成</view>
			</view>
			
		</view>
		<!-- 头部end -->
		
		<view class="HotelOrder">
			<view class="orderItems">
				<view class="orderinfos flex ali-c jus-b">
					<image class="orderimgs" :src="staticUrl+orderinfos.photo" mode=""></image>
					<view class="ordermingxi flex1">
						<view class="titlebox flex ali-c jus-b">
							<view class="title">{{orderinfos.title}}</view>
						
						</view>
						<!-- 时间 -->
						<view class="orderTiems flex ali-c jus-b">
							<view class="flex ali-c">
								
								<text class="rili">{{orderinfos.stime}}</text>
								<text class="text">- </text>
								<text class="rili">{{orderinfos.ltime}}</text>
							</view>
							<text class="endsum"> 共{{orderinfos.day}}晚</text>
						</view>
						<view class="Hotelcode">
							<view class="text" v-if="orderinfos.is_zc==0">{{room.typename}}丨不含早丨Wi-Fi</view>
							<view class="text" v-if="orderinfos.is_zc==1">{{room.typename}}丨含早丨Wi-Fi</view>
						</view>
					</view>
				</view>
				<view class="msgsbox mt-10">订单确认后，不可取消/变更，如未入住，酒店将扣除全额房费房间整晚保留，请及时入住。</view>
			</view>
			<!-- 联系商家 和地图导航 -->
			<view class="tabsliens flex ali-c">
				<!-- <view class="tabsliensItem flex1 flexc" @tap="togbs" v-if="hotel.lat && hotel.lng" >
					<image class="imgs" src="/static/news/fujinL@2x.png" mode=""></image>
					<text class="text">地图导航</text>
				</view> -->
				 <!-- v-else -->
				<view class="tabsliensItem flex1 flexc" @tap="toptkefu" >
					<image class="imgs" src="/static/news/fujinL@2x001.png" mode=""></image>
					<text class="text">平台客服</text>
				</view>
				<view class="tabsliensItem flex1 flexc" @tap="tostoreTel">
					<image class="imgs" src="/static/news/telicon001.png" mode=""></image>
					<text class="text">联系客户</text>
				</view>
			</view>
		</view>
		
		
		<view class="countprices">
			<view class="paytypes flex jus-b">
				<text class="text">总金额</text>
				<view class="prices">¥{{orderinfos.price*orderinfos.day*orderinfos.num}}</view>
			</view>
			<view class="paytypes flex jus-b">
				<text class="text">单价</text>
				<view class="prices">¥{{orderinfos.price*orderinfos.day}}</view>
			</view>
			<view class="paytypes flex jus-b twopaytypes">
				<text class="text">优惠金额 <text style="color: #ff6900;"></text></text>
				<view class="prices">-¥{{orderinfos.coupon_price/100}}</view>
			</view>
			<view class="paytypes flex jus-b twopaytypes">
				<text class="text">优惠后金额</text>
				<view class="prices">¥{{orderinfos.amount}}</view>
			</view>
		</view>
		
		
		<!-- 输入框 入住信息 -->
		<view class="inputxboxs">
			<view class="titletop">入住信息</view>
			<view class="clllinputbox flex ali-c">
				<view class="titles">房间数</view>
				<text class="childtext flex1">{{orderinfos.num}}间</text>
				<image class="jiantousi" src="/static/news/youjiant.png" mode=""></image>
			</view>
			
			<!-- 入住人 -->
			<view class="ruzhuren flex ali-c">
				<view class="rztitle">
					入住人
				</view>
				<view class="ruzhuren_r flex1">
					<view class="itemsfinput" v-for="(item,index) in orderinfos.name" :key="index">
						<view class="inputs">{{item}}</view>
					</view>
					
				</view>
			</view>
			<!-- 入住人end -->
			
			<view class="iteminputchbox flex ali-c">
				<view class="title">联系电话</view>
				<view class="inputs">{{orderinfos.mobile}}</view>
			</view>
			
			<view class="iteminputchbox onebor  flex ali-c">
				<view class="title">到店时间</view>
				<view class="inputs">{{orderinfos.last_time}}</view>
			</view>
			
			
		</view>
		

	</view>
</template>

<script>
	
	
	import {hotelOrderDetails} from "@/utils/api/hotel.js";
	export default {
		components:{
		},
		data() {
			return {
				order_id:"",//订单id
				hotel:{},
				room:{},
				order:{},
				
				//密码弹窗
				payFlag: false,
				showmoney:0,//显示弹窗输入支付密码的金额
				msg:"酒店余额支付",
				paymentPwd: '' ,//可以写默认值
				money:0,
				orderData:{},
				
				daojishi:0,//倒计时
				
				hdate:0,//小时
				Mdate:0,//分
				Sdate:0,//秒
				djshikaig:false,
				
				
				orderinfos:{},//订单信息
			};
		},
		computed: {
			staticUrl () {//静态资源地址
				return this.$store.state.staticUrl;
			},
			CONFIG(){
				return this.$store.state.CONFIG;
			}
		},
		onLoad(opdata) {
			this.order_id = opdata.order_id;
			this.order_details();
		},
		methods:{
			
			async order_details(){
				let res = await hotelOrderDetails({
					order_id:this.order_id,
				});
				console.log(res);
				if(res.code==0){
					
					
					let orderdata = res.data;
					orderdata.name = orderdata.name.split("|#|");
					
					this.orderinfos = orderdata;//res.data;
					
				}else{
					this.$api.msg(res.msg);
				}
				
			},
			
			//地图导航
			togbs(){
				
				uni.getLocation({
				    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				    success:  (res)=> {
					const latitude = res.latitude;
					const longitude = res.longitude;
						uni.openLocation({
							latitude: parseFloat(this.hotel.lat),
							longitude: parseFloat(this.hotel.lng),
							success:  ()=> {
								console.log('success');
							}
						});
					}
				});

			},
			//平台ke'fu客服
			toptkefu(){
				uni.makePhoneCall({
				    phoneNumber: "4008073023",//this.CONFIG.site.tel, 先写死 客服部的电话
				});
			},
			//联系客户
			tostoreTel(){
				uni.makePhoneCall({
				    phoneNumber: this.orderinfos.mobile //仅为示例
				});
			},
		},

	}
</script>

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