<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">
                <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"
            >
            {{ dataList.HotelName }}
            </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>
      <u-popup
        v-model="showTimePopup"
        mode="bottom"
        border-radius="20"
        length="85%"
        :safe-area-inset-bottom="true"
      > 
        <view style="
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;">
                    <view style="flex: 1; width: 100%; height: 1rpx">
                      <canlendar @finish="chosenDateResult" title="日期和人数"></canlendar>
                  </view>
                  <view style="background: #ecf1f4; padding: 20rpx 0;margin-bottom: 80rpx;">
                      <view class="row line-flex" style="padding: 30rpx; background: #fff">
                          <text style="font-size: 28rpx; color: #111; font-weight: 500">房间</text>
                          <text style="
                              font-size: 22rpx;
                              color: #999;
                              margin-left: 30rpx;
                              flex: 1;
                              "></text>
                          <u-number-box size="28" :min="1" :max="100000" v-model="searchObj.rooms"></u-number-box>
                      </view>
                      <view class="row line-flex" style="padding: 30rpx; background: #fff">
                          <text style="font-size: 28rpx; color: #111; font-weight: 500">成人</text>
                          <text style="
                              font-size: 22rpx;
                              color: #999;
                              margin-left: 30rpx;
                              flex: 1;
                              ">18周岁以上</text>
                          <u-number-box size="28" :min="1" 
                          :max="100000" 
                          v-model="searchObj.adultsNumber"
                          @change="crChange"></u-number-box>
                      </view>
                      <view class="row line-flex" style="padding: 30rpx; background: #fff">
                          <text style="font-size: 28rpx; color: #111; font-weight: 500">儿童(占床)</text>
                          <text style="
                              font-size: 22rpx;
                              color: #999;
                              margin-left: 30rpx;
                              flex: 1;
                              ">2-18周岁(不含)</text>
                          <u-number-box size="28" :min="0" :max="100000" 
                          v-model="searchObj.childrenNumberZC"
                          @change="etChange"
                          ></u-number-box>
                      </view>
                  </view>
              </view>
      </u-popup>
    </view>
  </template>
  
  <script>
  import roomGood from "./components/room-good.vue";
  import nearGood from "./components/near-good.vue";
  import recommedHotel from "./components/recommed-hotel.vue";
  import canlendar from "./components/time/index.vue";
  import hotelRoom from "./components/hotelRoom.vue";
  import hotelInfor from "./components/hotelInfor.vue";
  import hotelPolicy from "./components/hotelPolicy.vue";
  import hotelFacilities from "./components/hotelFacilities.vue";
  export default {
    components: {
      roomGood,
      nearGood,
      recommedHotel,
      canlendar,
      hotelInfor,
      hotelPolicy,
      hotelFacilities,
      hotelRoom,
    },
    data() {
      return {
        imgsList: [],
        id: 0,
        typeList: [
          {
            Id: 0,
            Name: "视频",
          },
          {
            Id: 1,
            Name: "图片",
          },
        ],
        boxOption: 0,
        titleStyle: {
          opacity: 0,
        },
        mainColor: "",
        showTimePopup: false,
        controls: false,
        videoUrl: "https://video.c-ctrip.com/videos/230i1r000001hxb2mEEE4.mp4",
        active: 1,
        islike: false,
        nearbyType: 0,
        searchObj: {
          date: {},
        },
        roomMsg: {
          HotelId: 0,
          StartDate: "",
          EndDate: "",
        },
        day: 0,
        threeLevelList: [
          {
            name: "单人床",
            id: 1,
            isCheck: 0,
          },
          {
            name: "大床房",
            id: 2,
            isCheck: 0,
          },
          {
            name: "双床房",
            id: 3,
            isCheck: 0,
          },
          {
            name: "含早餐",
            id: 4,
            isCheck: 0,
          },
          {
            name: "可取消",
            id: 5,
            isCheck: 0,
          },
        ],
        RoomList: [], //可过滤房间
        dataList: {}, //数据
        isShowAll: false, //显示全部
        HotelArr: [], //推荐酒店
        searchObj: {},
        dayObj: {},
        hotelData: {}, //传递到房间预订组件
        startDay: "",
        endDay: "",
        Up: 0,
        StarImgs: [
          'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hotel3stars.png',
          'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hotel4stars.png',
          'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hotel5stars.png',
        ],
        openImg:[
          'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638762717498946531.png',
          'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638762717498917358.png'
        ],
        optionsTitle: ["房型", "床型", "餐食"],
        hotelFacilities: [
          {Name: '酒店信息',ID:1,val:'hotelInfor',top:0,},
          {Name: '酒店政策',ID:2,val:'hotelPolicy',top:0,},
          {Name: '设施服务',ID:3,val:'hotelFacilities',top: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;
      this.roomMsg.HotelId = 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 (options.dayObj) {
        var tempDay = JSON.parse(options.dayObj);
        this.roomMsg.StartDate = tempDay.start;
        this.roomMsg.EndDate = tempDay.end;
        this.startDay = tempDay.startDay;
        this.endDay = tempDay.endDay;
        this.day = tempDay.day;
        this.dayObj = tempDay;
      } else {
        let d1 = new Date();
        let d = new Date();
        let d2 = new Date(d.setDate(d.getDate() + 1));
        let startWeek = "周" + "日一二三四五六".charAt(new Date().getDay());
        let endWeek = "周" + "日一二三四五六".charAt(new Date().getDay() + 1);
        
        let month1 = d1.getMonth() + 1;
              let day1 = d1.getDate();
              let Month1 = month1>9?month1:'0'+month1;
              let Day1 = day1>9?day1:'0'+day1;
              let month2 = d2.getMonth() + 1;
              let day2 = d2.getDate();
              let Month2 = month2>9?month2:'0'+month2;
              let Day2 = day2>9?day2:'0'+day2;
              var obj = {
                  start: `${d1.getFullYear()}-${Month1}-${Day1}`,
                  end: `${d2.getFullYear()}-${Month2}-${Day2}`,
                  startDay: `${Month1}-${Day1}`,
                  endDay: `${Month2}-${Day2}`,
          day: 1,
          startWeek: startWeek,
          endWeek: endWeek,
        };
        this.roomMsg.StartDate = obj.start;
        this.roomMsg.EndDate = obj.end;
        this.startDay = obj.startDay;
        this.endDay = obj.endDay;
        this.day = obj.day;
        this.dayObj = obj;
      }
      if (this.id > 0) {
        this.getHotelDetail(this.id);
      }
      if (options.searchObj) {
        this.searchObj = JSON.parse(options.searchObj);
      }
      this.getRecomHotel();
    },
    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;
            }
        },
      goFacil(item){
        this.current = item.ID;
        this.scrollTop = this.old.scrollTop
        this.$nextTick(function() {
          this.scrollTop = item.top
        });
      },
      openTime() {
        this.showTimePopup = true;
      },
      etChange(e){
        this.searchObj.childrenNumberZC = e.value;
        this.peopleChange()
      },
      crChange(e){
        this.searchObj.adultsNumber = e.value;
        this.peopleChange()
      },
      peopleChange(){
        this.searchObj.peoples = this.searchObj.adultsNumber + this.searchObj.childrenNumberZC
        console.log(this.searchObj.peoples,'人数')
      },
      //获取推荐酒店
      getRecomHotel() {
        this.searchObj.HotelId = this.id;
        this.request2(
          {
            url: "/api/Hotel/AppGetHotelPage",
            data: this.searchObj,
          },
          (res) => {
            if (res.resultCode == 1) {
              // console.log(res, '推荐酒店');
              this.HotelArr = [];
              let tempHotel = res.data.pageData;
              tempHotel.forEach((x) => {
                if (this.HotelArr.length < 2) {
                  this.HotelArr.push(x);
                }
              });
            }
          }
        );
      },
      goMap(name, lon, lat) {
        let newLon = parseFloat(lon);
        let newLat = parseFloat(lat);
        uni.openLocation({
          latitude: newLat,
          longitude: newLon,
          scale: 18,
          name: name,
          address: name,
          success: (res) => {},
          fail: (err) => {},
        });
      },
      openPicture() {
        let imgObj = JSON.stringify(this.dataList.HotelImg);
        uni.navigateTo({
          url: "/pages/hotel/picture?imgObj=" + imgObj,
        });
      },
      openDescription() {
        let hotelObj = JSON.stringify({
          id: this.id,
          start: this.dayObj.start,
          end: this.dayObj.end,
        });
        uni.navigateTo({
          url:
            "/pages/hotel/description?hotelObj=" + encodeURIComponent(hotelObj),
        });
      },
      chosenDateResult(obj) {
        this.roomMsg.StartDate = obj.start;
        this.roomMsg.EndDate = obj.end;
        this.startDay = obj.startDay;
        this.endDay = obj.endDay;
        this.day = obj.day;
        this.getRoomType();
        this.dayObj = obj;
        this.showTimePopup = false;
      },
      //切换日期获取房型
      getRoomType() {
        this.request2(
          {
            url: "/api/Hotel/GetHotelRoom",
            data: this.roomMsg,
          },
          (res) => {
            if (res.resultCode == 1) {
              this.RoomList = res.data.RoomList;
            }
          }
        );
      },
      formatMonthDay(str) {
        let temp = str.split("-");
        // temp[0] = temp[0] > 9 ? temp[0] : "0" + temp[0];
        // temp[1] = temp[1] > 9 ? temp[1] : "0" + temp[1];
        return `${temp[0]}月${temp[1]}日`;
      },
      getMonth(date) {
        let m = date.getMonth() + 1;
        return m > 9 ? m : "0" + m;
      },
      getDay(date) {
        let d = date.getDate();
        return d > 9 ? d : "0" + d;
      },
      getWeek(date) {
        var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
        var week = weekArray[new Date(date).getDay()]; //注意此处必须是先new一个Date
        return "周" + week;
      },
      changeNearbyType(t) {
        this.nearbyType = t;
      },
      //显示全部
      getAllRoom() {
        this.isShowAll = !this.isShowAll;
        if (this.isShowAll) {
          this.threeLevelList.forEach((x) => {
            x.isCheck = 1;
          });
          this.RoomList = this.dataList.RoomList;
        } else {
          this.threeLevelList.forEach((x) => {
            x.isCheck = 0;
          });
        }
      },
      //点击过滤房间
      changeRoomType(obj) {
        if (obj.isCheck == 0) {
          obj.isCheck = 1;
        } else {
          obj.isCheck = 0;
        }
        this.RoomList = [];
        let num = 0;
        this.threeLevelList.forEach((x) => {
          if (x.isCheck == 1) {
            num++;
            this.dataList.RoomList.forEach((y) => {
              if (x.id == 1 && y.BedType == 1) {
                this.RoomList.push(y);
              }
              if (x.id == 2 && y.BedType == 2) {
                this.RoomList.push(y);
              }
              if (x.id == 3 && y.BedType == 3) {
                this.RoomList.push(y);
              }
              if (x.id == 4 && y.BreakfastType != 4) {
                this.RoomList.push(y);
              }
              if (x.id == 5 && y.IsCancel == 2) {
                this.RoomList.push(y);
              }
            });
          }
        });
        if (num == this.threeLevelList.length) {
          this.isShowAll = true;
        } else {
          this.isShowAll = false;
        }
        if (num == 0) {
          this.RoomList = this.dataList.RoomList;
        }
      },
      changeLike() {
        this.islike = !this.islike;
      },
      previewImage(i) {
        uni.previewImage({
          urls: this.imgsList,
          current: i,
          longPressActions: {
            itemList: ["发送给朋友", "保存图片", "收藏"],
            success: function (data) {},
            fail: function (err) {
              // console.log(err.errMsg);
            },
          },
        });
      },
      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();
      },
      enlarge(file) {
        // 全屏
        this.videoContext = uni.createVideoContext("myVideo");
        this.videoContext.requestFullScreen({
          direction: 0,
        });
      },
      videoControl(e) {
        if (e.detail.fullScreen == false) {
          this.videoContext.stop();
          this.controls = false;
        } else {
          this.videoContext.play();
          this.controls = true;
        }
      },
      goback() {
        uni.navigateBack({
          delta: 1,
        });
      },
      changeHandler(i) {
        this.active = i;
      },
      //获取酒店详情
      getHotelDetail(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, '详情数据');
              this.dataList = res.data;
              this.RoomList = this.dataList.RoomList;
              this.hotelData.HotelId = this.dataList.HotelId;
              this.hotelData.HotelName = this.dataList.HotelName;
              this.hotelData.Booking = this.dataList.Booking;
              setTimeout(() => {
                this.hotelFacilities.forEach((x)=>{
                  const query = uni.createSelectorQuery().select(`#${x.val}`);
                  query.boundingClientRect((rect) => {
                    x.top = rect.top+250;
                  }).exec();
                })
              }, 1000);
            }
          }
        );
      },
      // #ifdef MP-WEIXIN
      //分享朋友圈
      onShareTimeline() {
        let uid = uni.getStorageSync("mall_UserInfo")
          ? uni.getStorageSync("mall_UserInfo").UserId
          : 0;
        if (uid == 0) {
          uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
        }
        let SmallShopId = uni.getStorageSync("mall_UserInfo")
          ? uni.getStorageSync("mall_UserInfo").SmallShopId
          : 0;
        if (SmallShopId == 0) {
          //如果微店id为0 去找所属微店id
          SmallShopId = uni.getStorageSync("mall_UserInfo")
            ? uni.getStorageSync("mall_UserInfo").UserSmallShopId
            : 0;
        }
        let title = this.dataList.HotelName ? this.dataList.HotelName : "帖子";
        let imageUrl =
          this.dataList.HotelImg && this.dataList.HotelImg.length > 0
            ? this.dataList.HotelImg[0]
            : "";
        let id = this.id;
        return {
          title: title,
          query:
            "id=" +
            this.id +
            "&user_id=" +
            uid +
            "&SmallShopId=" +
            SmallShopId +
            "&Up=" +
            this.Up +
            "&JumpType=18" +
            "&dayObj=" +
            JSON.stringify(this.dayObj) +
            "&searchObj=" +
            JSON.stringify(this.searchObj),
          imageUrl: imageUrl,
        };
      },
  
      //分享给朋友
      onShareAppMessage(res) {
        let u = uni.getStorageSync("mall_UserInfo");
        let uid = u.UserId ? u.UserId : 0;
        if (uid == 0) {
          uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
        }
        let SmallShopId = u.SmallShopId ? u.SmallShopId : 0;
        if (SmallShopId == 0) {
          //如果微店id为0 去找所属微店id
          SmallShopId = u.UserSmallShopId ? u.UserSmallShopId : 0;
        }
        return {
          title: this.dataList.HotelName ? this.dataList.HotelName : "帖子",
          path:
            "/pages/index/index?id=" +
            this.id +
            "&user_id=" +
            uid +
            "&SmallShopId=" +
            SmallShopId +
            "&Up=" +
            this.Up +
            "&JumpType=18" +
            "&dayObj=" +
            JSON.stringify(this.dayObj) +
            "&searchObj=" +
            JSON.stringify(this.searchObj),
          imageUrl:
            this.dataList.HotelImg && this.dataList.HotelImg.length > 0
              ? this.dataList.HotelImg[0]
              : "",
        };
      },
      // #endif
      
    },
  };
  </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>
  