<template>
  <view class="hotel-detail">
    <scroll-view
      scroll-y="true"
      style="width: 100%; height: 100%"
      @scroll="scroll"
    >
      <view
        class="media"
        :style="{ opacity: 100 - boxOption + '%' }"
        @click="openPicture"
      >
        <u-swiper
          :list="dataList.HotelImg"
          :effect3d="false"
          :height="545"
          :interval="5000"
          :border-radius="0"
          name="Path"
          v-if="active == 1"
        ></u-swiper>
        <view class="video-box" v-if="active == 0">
          <video
            id="myVideo"
            :src="detailData.VideoUrl"
            style="width: 100%; height: 100%"
            :controls="controls"
            :show-center-play-btn="false"
            :show-fullscreen-btn="false"
            @fullscreenchange="videoControl"
            object-fit="fill"
          ></video>
          <view @click="enlarge" class="play-btn">
            <!-- 播放按钮 -->
            <image
              src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
              style="width: 37rpx; height: 44rpx"
              mode=""
            ></image>
          </view>
        </view>
        <!-- <view class="type-box" v-if="videoUrl!=''">
					<u-tabs bg-color="rgba(0,0,0,0)" :is-scroll="false" name="Name" :list="typeList"
						:active-color="mainColor" :current="active" @change="changeHandler" :show-bar="true"
						:bold="false" height="50" duration="0" font-size="24" :activeFontSize="24" :typeStyle="2">
					</u-tabs>
				</view> -->
        <view class="media-info">
          <view class="flex">
            <view class="mi-left">
              <view v-if="dataList.HotelImg.length > 0" class="type-img-box">
                <image
                  :src="dataList.HotelImg[0].Path"
                  mode="aspectFill"
                ></image>
                <view class="content">
                  <!-- <u-icon name="photo" size="26" color="#FFF"></u-icon> -->
                  <text>{{ dataList.HotelImg.length }}</text>
                </view>
              </view>
            </view>
            <view class="mi-right">
              <view
                style="
                  font-size: 40rpx;
                  font-weight: 600;
                  text-align: right;
                  margin-bottom: 6rpx;
                "
                class="king"
                >{{ dataList.StarName }}</view
              >
              <!-- <view class="flex">
								<text style="color:white;margin-right: 14rpx;" class="f12">星级</text>
								<u-rate active-color="#DFBE6E" inactive-color="#f1f1f1" current="4" active-icon="star" inactive-icon="star" disabled></u-rate>
							</view> -->
            </view>
          </view>
        </view>
        <!-- #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"
            color="#FFF"
            style="margin-top: 22rpx"
          ></u-icon>
        </view>
        <!-- #endif -->
      </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="hotel-content">
        <view class="hotel-base">
          <view class="head">
            <view style="flex: 1">
              <view class="hotel-name">{{ dataList.HotelName }}</view>
              <view class="hotel-tag">
                <text
                  v-for="(subItem, subIndex) in dataList.TagList"
                  :key="subIndex"
                  >{{ subItem }}
                  <text
                    style="margin: 0 10rpx"
                    v-if="subIndex != dataList.TagList.length - 1"
                    >|</text
                  >
                </text>
              </view>
            </view>
            <!-- 关注 -->
            <view class="op-box">
              <view
                style="
                  position: relative;
                  margin-right: 17rpx;
                  width: 32px;
                  height: 32px;
                  display: inline-block;
                "
              >
                <image
                  src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1621940804000_709.png"
                ></image>
                <button class="detail_ShareBtn" open-type="share"></button>
              </view>
              <image
                v-if="!islike"
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1621940804000_61.png"
                @click="changeLike"
              ></image>
              <image
                v-if="islike"
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1621940804000_953.png"
                @click="changeLike"
              ></image>
            </view>
          </view>
          <view class="shebei">
            <view class="sb-left">
              <view
                class="sb-item"
                v-for="(subItem, sIndex) in dataList.PublicFacilities"
                >{{ subItem }}</view
              >
            </view>
            <view class="sb-right" @click="openDescription">
              <text style="margin-right: 20rpx">设施/详情</text>
              <u-icon name="arrow" size="20" />
            </view>
          </view>
          <view class="location">
            <view class="loc-left">
              <view class="loc-name">
                <u-icon name="location" size="28" />
                <text style="margin-left: 14rpx">{{ dataList.Address }}</text>
              </view>
              <view class="loc-remark">
                <view>{{ dataList.AddressDes }}</view>
              </view>
            </view>
            <view
              class="loc-right"
              @click="goMap(dataList.Address, dataList.Lng, dataList.Lat)"
            >
              <text style="margin-right: 20rpx">地图详情</text>
              <u-icon name="arrow" size="20" />
            </view>
          </view>
          <view class="date-box flex" @click="showTimePopup = true">
            <view class="flex">
              <view class="date">
                <text>{{ formatMonthDay(startDay) }}</text>
                <text class="date-week">{{ dayObj.startWeek }}</text>
              </view>
              <view class="hr-line"></view>
              <view class="date">
                <text>{{ formatMonthDay(endDay) }}</text>
                <text class="date-week">{{ dayObj.endWeek }}</text>
              </view>
            </view>
            <view class="ver-line"></view>
            <view class="date"> 共 · {{ day }}晚 </view>
          </view>
          <view class="hotel-room">
            <view class="room-type">
              <view
                class="item"
                :class="{ active: isShowAll }"
                @click="getAllRoom()"
                >全部</view
              >
              <view
                v-for="(x, i) in threeLevelList"
                class="item"
                @click="changeRoomType(x)"
                :class="{ active: x.isCheck == 1 }"
                >{{ x.name }}</view
              >
            </view>
            <view class="room-list">
              <room-good
                :RoomList="RoomList"
                :dayObj="dayObj"
                :hotelData="hotelData"
              ></room-good>
            </view>
          </view>
        </view>
        <view class="empty-block"></view>
        <view class="detail-box">
          <view class="big-title">
            <text>订房须知</text>
          </view>
          <ul class="title-style-one">
            <li
              v-for="(sItem, sIndex) in dataList.Booking"
              :key="sIndex"
              v-if="sItem.Name != '入离时间'"
            >
              <view class="item-title">{{ sItem.Name }}</view>
              <view class="item-content">
                {{ sItem.Content }}
              </view>
            </li>
          </ul>
          <template
            v-for="(sItem, sIndex) in dataList.Booking"
            v-if="sItem.Name == '入离时间'"
          >
            <view class="big-title" :key="sIndex">
              <text>入离规则</text>
            </view>
            <ul class="title-style-one">
              <li>
                <view class="item-title king regular">{{
                  sItem.Content[0]
                }}</view>
                <view class="item-title king regular">{{
                  sItem.Content[1]
                }}</view>
              </li>
            </ul>
          </template>
          <view class="big-title">
            <text>设施服务</text>
          </view>
          <ul class="title-style-one hr">
            <li v-for="(vItem, vIndex) in dataList.ServiceItems" :key="vIndex">
              <view class="item-title regular">{{ vItem }}</view>
            </li>
          </ul>
          <view class="hotel-more-info" @click="openDescription">酒店详情</view>
        </view>
        <view class="empty-block"></view>
        <view class="detail-box">
          <view class="flex">
            <view class="big-title">
              <text>发现周边</text>
            </view>
            <view class="flex" style="margin-left: 64rpx">
              <view
                class="nearby-type"
                :class="{ active: nearbyType == 0 }"
                @click="changeNearbyType(0)"
                >景区
              </view>
              <view
                class="nearby-type"
                :class="{ active: nearbyType == 1 }"
                @click="changeNearbyType(1)"
                >美食
              </view>
            </view>
          </view>
          <view class="flex" style="margin: 50rpx 0; overflow-x: auto">
            <template v-if="nearbyType == 0">
              <template
                v-if="dataList.TicketList"
                v-for="subItem in dataList.TicketList"
              >
                <near-good :goodItem="subItem" :goodType="3"></near-good>
              </template>
            </template>
            <template v-if="nearbyType == 1">
              <template
                v-if="dataList.DinnerList"
                v-for="subItem in dataList.DinnerList"
              >
                <near-good :goodItem="subItem" :goodType="2"></near-good>
              </template>
            </template>
          </view>
          <view class="flex">
            <view class="big-title">
              <text>精选推荐</text>
            </view>
            <view class="flex" style="margin-left: 64rpx">
              <view class="nearby-type active"
                >附近满足条件酒店({{ HotelArr.length }})</view
              >
            </view>
          </view>
          <view>
            <recommed-hotel
              :HotelArr="HotelArr"
              :dayObj="dayObj"
              :searchObj="searchObj"
            ></recommed-hotel>
            <!-- <recommed-hotel :hotelType="1"></recommed-hotel> -->
          </view>
        </view>
      </view>
    </scroll-view>
    <u-popup
      v-model="showTimePopup"
      mode="bottom"
      border-radius="20"
      length="85%"
      :safe-area-inset-bottom="true"
    >
      <canlendar @finish="chosenDateResult"></canlendar>
    </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";
export default {
  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,
    };
  },
  components: {
    roomGood,
    nearGood,
    recommedHotel,
    canlendar,
  },
  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);
      var obj = {
        start: `${d1.getFullYear()}-${d1.getMonth() + 1}-${d1.getDate()}`,
        end: `${d2.getFullYear()}-${d2.getMonth() + 1}-${d2.getDate()}`,
        startDay: `${d1.getMonth() + 1}-${d1.getDate()}`,
        endDay: `${d2.getMonth() + 1}-${d2.getDate()}`,
        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: {
    //获取推荐酒店
    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.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;
          }
        }
      );
    },
    // #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>
.hotel-detail {
  height: 100vh;
  overflow: hidden;
  width: 100vw;
  font-family: "pingfang";
}

.hotel-detail .flex {
  display: flex;
  align-items: center;
}

.hotel-detail .f12 {
  font-size: 24rpx !important;
}

.hotel-detail .king {
  color: #dfbe6e !important;
}

.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: 50rpx;
}

.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 {
  padding: 0;
  margin: 50rpx 0;
  display: block;
}

.hotel-detail .hotel-content .title-style-one.hr {
  display: flex;
  flex-wrap: wrap;
}

.hotel-detail .hotel-content .title-style-one.hr li {
  width: 50%;
  flex-shrink: 0;
  margin: 0;
}

.hotel-detail .hotel-content .title-style-one li {
  list-style: none;
  margin-bottom: 40rpx;
  padding-left: 33rpx;
  position: relative;
}

.hotel-detail .hotel-content .title-style-one li::before {
  content: " ";
  display: block;
  width: 10rpx;
  height: 10rpx;
  background: #111111;
  border-radius: 50%;

  position: absolute;
  left: 0;
  top: 15rpx;
}

.hotel-detail .hotel-content .title-style-one li:last-child {
  margin-bottom: 0px;
}

.hotel-detail .hotel-content .title-style-one li .item-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #1f1f1f;
  margin-bottom: 20rpx;
}

.hotel-detail .hotel-content .title-style-one li .item-content {
  font-size: 24rpx;
  font-weight: 500;
  color: #6e6e6e;
}

.hotel-detail .hotel-content .big-title {
  position: relative;
}

.hotel-detail .hotel-content .big-title::before {
  display: block;
  width: 71rpx;
  height: 12rpx;
  background: #dfbe6e;
  border-radius: 4rpx;
  content: " ";

  position: absolute;
  left: 0;
  bottom: 6rpx;
  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-color: #fff;
  padding: 50rpx;
}

.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: 30rpx;
}

.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 {
  margin-top: 20rpx;
  font-size: 22rpx;
  font-weight: 500;
  color: #6e6e6e;
}

.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 {
  height: 545rpx;
  position: relative;
  z-index: 1;
}

.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 */
}
</style>
