<template>
    <view class="hotel-detail">
      <scroll-view
        ref="scrollView"
        scroll-y="true"
        style="height: 1px;flex: 1;box-sizing: border-box;"
        @scroll="scroll"
      >
        <view
          class="media"
          :style="{ opacity: 100 - boxOption + '%' }"
        >
            
          <!-- #ifdef MP-WEIXIN  -->
          <view
            @click="goback"
            :style="[titleStyle, { opacity: '100% !important' }]"
            style="position: fixed; top: 0; left: 0; padding-left: 6rpx"
          >
            <u-icon
              name="arrow-left"
              size="44"
              style="margin-top: 22rpx"
            ></u-icon>
          </view>
          <!-- #endif -->
          <view class="orderStatusBox flex" style="margin-bottom: 30rpx">
                <u-icon customPrefix="iconfont" name="icondaizhifu-" size="52" color="#DFBE6E" v-if="orderStatus.code == 0"></u-icon>
                <u-icon customPrefix="iconfont" name="iconquxiao" size="52" color="#f26c6c" v-if="orderStatus.code == -1"></u-icon>
                <u-icon customPrefix="iconfont" name="iconshenhezhong" size="52" color="#86d9a5" v-if="orderStatus.code == -2"></u-icon>
                <u-icon customPrefix="iconfont" name="iconzhengchang" size="52" color="#111" v-if="orderStatus.code == 1"></u-icon>
                <text style="
            margin-left: 26rpx;
            font-size: 40rpx;
            font-weight: 600;
            color: #111;
            ">
                    {{ orderStatus.text }}
                </text>
            </view>
        <view class="orderIforRzBox row">
            <view class="orderIforRzImg">
                <img 
                style="width: 14rpx;height: 68rpx;"
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638766174213789755.png"/>
            </view>
            <view class="orderIforRzTime column col">
                <view>入住：<text>2月25日 周二 14:00后</text></view>
                <view style="margin-top: 28rpx;">离店：<text>2月28日 周五 12:00前</text></view>
            </view>
            <view class="orderIforRzNum">3晚</view>
        </view>
          <view class="orderIforDiZhi">
            <view class="orderIforDiZhiL">成田国际花园酒店</view>
            <view class="orderIforDiZhiR row">
                <view class="orderIforDiZhiRImg">
                    <img 
                    style="width: 23rpx;height:28rpx;"
                    src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638766148323678002.png"/>
                </view>
                <view class="orderIforDiZhiRText">
                    95 Cheongpa-ro 20-gil, 龙山区, 首尔, 首尔(及其周边地区)，韩国
                </view>
            </view>
          </view>
        </view>
        <view class="hotel-title" :style="[titleStyle]">
          <view @click="goback">
            <!-- #ifdef MP-WEIXIN  -->
            <u-icon name="arrow-left" size="44"></u-icon>
            <!-- #endif -->
          </view>
          <view
            style="flex: 1; margin-left: 30rpx; text-align: left"
            class="name-ali"
            >
              酒店名称
            </view
          >
        </view>
        <view class="ReservationInforBox">
            <view class="ReservationInforTitle">预定信息</view>
            <view class="ResInforText row-sb-n">
                <view class="ResInforL">房型</view>
                <view class="ResInforR">高级双床房(1间)</view>
            </view>
            <view class="ResInforText row-sb-n">
                <view class="ResInforL">餐型</view>
                <view class="ResInforR active">含早餐 x2份</view>
            </view>
            <view class="ResInforText row-sb-n">
                <view class="ResInforL">窗户</view>
                <view class="ResInforR">有窗</view>
            </view>
            <view class="ResInforText row-sb-n">
                <view class="ResInforL">人数</view>
                <view class="ResInforR">最多入住2人</view>
            </view>
            <view class="ResInforText row-sb-n">
                <view class="ResInforL">面积</view>
                <view class="ResInforR">32㎡</view>
            </view>
            <view class="ResInforText row-sb-n">
                <view class="ResInforL">网络</view>
                <view class="ResInforR">WIFI</view>
            </view>
            <view class="ResInforText row-sb-n">
                <view class="ResInforL">楼层数</view>
                <view class="ResInforR">1-20</view>
            </view>
            <view class="ResInforText row-sb-n">
                <view class="ResInforL">取消政策</view>
                <view class="ResInforR">不可修改</view>
            </view>
        </view>
        <view class="ReservationInforBox">
            <view class="ReservationInforTitle">订房信息</view>
            <view class="ResInforText row-sb-n">
                <view class="ResInforL">住客姓名</view>
                <view class="ResInforR">李伟</view>
            </view>
            <view class="ResInforText row-sb-n">
                <view class="ResInforL">联系电话</view>
                <view class="ResInforR">1956555</view>
            </view>
            <view class="ResInforText row-sb-n">
                <view class="ResInforL">E-mail</view>
                <view class="ResInforR">ran****un@aliyun.com</view>
            </view>
        </view>
        <view style="height: 36rpx;"></view>
      </scroll-view>
      <view class="opera-box">
        <view class="box flex">
            <view class="price">
                <text class="f11">￥</text>
                <text> 11111</text>
            </view>
            <view class="sum-detail">共计 222间房</view>
            <u-button :ripple="true" :hair-line="false" :custom-style="btnStyle" @click="buyRoom">立即购买</u-button>
        </view>
    </view>
    </view>
  </template>
  
  <script>
  export default {
    components: {
      
    },
    data() {
      return {
        id: 0,
        boxOption: 0,
        titleStyle: {
          opacity: 0,
        },
        mainColor: "",

        Up: 0,
        current: 1,
        scrollTop: 100,
        old:{
          scrollTop: 0
        },
        orderStatus: {
            text: "待支付",
            code: 0,
        },
        showPayBtn: false,
        btnStyle: {
            height:"80rpx",
            lineHeight:"80rpx",
            borderRadius:"16rpx",
            background:"#111",
            color:"#FFF",
            fontSize:"28rpx",
            fontWeight:"600",
            width:'193rpx',
        },
      };
    },
    created() {
      this.Up = uni.getStorageSync("mall_UserInfo")
        ? uni.getStorageSync("mall_UserInfo").UserPageType
        : 0;
    },
    onLoad(options) {
      this.id = options.id;
      let that = this;
      uni.getSystemInfo({
        success(res) {
          that.titleStyle = {
            height: "45px",
            paddingTop: `${res.statusBarHeight}px`,
            opacity: "0",
          };
        },
      });
      this.mainColor = this.$uiConfig.mainColor;
      if(this.id) this.getOrderDetail(this.id);
    },
    methods: {
      //立即购买
      buyRoom(){
          let that = this;
          if (that.orderMsg.Consignee == '') {
              this.$refs.uToast.show({
                  title: '请输入住客姓名！',
                  type: 'warning'
              });
              return;
          }
          if (that.orderMsg.ConsigneeMobile == '') {
              this.$refs.uToast.show({
                  title: '请输入联系电话！',
                  type: 'warning'
              });
              return;
          }
          var tempObj = uni.getStorageSync('basedata').mall.wechatmessage;	
          var tmplIds = [];
          if(tempObj&&tempObj.length>0){
              tempObj.forEach(x=>{
                  if(x.Name=='下单成功提醒'||x.Name=='订单取消提醒'||x.Name=='订单确认通知'){
                      tmplIds.push(x.MessageId)
                  }
              })
          }
          uni.requestSubscribeMessage({
              tmplIds: tmplIds,
              complete(res) {
                  that.request2({
                          url: '/api/Hotel/SetAppletHotelOrder',
                          data: that.orderMsg
                      },
                      res => {
                          if (res.resultCode == 1) {
                              that.queren(res.data)
                          }
                      }
                  );
              }
          })
      },
      formatStatus(status, loss, isCancel) {
            loss = loss ? loss : -1;
            //1、已申请；!=1未申请
            if (loss == 1 || status == 4) {
                this.orderStatus.code = -1;
                this.orderStatus.text = "已取消";
                this.showPayBtn = false;
            } else if (status == 2 && isCancel != 1) {
                this.orderStatus.code = 0;
                this.orderStatus.text = "待付款";
                this.showPayBtn = true;
            } else if (status == 3 && isCancel != 1) {
                this.orderStatus.code = 0;
                this.orderStatus.text = "候补中";
                this.showPayBtn = true;
            } else if (status == 2 && isCancel == 1) {
                this.orderStatus.code = -2;
                this.orderStatus.text = "审核中";
                this.showPayBtn = false;
            } else if (status == 1) {
                this.orderStatus.code = 1;
                this.orderStatus.text = "正常";
                this.showPayBtn = false;
            }
      },
      scroll(e) {
        this.old.scrollTop = e.detail.scrollTop
        this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
        this.titleStyle.opacity =
          e.detail.scrollTop - 100 < 0
            ? 0
            : Math.floor(e.detail.scrollTop - 100) / 100 > 1
            ? 1
            : Math.floor(e.detail.scrollTop - 100) / 100;
        this.$forceUpdate();
      },
      goback() {
        uni.navigateBack({
          delta: 1,
        });
      },
      //获取酒店详情
      getOrderDetail(id) {
        let msg = {
          HotelId: id,
          StartDate: this.dayObj.start,
          EndDate: this.dayObj.end,
        };
        this.request2(
          {
            url: "/api/Hotel/GetHotelInfo",
            data: msg,
          },
          (res) => {
            if (res.resultCode == 1) {
              console.log(res, '订单详情数据');
            }
          }
        );
      },
     
      
    },
  };
  </script>
  
  <style scoped>
  @import url("@/asset/css/flex.css");
  .hotel-detail {
    height: 100vh;
    overflow: hidden;
    width: 100vw;
    font-family: "pingfang";
    background: #F3F3F3;
    display: flex;
    flex-direction: column;
  }
  
  .hotel-detail .flex {
    display: flex;
    align-items: center;
  }
  
  .hotel-detail .f12 {
    font-size: 24rpx !important;
  }
  
  .hotel-detail .king {
    width: 44rpx;
    height: 44rpx;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  .hotel-detail .regular {
    font-weight: 500 !important;
  }
  
  .hotel-detail .hotel-content {
    position: relative;
    z-index: 2;
    top: -110rpx;
  }
  
  .hotel-detail .hotel-content .date-box {
    margin: 30rpx 0;
    background: #ecf1f4;
    border-radius: 16rpx;
    padding: 25rpx;
    justify-content: space-between;
  }
  
  .hotel-detail .hotel-content .date-box .hr-line {
    width: 24rpx;
    height: 4rpx;
    background: #222;
    margin-right: 24rpx;
  }
  
  .hotel-detail .hotel-content .date-box .ver-line {
    width: 1px;
    height: 49rpx;
    background: #a8a8a8;
    opacity: 0.3;
    margin-right: 24rpx;
  }
  
  .hotel-detail .hotel-content .date-box .date {
    font-size: 24rpx;
    font-weight: bold;
    color: #111111;
    margin-right: 24rpx;
  }
  
  .hotel-detail .hotel-content .date-box .date .date-week {
    font-size: 24rpx;
    font-weight: 500;
    color: #6e6e6e;
    margin-left: 18rpx;
  }
  
  .hotel-detail .hotel-content .hotel-more-info {
    width: 140rpx;
    height: 60rpx;
    line-height: 60rpx;
    background: #ffffff;
    border: 1px solid #111111;
    border-radius: 8rpx;
    margin: 0 auto;
    font-size: 24rpx;
    font-weight: 500;
    color: #1f1f1f;
    text-align: center;
  }
  
  .hotel-detail .empty-block {
    height: 20rpx;
    background-color: #ecf1f4;
  }
  
  .hotel-detail .hotel-content .detail-box {
    padding: 33rpx 30rpx 0 30rpx;
  }
  
  .hotel-detail .hotel-content .detail-box .nearby-type {
    padding: 0 16rpx;
    height: 40rpx;
    line-height: 40rpx;
    background: #fff;
    border-radius: 20rpx;
    margin-right: 10rpx;
  
    font-size: 28rpx;
    font-weight: 500;
    color: #1f1f1f;
  }
  
  .hotel-detail .hotel-content .detail-box .nearby-type.active {
    color: #dfbe6e;
    background: rgba(223, 190, 110, 0.2);
  }
  
  .hotel-detail .hotel-content .title-style-one {
    font-weight: 500;
    font-size: 24rpx;
    color: #080A09;
    line-height: 43rpx;
    text-indent: 21rpx;
  }
  .hotel-detail .hotel-content .title-style-one item-title{
    line-height: 36rpx;
  }
  .hotel-detail .hotel-content .title-style-one .item-content{
    color: #B99846;
    margin-left: 5rpx;
    line-height: 36rpx;
  }
  .title-style-one li{
    margin-bottom: 5rpx;
  }
  .hotel-detail .hotel-content .big-title {
    position: relative;
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 35rpx;
  }
  
  .hotel-detail .hotel-content .big-title::before {
    display: block;
    width: 18rpx;
    height: 18rpx;
    background: #E2C27A;
    border-radius: 5rpx;
    content: " ";
    position: absolute;
    left: 0;
    bottom: -4rpx;
    z-index: 1;
  }
  
  .hotel-detail .hotel-content .big-title text {
    font-size: 34rpx;
    font-weight: bold;
    color: #1f1f1f;
    position: relative;
    z-index: 2;
  }
  
  .hotel-detail .hotel-content .hotel-base .hotel-room .room-type {
    /* padding:10rpx 30rpx; */
    display: flex;
    align-items: center;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  
  .hotel-detail .hotel-content .hotel-base .room-list {
    padding-top: 40rpx;
  }
  
  .hotel-detail .hotel-content .hotel-base .hotel-room .room-type .item {
    padding: 16rpx 30rpx;
    background: #ecf1f4;
    border-radius: 8rpx;
    margin-right: 26rpx;
    font-size: 22rpx;
    color: #999999;
    font-weight: 400;
    flex-shrink: 0;
  }
  
  .hotel-detail .hotel-content .hotel-base .hotel-room .room-type .item.active {
    background: #111111;
    color: #ffffff;
  }
  
  .hotel-detail
    .hotel-content
    .hotel-base
    .hotel-room
    .room-type
    .item:last-child {
    margin-right: 0;
  }
  
  .hotel-detail .hotel-content .hotel-base {
    /* position: relative;
          top: -140rpx; */
    border-top-left-radius: 60rpx;
    border-top-right-radius: 60rpx;
    background: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hoteldetailbj.png) no-repeat #F3F3F3;
    background-size: 100% auto;
    padding: 39rpx 0 44rpx 0;
  }
  
  .location {
    display: flex;
    align-items: center;
  }
  
  .location .loc-left {
    width: 1px;
    flex: 1;
  }
  
  .location .loc-left .loc-name {
    font-size: 28rpx;
    font-weight: 800;
    color: #111111;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
  }
  
  .location .loc-left .loc-remark {
    font-size: 22rpx;
    font-weight: 500;
    color: #6e6e6e;
    line-height: 34rpx;
  }
  
  .location .loc-right {
    font-size: 24rpx;
    font-weight: 500;
    color: #111111;
    display: flex;
    align-items: center;
  }
  
  .hotel-detail .hotel-content .hotel-base .head {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
  }
  
  .hotel-detail .hotel-content .hotel-base .head .hotel-name {
    font-size: 36rpx;
    font-weight: 800;
    color: #111111;
  }
  
  .hotel-detail .hotel-content .hotel-base .head .hotel-tag {
    font-size: 22rpx;
    font-weight: 500;
    color: #6e6e6e;
  }
  .hotel-Opening{
    font-weight: 500;
    font-size: 24rpx;
    color: #B99846;
    margin-right: 31rpx;
    margin-bottom: 20rpx;
    display: inline-block;
  }
  .hotel-tagText{
    background: #FFFFFF;
    border-radius: 4rpx;
    border: 1rpx solid #B99846;
    color: #B99846;
    text-align: center;
    margin-right: 8rpx;
    margin-bottom: 20rpx;
    height: 34rpx;
    line-height: 26rpx;
    padding: 0 12rpx;
    display: inline-block;
  }
  .hotel-detail .hotel-content .hotel-base .head .op-box image {
    width: 58rpx;
    height: 58rpx;
  }
  
  .hotel-detail .hotel-content .hotel-base .shebei {
    padding: 34rpx 0;
    margin-bottom: 34rpx;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
  }
  
  .hotel-detail .hotel-content .hotel-base .shebei .sb-left {
    width: 1px;
    flex: 1;
    /* display: flex; */
    align-items: center;
    display: -webkit-box;
    overflow: auto;
    margin-right: 20rpx;
  }
  
  .hotel-detail .hotel-content .hotel-base .shebei .sb-left .sb-item {
    padding: 7rpx 13rpx;
    background: #ecf1f4;
    border-radius: 4rpx;
    font-size: 22rpx;
    font-weight: 500;
    color: #111111;
    margin-right: 10rpx;
  }
  
  .hotel-detail .hotel-content .hotel-base .shebei .sb-right {
    font-size: 24rpx;
    font-weight: 500;
    color: #111111;
    display: flex;
    align-items: center;
  }
  
  .hotel-detail .hotel-title {
    line-height: 45px !important;
    font-size: 16px;
    text-align: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    color: #111;
    box-sizing: content-box;
    z-index: 5;
    display: flex;
    align-items: center;
    background-color: #f6f6f6;
    padding-left: 6rpx;
  }
  
  .hotel-detail .media {
    position: relative;
    z-index: 1;
    background: #fff;
    box-shadow: 0rpx 14rpx 40rpx 0rpx rgba(76,76,76,0.06);
    border-radius: 0rpx 0rpx 40rpx 40rpx;
    overflow: hidden;
  }
  
  .hotel-detail .media .play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -49rpx;
    margin-left: -49rpx;
    width: 98rpx;
    height: 98rpx;
    border-radius: 20rpx;
    background-color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .hotel-detail .media .video-box {
    background-color: #111;
    height: 545rpx;
    position: relative;
  }
  
  .hotel-detail .media .type-box {
    width: 100px;
    height: 50rpx;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50rpx;
    left: 50%;
    bottom: 80px;
    margin-left: -50px;
  }
  
  .hotel-detail .media .media-info .type-img-box {
    background-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    display: flex;
    align-items: center;
    height: 96rpx;
    width: 96rpx;
    padding: 8rpx;
    border-radius: 12rpx;
    position: relative;
  }
  
  .hotel-detail .media .media-info .type-img-box image {
    height: 80rpx;
    width: 80rpx;
    border-radius: 12rpx;
    opacity: 0.5;
  }
  
  .hotel-detail .media .media-info .type-img-box .content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font-size: 20rpx;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-items: center;
  }
  
  .hotel-detail .media .media-info .type-img-box text {
    font-size: 22rpx;
    font-family: pingfang;
    margin-left: 6rpx;
  }
  
  .hotel-detail .media .media-info {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.35);
    top: 287rpx;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30rpx 50rpx;
  }
  
  .hotel-detail .media .media-info .mi-left {
    flex: 1;
  }
  .detail_ShareBtn {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }
  .name-ali {
    /* #ifdef MP-ALIPAY */
    box-sizing: border-box;
    padding-left: 30rpx;
    /* #endif */
  }
  
    .orderIforDiZhi{
        padding: 27rpx 32rpx 41rpx 32rpx;
    }
    .orderIforDiZhiL{
        font-weight: 800;
        font-size: 32rpx;
        color: #080A09;
        padding-bottom: 18rpx;
    }
    .orderIforDiZhiRImg{
        width: 23rpx;
        margin-right: 13rpx;
    }
    .orderIforDiZhiRText{
        width: 1px;
        flex: 1;
        font-weight: 500;
        font-size: 28rpx;
        color: #1D1D20;
        line-height: 38rpx;
    }
    .ReservationInforBox{
        border-radius: 18rpx;
        background: #fff;
        margin: 28rpx 31rpx 28rpx 31rpx;
        padding: 37rpx 18rpx 49rpx 18rpx;
    }
    .ReservationInforTitle{
        font-weight: 800;
        font-size: 32rpx;
        color: #080A09;
        padding-bottom: 24rpx;
    }
    .ResInforText{
        padding: 21rpx 19rpx;
    }
    .ResInforL{
        width: 120rpx;
        text-align: right;
        margin-right: 57rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #303133;
    }
    .ResInforR{
        width: 1px;
        flex: 1;
        font-weight: bold;
        font-size: 28rpx;
        color: #080A09;
    }
    .ResInforR.active{
        color: #B99846;
    }
    .ResInforTisp{
        font-weight: 500;
        font-size: 24rpx;
        color: #1D1D20;
        line-height: 42rpx;
    }
    .ResInforText.ResInforTtisp{
        padding: 14rpx 19rpx 21rpx 19rpx;
    }

    .orderStatusBox{
        padding: 200rpx 31rpx 13rpx 31rpx;
    }
    .orderIforRzBox{
        margin: 0 31rpx;
        background: #ECF1F4;
        border-radius: 18rpx;
        align-items: center;
        padding: 31rpx 38rpx;
    }
    .orderIforRzTime{
        font-weight: 500;
        font-size: 28rpx;
        color: #1D1D20;
        margin-left: 16rpx;
    }
    .orderIforRzNum{
        font-weight: bold;
        font-size: 32rpx;
        color: #080A09;
    }
    .opera-box{
		background-color: #FFF;
		padding: 20rpx 45rpx 40rpx 45rpx;
		z-index: 5;
	}
	.opera-box .box{
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.2);
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		padding: 0 10rpx 0 36rpx;
	}
	.opera-box .box .price{
		font-size: 40rpx;
		font-weight: 500;
		color: #D91818;
		margin-right: 20rpx;
	}
	.opera-box .box .sum-detail{
		font-size: 24rpx;
		flex: 1;
		font-weight: 500;
		color: #6E6E6E;
	}
    
  </style>
  