<style>
    .HotelSure{
        width:1200px;
        /* margin:20px auto; */
        padding: 0 20px 20px 20px;
        display: flex;
        background-color: white;
    }
    .HS_LeftInfo{
        display: inline-block;
        width:792px;
        height:auto;
    }
    .HS_RightList{
        width:388px;
        display: inline-block;
        margin-left:20px;
        height:auto;
    }
    .HS_div1{
        width:100%;
        height:190px;
        border:1px solid #E0E0E0;
    }
    .HS_divFirst{
        margin:32px 0 21px 20px;
    }
    .Hs_OneType{
        color:#2EB000;
        font-size:18px;
        font-weight: bold;
        display: flex;
        align-items: center;
    }
    .HS_divTwo{
        margin:0 0 21px 20px;
    }
    .Hs_OneType img,.HS_divThree img{
        margin-right:10px;
    }
    .HS_divThree{
        color:#FFA835;
        font-size:18px;
        font-weight: bold;
        margin-left:20px;
        display: flex;
        align-items: center;
    }
    .HS_div2{
        width:100%;
        border:1px solid #E0E0E0;
        margin:20px 0;
        overflow: hidden;
        padding-bottom:20px;
    }
    .HS_bookTitle{
        padding-left:20px;
        width:100%;
        background-color: #EDF4FF;
        color:#111111;
        font-size:12px;
        font-weight: bold;
        height:29px;
        display: flex;
        align-items: center;
        border-bottom:1px solid #E0E0E0;
    }
    .HS_div2One{
        margin:15px 0 0 20px;
    }
    .HS2_title{
        color:#888888!important;
    }
    .HS_div2 ul li,.HS_div3 ul li{
        display: inline-block;
        margin-right:21px;
        font-size:12px;
        color:#111111;
    }
    .HS_div3>div:nth-child(2){
      padding: 20px;
    }
    .HS_div3>div:nth-child(2)>div{
      display: flex;
      margin-bottom: 15px;
    }
    .HS_div3>div:nth-child(2)>div:last-child{ 
      margin-bottom: 0;
    }
    .HS_div3One{
        margin:15px 0 0 20px;
        color:#333333;
    }
    .HS_Line{
        width:30px;
        height:1px;
        display:inline-block;
        position: relative;
        top:-3px;
        margin-right:10px;
        border-top:1px solid #111111;
    }
    .HS_UpdateDate{
        width:84px;
        height:32px;
        border:1px solid #EE4454;
        background: #fff;
        color:#EE4454;
        outline: none;
        border-radius: 3px;
        cursor: pointer;
    }
    .HS_roomNum .el-input__inner{
        height:30px;
        border:none;
        border-radius:0;
        border-bottom:1px solid #DDDDDD;
    }
    .HS_fangfei{
        display: inline-block;
        width:90px;
        height:86px;
        border:1px solid #BBC9DA;
        background-color: #fff;
        font-size:14px;
        margin-right:10px;
        text-align: center
    }
    .HS_fangfei_Top{
        width:100%;
        height:32px;
        margin-bottom:10px;
        background-color: #F5F7F8;
        line-height: 32px;
        color:#666666;
    }
    .HS_fangfei span{
        color:#EE4454;
    }
    .HS_div3{
        width:792px;
        height:auto; 
        overflow: hidden;
        position: relative;
        border:1px solid #E0E0E0;
    }
    .HS_bookTitle span{
        color:#FFA835;
        font-size:12px;
        position: absolute;
        right:20px;
    }
    .HS_bookTitle span i{
        position: relative;
        top:1px;
        margin-right:3px;
    }
    .HS_wenhao{
        position: relative;
        top: 2px;
        margin-left: 5px;
    }
    .HS_BookMan .el-input__inner{
        height:30px;
        border:0;
        border-radius: 0;
        border-bottom:1px solid #DDDDDD;
    }
    .HS_AreaSelect .el-input__inner{
        height: 30px;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid #DDDDDD;
    }
    .HS_AreaSelect .el-input__icon,.HS_roomNum .el-input__icon{
        line-height: 0;
    }
    .HS_detailAddress .el-input__inner,.HS_Email .el-input__inner{
        height:40px;
        border:0;
        border-radius: 0;
        border-bottom:1px solid #DDDDDD;
    }
    .HS_RightTopImg{
        width:100%;
        height:194px;
    }
    .HS_RightList img{
        width:100%;
        height:100%;
    }
    .HS_HotelRight{
        height:184px;
        padding:17px 20px 20px 20px;
        border:1px solid #E0E0E0;
        border-top:0;
        color:#666666;
    }
    .HS_HtName{
        color:#EE4454;
        font-size:21px;
    }
    .HS_EnName{
        font-size:12px;
        color:#999999;
        margin:8px 0 19px 0;
    }
    .HS_HAddress{
        font-size:12px;
        margin:20px 0;
    }
    .HS_HAddress img{
        width:10px;
        position: relative;
        top:2px;
    }
    .HS_Haohua{
        font-size:14px;
        margin-bottom:10px;
    }
    .f12{
        font-size:12px;
    }
    .C9{
        color:#999999;
        margin-right:20px;
    }
    .HS_RoomInfo li{
        display: block;
        width:100%;
        font-size:14px;
        margin-top:18px;
    }
    .HS_RoomInfo li span{
        display: inline-block;
    }
    .HS_RightBtm{
        width:100%;
        /* height:160px; */
        margin-top:20px;
        overflow: hidden;
        border:1px solid #E0E0E0;
    }
    .HS_RitTop{
        height:72px;
        background-color: #EDF4FF;
        display: flex;
        padding:0 20px;
        align-items: center;
        position: relative;
    }
    .HS_RitTop_Left{
        color:#111111;
        float:left;
        font-size:20px;
        font-weight: 400;
    }
    .HS_RitPrice{
        float:right;
        font-size:24px;
        color:#EE4454;
        font-size:24px;
        position: absolute;
        right:20px
    }
    .HS_RitPrice i{
        font-style: normal;
        margin-right:5px;
        font-size:14px;
    }
    .HS_RitBottom{
        padding:20px;
        font-size:14px;
        color:#111111;
    }
    .HS_RitBottom span{
        display:inline-block;
    }
    .HS_btLine{
        width:245px;
        height:1px;
        margin:0 10px;
        position: relative;
        top:-3px;
        border-top:1px dashed #999999;
    }
    .HS_btLineTwo{
        width:204px;
        height:1px;
        margin:0 10px;
        position: relative;
        top:-3px;
        border-top:1px dashed #999999;
    }
    .HS_RitBottom>div{
        margin-bottom:15px;
    }
    .HD_payBtn{
        width:100%;
        height:66px;
        background-color: #EE4454;
        color:#fff;
        outline: none;
        border:none;
        cursor: pointer;
        margin-top:30px;
        font-size:18px;
        border-radius: 4px;
    }
    .HD_payBtn:hover{
        opacity: 0.8;
    }
    .HS_BookMan .el-input__icon{
        line-height: 0;
    }
    .HS_FFEI:last-child{
        visibility: hidden;
    }
    .cantBaoChild{
        color:red;
    }
    .disBtn{
        background-color: gray;
        cursor: default;
    }
    .disBtn:hover{
        opacity: 1;
    }
</style>


<template>
    <div class="HotelSure" v-loading="loading">
        <div class="HS_LeftInfo">
            <div class="HS_div2">
                <div class="HS_bookTitle">预订信息</div>
                <div class="HS_div3One">
                    <ul>
                        <li class="HS2_title">订单号</li>
                        <li>{{details.model.ThirdOrderNo}}</li>
                    </ul>
                </div>
                <div class="HS_div2One">
                    <ul>
                        <li class="HS2_title">房型信息</li>
                        <li>
                            <div>
                                <template v-if="details.parmResult.roomType==1">单人</template>
                                <template v-if="details.parmResult.roomType==2">双人</template>
                                <template v-if="details.parmResult.roomType==3">双</template>
                                <template v-if="details.parmResult.roomType==4">三人间</template>
                                <template v-if="details.parmResult.roomType==5">4床</template>
                                <template v-if="details.parmResult.roomType==6">日式房间</template>
                                <template v-if="details.parmResult.roomType==7">和洋室</template>
                                <template v-if="details.parmResult.roomType==8">半开房</template>
                                <template v-if="details.parmResult.roomType==9">其他的</template>
                            </div>
                        </li>
                    </ul>
                </div> 
                <div class="HS_div2One">
                    <ul>
                        <li class="HS2_title">入住日期</li>
                        <li>
                            <span>{{details.model.CheckIn.split('T')[0]}}</span>
                            <div class="HS_Line"></div>
                            <span>{{details.model.CheckOut.split('T')[0]}}</span>
                        </li>
                    </ul>
                </div>
                <div class="HS_div2One HS_roomNum">
                    <ul>
                        <li class="HS2_title">房间数量</li>
                        <li>
                            {{details.model.Number}}
                        </li>
                    </ul>
                </div>
            </div>
            <div class="HS_div3">
                <div class="HS_bookTitle" >
                    入住信息<span></span>
                </div>
                <div>
                  <div>
                    <label class="HS2_title">预订人：</label>
                    <div>{{details.parmResult.guestLastName + details.parmResult.guestFirstName}}</div>
                  </div>
                  <div>
                    <label class="HS2_title">当前地址：</label>
                    <div>{{details.parmResultRoomInfo.guestAddress}}</div>
                  </div>
                  <div>
                    <label class="HS2_title">Email：</label>
                    <div>{{details.parmResultRoomInfo.guestEmail}}</div>
                  </div>
                  <div>
                    <label class="HS2_title">电话：</label>
                    <div>{{details.parmResultRoomInfo.guestPhoneNumber}}</div>
                  </div>
                  <div>
                    <label class="HS2_title">客户备注：</label>
                    <div>{{details.model.Remark}}</div>
                  </div>
                </div>
            </div> 
        </div>
        <div class="HS_RightList">
          <div class="HS_RightBtm">
                <div class="HS_RitTop">
                    <span class="HS_RitTop_Left">订单总额</span>
                    <span class="HS_RitPrice">
                        <i>¥</i>{{details.model.TotalPrice}}
                    </span>
                </div>
            </div>
            <div class="HS_RightTopImg">
                <template v-if="details">
                    <img :src="details.model.HotelPic" alt=""/>
                </template>
            </div>
            <div class="HS_HotelRight">
                <div class="HS_HtName">{{details.model.HotelName}}</div>
                <div class="HS_HAddress">
                    <img src="../../../assets/img/hotel/redAddress.png" alt=""/>
                    {{details.parmResult.address}}
                </div>
            </div>
            
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      details: {
        model:{
          ThirdOrderNo: ''
        }
      },
      loading: true
    };
  },
  mounted() {
  },
  created() {
    let id = this.$route.query.ID
    this.loading = true;
    this.apipost(
    "dmc_post_Get_GetJAPAN_OrderDetail",
    {orderId: id},
    res => {
      this.loading = false;
      if (res.data.resultCode == 1) {
        let data = res.data.data
        this.details = data
      } else {
          this.Error(res.data.message);
      }
    })
  },
  methods: {
    
  }
};
</script>
