<template>
    <view class="hotel-detail">
      <scroll-view
        ref="scrollView"
        scroll-y="true"
        style="width: 100%; height: 100%"
        @scroll="scroll"
        :scroll-top="scrollTop"
      >
        <view
          class="media"
          :style="{ opacity: 100 - boxOption + '%' }"
          @click="openPicture"
        >
          <u-swiper
            :list="imgList"
            mode="number"
            :effect3d="false"
            :height="545"
            :interval="5000"
            :border-radius="0"
            name="Path"
          ></u-swiper>
          <!-- #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 class="orderIforDiZhi">
            <view class="orderIforDiZhiL">{{ dataList.Name }}</view>
            <view class="orderIforDiZhiR row">
                <view class="orderIforDiZhiRImg">
                    <img 
                    style="width: 23rpx;height:28rpx;position: relative;top: 3rpx;"
                    src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638766148323678002.png"/>
                </view>
                <view class="orderIforDiZhiRText">
                  {{ busInfor.CountryName }},{{ busInfor.CityName }}
                </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.Name }}
            </view
          >
        </view>
        <view class="ReservationInforBox">
            <view class="ReservationInforTitle">预定{{orderInfor.OrderType==1?'接机':orderInfor.OrderType==2?'送机':'包车'}}信息</view>
            <view class="ResInforText row-sb-n" v-if="busInfor.AirportName!=''">
                <view class="ResInforL">机场</view>
                <view class="ResInforR">{{ busInfor.AirportName  }}</view>
            </view>
            <!-- <view class="ResInforText row-sb-n">
                <view class="ResInforL">上车地址</view>
                <view class="ResInforR">{{orderInfor.GetonAddress}}</view>
            </view>
            <view class="ResInforText row-sb-n">
                <view class="ResInforL">下车地址</view>
                <view class="ResInforR">{{orderInfor.GetoffAddress}}</view>
            </view>
            <view class="ResInforText row-sb-n">
                <view class="ResInforL">{{orderInfor.OrderType==1?'接机':orderInfor.OrderType==2?'送机':'包车'}}时间</view>
                <view class="ResInforR">{{orderInfor.OrderDate}}({{getWeek(orderInfor.OrderDate)}})</view>
            </view> -->
            <view class="ResInforText row-sb-n">
                <view class="ResInforL">车型</view>
                <view class="ResInforR">{{orderInfor.CarName}}({{orderInfor.Num}}辆)</view>
            </view>
            <view class="ResInforText row-sb-n">
                <view class="ResInforL">人数</view>
                <view class="ResInforR">最多坐{{ orderInfor.PeopleNum}}人</view>
            </view>
            <view class="ResInforText row" v-if="dataList.CancelPolicy">
                <view class="ResInforL">取消政策</view>
                <view class="ResInforR">
                  <text>
                    {{ dataList.CancelPolicy }}
                  </text>
                </view>
            </view>
        </view>
        <view class="ReservationInforBox">
            <view class="ReservationInforTitle" @click="goback">立即确认</view>
            <view class="ResInforText ResInforTtisp row-sb-n">
                <view class="ResInforTisp">订单提交后，{{orderInfor.OrderType==1?'接机':orderInfor.OrderType==2?'送机':'包车'}}将6个工作日內（不含例休假）确认，保障您的{{orderInfor.OrderType==1?'接机':orderInfor.OrderType==2?'送机':'包车'}}需求。</view>
            </view>
        </view>
        <view style="height: 36rpx;"></view>
      </scroll-view>
    </view>
  </template>
  
  <script>
  
  export default {
    components: {
      
    },
    data() {
      return {
        id: 0,
        boxOption: 0,
        titleStyle: {
          opacity: 0,
        },
        mainColor: "",
        active: 1,
        dataList: {}, //数据
        Up: 0,
        current: 1,
        scrollTop: 100,
        old:{
          scrollTop: 0
        },
        orderInfor:{},
        imgList: [],
        busInfor: {},
      };
    },
   
    onLoad(options) {
      if(options.orderInfor){
        this.orderInfor = JSON.parse(options.orderInfor)
      }
      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;
     
      this.initData()
    },
    created() {
      this.Up = uni.getStorageSync("mall_UserInfo")
        ? uni.getStorageSync("mall_UserInfo").UserPageType
        : 0;
    },
    mounted() {
			uni.getStorage({
				key: "busInfor",
				success: (res) => {
					this.busInfor = JSON.parse(res.data);
				},
			});
		},
    methods: {
      //日期格式化
			getformatDateStr(value) {
				var dt = new Date(value);
				let year = dt.getFullYear();
				let month = (dt.getMonth() + 1).toString().padStart(2, "0");
				let date = (dt.getDate()).toString().padStart(2, "0");
				return year + "-" + month + "-" + date;
			},
      initData() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.apipost(
				"CarSingle_post_GetTYCarSingleProductInfo",{
          ProductId: this.id,
        },
				res => {
					if (res.resultCode == 1) {
						uni.hideLoading();
            this.imgList = []
            for (let i = 0; i < res.data.ImageList.length; i++) {
							this.imgList.push({
								Path: res.data.ImageList[i]
							})
						}
						this.dataList = res.data;
					}
				});
			},
      openPicture() {
        let imgObj = JSON.stringify(this.imgList);
        uni.navigateTo({
          url: "/pages/hotel/picture?imgObj=" + imgObj+'&carType='+this.busInfor.CarType,
        });
      },
      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;
      },
      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,
        });
      },
      // #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.Name ? this.dataList.Name : "帖子";
        let imageUrl = this.imgList && this.imgList.length > 0? this.imgList[0]: "";
        return {
          title: title,
          query:
            "id=" +
            this.id +
            "&user_id=" +
            uid +
            "&SmallShopId=" +
            SmallShopId +
            "&Up=" +
            this.Up +
            "&JumpType=18" +
            "&orderMsg=" +
            JSON.stringify(this.orderInfor),
          imageUrl: imageUrl.Path,
        };
      },
  
      //分享给朋友
      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.Name ? this.dataList.Name : "帖子",
          path:
            "/pages/index/index?id=" +
            this.id +
            "&user_id=" +
            uid +
            "&SmallShopId=" +
            SmallShopId +
            "&Up=" +
            this.Up +
            "&JumpType=18" +
            "&orderMsg=" +
            JSON.stringify(this.orderInfor),
          imageUrl:
            this.imgList && this.imgList.length > 0
              ? this.imgList[0].Path
              : "",
        };
      },
      // #endif
      
    },
  };
  </script>
  
  <style scoped>
  @import url("@/asset/css/flex.css");
  .hotel-detail {
    height: 100vh;
    overflow: hidden;
    width: 100vw;
    font-family: "pingfang";
    background: #F3F3F3;
  }
  
  .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 */
    overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
  }
  
    .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;
    }
    
  </style>
  