<template>
  <view style="height: 100vh" v-if="hotelObj.HotelId > 0">
    <view style="padding: 0 45rpx">
      <u-tabs
        :is-scroll="false"
        name="Name"
        :list="navs"
        active-color="#DFBE6E"
        :current="active"
        @change="changeHandler"
        :show-bar="false"
        :activeFontSize="32"
        inactive-color="#111111"
        :bold="true"
        height="100"
        duration="0"
        font-size="28"
      ></u-tabs>
    </view>
    <scroll-view
      scroll-y="true"
      class="hotel-descr"
      @scroll="scroll"
      :scroll-top="scrollTop"
    >
      <view class="content">
        <view class="flex">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622085515000_731.png"
            mode="widthFix"
            style="width: 32rpx"
          ></image>
          <view class="h-name">{{ hotelObj.HotelName }}</view>
        </view>
        <view class="base-box flex flex-wrap">
          <view class="item">
            <view class="val">{{ hotelObj.HotelInfo.OpenTime }}</view>
            <view class="label">开业时间</view>
          </view>
          <view class="item">
            <view class="val">{{ hotelObj.HotelInfo.DecorationTime }}</view>
            <view class="label">装修时间</view>
          </view>
          <view class="item">
            <view class="val">{{ hotelObj.RoomNumber }}间</view>
            <view class="label">房间数量</view>
          </view>
          <view class="item">
            <view class="val">{{ hotelObj.Tel }}</view>
            <view class="label">联系电话</view>
          </view>
          <view class="item" style="width: 100%">
            <view class="val">{{ hotelObj.Address }}</view>
            <view class="label">酒店地址</view>
          </view>
        </view>
        <view class="desc">
          <view>{{ hotelObj.HotelInfo.Into }}</view>
        </view>
        <view class="empty-block"></view>
        <view class="flex" style="margin-top: 50rpx">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622086795000_201.png"
            mode="widthFix"
            style="width: 32rpx"
          ></image>
          <view class="h-name">店内设施</view>
        </view>
        <view class="sheshi">
          <view class="she-title">公共服务设施</view>
          <view class="she-content">
            <text v-for="subItem in hotelObj.PublicFacilities">
              {{ subItem }}
            </text>
          </view>
        </view>
        <view class="sheshi">
          <view class="she-title">房间设施</view>
          <view class="she-content">
            <text v-for="subItem in hotelObj.RoomFacilities">
              {{ subItem }}
            </text>
          </view>
        </view>
        <view class="sheshi" style="margin-bottom: 50rpx">
          <view class="she-title">酒店服务</view>
          <view class="she-content">
            <text v-for="subItem in hotelObj.ServiceItems">
              {{ subItem }}
            </text>
          </view>
        </view>
        <view class="empty-block"></view>
        <view class="flex" style="margin-top: 50rpx">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622094594000_166.png"
            mode="widthFix"
            style="width: 32rpx"
          ></image>
          <view class="h-name">订房须知</view>
        </view>
        <ul class="title-style-one">
          <li
            v-for="subItem in hotelObj.Booking"
            v-if="subItem.Name == '入离时间'"
          >
            <view class="item-title king regular">{{
              subItem.Content[0]
            }}</view>
            <view class="item-title king regular">{{
              subItem.Content[1]
            }}</view>
          </li>
          <li
            v-for="subItem in hotelObj.Booking"
            v-if="subItem.Name != '入离时间'"
          >
            <view class="item-title">{{ subItem.Name }}</view>
            <view class="item-content">{{ subItem.Content }}</view>
          </li>
        </ul>
        <view class="empty-block"></view>
        <view class="flex" style="margin-top: 50rpx">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622094594000_166.png"
            mode="widthFix"
            style="width: 32rpx"
          ></image>
          <view class="h-name">周边交通</view>
        </view>
        <view class="sheshi" v-for="subItem in hotelObj.TrafficList">
          <view class="she-title">{{ subItem.TTitle }}</view>
          <view class="she-content">
            <text>{{ subItem.TSubTitle }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navs: [
        {
          Id: 0,
          Name: "酒店信息",
          position: 0,
        },
        {
          Id: 1,
          Name: "规则设施",
          position: 691,
        },
        {
          Id: 2,
          Name: "周边交通",
          position: 1038,
        },
      ],
      active: 0,
      scrollTop: 0,
      oldScrollTop: 0,
      id: 0,
      hotelObj: {}, //酒店信息
    };
  },
  onLoad(options) {
    if (options.hotelObj) {
      let obj = JSON.parse(decodeURIComponent(options.hotelObj));
      this.getHotelDetail(parseInt(obj.id), obj.start, obj.end);
    }
  },
  created() {
    uni.setNavigationBarTitle({
      title: "酒店详细信息",
    });
  },
  methods: {
    scroll(e) {
      this.oldScrollTop = e.detail.scrollTop;
      this.changeActive();
    },
    goToPosition(posi) {
      this.scrollTop = posi;
      this.$nextTick(function () {
        this.scrollTop = posi;
      });
    },
    changeActive() {
      let t = 0;
      this.navs.forEach((x, i) => {
        if (x.position <= this.oldScrollTop) {
          t = i;
        }
      });
      this.active = t;
    },
    changeHandler(i) {
      this.active = i;
      this.goToPosition(this.navs[i].position);
      // this.clickItem={};
      // this.$nextTick(function(){
      // 	this.clickItem = this.navs.navs[i];
      // })
    },
    //获取酒店详情
    getHotelDetail(id, start, end) {
      let msg = {
        HotelId: id,
        StartDate: start,
        EndDate: end,
      };
      this.request2(
        {
          url: "/api/Hotel/GetHotelInfo",
          data: msg,
        },
        (res) => {
          if (res.resultCode == 1) {
            // console.log(res, '详情数据');
            this.hotelObj = res.data;
          }
        }
      );
    },
  },
};
</script>

<style>
.hotel-descr {
  height: calc(100% - 50px);
  width: 100vw;
  color: #111;
}

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

.hotel-descr .regular {
  font-weight: 500 !important;
}

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

.hotel-descr .empty-block {
  height: 20rpx;
  background: #ecf1f4;
  margin: 0 -45rpx;
}

.hotel-descr .flex-wrap {
  flex-wrap: wrap;
}

.hotel-descr .content {
  padding: 45rpx;
}

.hotel-descr .content .h-name {
  font-size: 36rpx;
  font-weight: 800;
  margin-left: 13rpx;
}

.hotel-descr .content .base-box {
  margin: 26rpx 0 56rpx 0;
}

.hotel-descr .content .base-box .item {
  width: 50%;
  margin-top: 30rpx;
  flex-shrink: 0;
}

.hotel-descr .content .base-box .item .val {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.hotel-descr .content .base-box .item .label {
  font-size: 20rpx;
  color: #878787;
}

.hotel-descr .content .desc {
  font-size: 24rpx;
  font-weight: 500;
  color: #4b4949;
  line-height: 48rpx;
  padding-bottom: 50rpx;
}

.hotel-descr .content .sheshi {
  margin-top: 50rpx;
}

.hotel-descr .content .sheshi .she-title {
  font-size: 28rpx;
  font-weight: 800;
}

.hotel-descr .content .sheshi .she-content {
  margin-top: 24rpx;
}

.hotel-descr .content .sheshi .she-content text {
  font-size: 24rpx;
  font-weight: 500;
  color: #4a4a4a;
  line-height: 40rpx;
  margin-right: 24rpx;
}

.hotel-descr .content .title-style-one {
  padding: 0;
  margin: 50rpx 0;
  display: block;
}

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

.hotel-descr .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-descr .content .title-style-one li:last-child {
  margin-bottom: 0px;
}

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

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