<template>
  <view
    style="height: 100vh; overflow: hidden; width: 100vw"
    v-if="details.Name"
  >
    <scroll-view
      scroll-y="true"
      style="width: 100%; height: 100%"
      @scroll="scroll"
    >
      <view
        style="
          height: 500rpx;
          position: relative;
          z-index: 1;
          background-color: #e7e7e7;
        "
        :style="{ opacity: 100 - boxOption + '%' }"
      >
        <!-- #ifdef MP-WEIXIN -->
        <view
          @click="goback"
          :style="[titleStyle, { opacity: '100% !important' }]"
          style="
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9;
            padding-left: 6rpx;
          "
        >
          <u-icon
            name="arrow-left"
            size="44"
            color="#ffffff"
            style="margin-top: 22rpx"
          ></u-icon>
        </view>
        <!-- #endif -->
        <image
          class="banner-img"
          :src="details.AllPicList[0].TagPicList[0].Path"
          mode="aspectFill"
          @click="goUrl('/pages/ticketCoupons/imgList')"
        ></image>
      </view>
      <view class="ticket-title-bar" :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;'background-color':'#000';white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
          class="name-ali"
        >
          {{ details.Name }}
        </view>
      </view>
      <view style="position: relative; z-index: 2">
        <view
          style="
            width: 750rpx;
            position: absolute;
            top: -70px;
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
            background-color: #fff;
          "
        >
          <view class="baseinfo">
            <view class="info1">
              <view class="name">
                {{ details.Name }}
              </view>
              <view class="score-bg">
                <image
                  src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/pingfen-bg.png"
                  mode="aspectFit"
                  class="pf-bg"
                ></image>
                <view class="score">
                  {{ details.ScoreNum }}
                  <text
                    v-if="
                      details.ScoreNum === 1 ||
                      details.ScoreNum === 2 ||
                      details.ScoreNum === 3 ||
                      details.ScoreNum === 4 ||
                      details.ScoreNum === 5
                    "
                    >.0</text
                  >
                </view>
              </view>
            </view>
            <view class="info2">
              <view class="BusinessState">
                <view v-if="details.BusinessState === 1">
                  今日开放
                  <text class="OpenTimeStr">{{ details.OpenTimeStr }}</text>
                </view>
                <text v-if="details.BusinessState === 0">暂未开发</text>
              </view>
              <view class="commenticon-box">
                <!-- 0条点评
								<u-icon name="arrow" color="#6E6E6E" size="20rpx" class="icon"></u-icon> -->
              </view>
            </view>
            <view class="info3">
              <view class="tag-box">
                <view
                  v-for="(_item, _index) in details.ScenicSpotTag"
                  :key="_index"
                >
                  <u-tag
                    :text="_item"
                    bg-color="#FFF"
                    border-color="#DFBE6E"
                    color="#DFBE6E"
                    size="mini"
                    class="tag"
                    v-if="_item"
                  ></u-tag>
                </view>
                <view
                  v-for="(_item, _index) in details.GeographicTag"
                  :key="_index"
                >
                  <u-tag
                    :text="_item"
                    bg-color="#FFF"
                    border-color="#DFBE6E"
                    color="#DFBE6E"
                    size="mini"
                    class="tag"
                    v-if="_item"
                  ></u-tag>
                </view>
              </view>
              <view
                class="policy-detail"
                @click="goUrl('/pages/ticketCoupons/policyDetail')"
              >
                政策详情
                <u-icon
                  name="arrow"
                  color="#6E6E6E"
                  size="24rpx"
                  class="icon"
                ></u-icon>
              </view>
            </view>
            <view class="line"></view>
            <view class="info4">
              <view class="mark-icon">
                <u-icon
                  name="location"
                  color="#111111"
                  size="24rpx"
                  class="icon"
                ></u-icon>
              </view>
              <view class="address">
                {{ details.Address }}
              </view>
              <view
                class="see-map"
                @click="goMap(details.Address, details.Lng, details.Lat)"
              >
                地图详情
                <u-icon
                  name="arrow"
                  color="#6E6E6E"
                  size="24rpx"
                  class="icon"
                ></u-icon>
              </view>
            </view>
          </view>
          <view class="empty"></view>
          <view class="ticket-info">
            <view class="ticket-title">
              门票
              <text class="ticket-title-bg"></text>
            </view>
            <view class="ticket-navs" v-if="TicketList.length > 0">
              <view
                class="ticket-nav"
                :class="{ 'check-ticket-nav': checkTicketNavIndex === 1 }"
                @click="changeCheckTicketNavIndex(1)"
                v-if="haveticket[0].date"
              >
                {{ haveticket[0].date }}
              </view>
              <view
                class="ticket-nav"
                :class="{ 'check-ticket-nav': checkTicketNavIndex === 2 }"
                @click="changeCheckTicketNavIndex(2)"
                v-if="haveticket[1].date"
              >
                {{ haveticket[1].date }}
              </view>
              <view
                class="ticket-nav"
                :class="{ 'check-ticket-nav': checkTicketNavIndex === 3 }"
                @click="changeCheckTicketNavIndex(3)"
              >
                {{ otherDate }}
              </view>
              <calendar
                ref="calendar"
                :insert="false"
                :selected="calendar"
                @confirm="confirm"
                @monthSwitch="changeMonth"
              ></calendar>
            </view>
            <view>
              <view class="no-data" v-if="TicketList.length === 0">
                <image
                  src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/no-data.png"
                  mode="aspectFit"
                  class="no-data-img"
                ></image>
                <view class="zhanwu"> 暂无数据 </view>
              </view>
              <view
                v-for="(item, index) in TicketList"
                :key="index"
                class="ticket-list-box"
                :class="{ 'last-item': index == TicketList.length - 1 }"
                v-if="TicketList.length > 0"
              >
                <view class="ticket-key" v-if="item.Key">
                  {{ item.Key }}
                </view>
                <view class="ticket-list">
                  <view
                    v-for="(_item, _index) in item.TicketList"
                    :key="_item.Id"
                    class="ticket-list-item"
                    :class="{
                      'last-item': _index == item.TicketList.length - 1,
                    }"
                  >
                    <view class="TicketName">
                      {{ _item.TicketName }}
                    </view>
                    <view class="price">
                      <text class="price-pre">￥</text
                      >{{
                        $utils.getretailer() == true
                          ? _item.HPriceB
                          : _item.HPriceC
                      }}
                      <text class="price-nex">起</text>
                    </view>
                    <view class="tag" v-if="_item.IsSameDayBuy == 1">
                      <image
                        class="tag-img"
                        src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/likeruyuan.png"
                        mode="aspectFit"
                        v-if="_item.IsSameDayBuy == 1"
                      ></image>
                      <view
                        class="tag-item"
                        v-if="
                          (_item.SubscribeTime && _item.IsSameDayBuy == 1) ||
                          (_item.ChangeTickets && _item.IsSameDayBuy == 1)
                        "
                      >
                        <text
                          v-if="_item.SubscribeTime && _item.IsSameDayBuy == 1"
                          >随时可买</text
                        >
                        <text
                          class="gap"
                          v-if="_item.ChangeTickets && _item.IsSameDayBuy == 1"
                          >无需换票</text
                        >
                      </view>
                    </view>
                    <!-- 无忧退款 -->
                    <view class="WorryFreeRefund">
                      <text v-if="_item.IsWorryFreeRefund === 0">无忧退款</text>
                      <text v-if="_item.IsWorryFreeRefund != 0">有条件退</text>
                    </view>
                    <!-- 预订按钮 -->
                    <view class="pre-buy" @click="chooseSubscribeTicket(_item)">
                      预订
                    </view>
                    <!-- 已售 -->
                    <view class="ticket-sell">
                      <view class="sell">已售 {{ _item.SaleCount }}</view>
                      <view class="vertical-line"></view>
                      <view class="buy-know" @click="openBuyNotice(_item)"
                        >购买须知</view
                      >
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="empty"></view>
          <!-- 旅客点评 -->
          <!-- <view class="comment-box">
						<view class="ticket-title">
							旅客点评
							<text class="ticket-title-bg"></text>
						</view>
						
						<view class="evaluate-box">
								<view class="score-box">
									<view class="score">
										{{details.ScoreNum}}
										<text v-if="details.ScoreNum==1||details.ScoreNum==2||details.ScoreNum==3||details.ScoreNum==4||details.ScoreNum==5">.0</text>
										<text class="score-nex gap">分</text>
										<text class="score-nex">不错</text>
									</view>
									<view class="">
										
									</view>
								</view>
						</view>
					</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="details.HotelList"
                  v-for="subItem in details.HotelList"
                >
                  <near-good :goodItem="subItem" :goodType="1"></near-good>
                </template>
              </template>
              <template v-if="nearbyType == 1">
                <template
                  v-if="details.DiningList"
                  v-for="subItem in details.DiningList"
                >
                  <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"
                  >附近满足条件景点({{ scenicArr.length }})</view
                >
              </view>
            </view>
            <view>
              <recommed-hotel
                :scenicArr="scenicArr"
                :dayObj="dayObj"
                :searchObj="searchObj"
              >
              </recommed-hotel>
              <!-- <recommed-hotel :hotelType="1"></recommed-hotel> -->
            </view>
          </view>
        </view>

        <!-- 购票须知弹出层 -->
        <view>
          <u-popup v-model="showPop" mode="bottom" border-radius="40">
            <buyNotice
              :TicketData="curTicketData"
              :coverImg="details.AllPicList[0].TagPicList[0].Path"
              :score="details.ScoreNum"
              @success="successBuyNotice"
            ></buyNotice>
          </u-popup>
        </view>
        <!-- 填写订单弹出层 -->
        <view>
          <u-popup
            v-model="showSubscribeTicketPop"
            mode="bottom"
            border-radius="40"
          >
            <view>
              <subscribeTicket
                :dateStr="Date"
                :TicketID="TicketID"
                :TitekCounponId="ID"
                :TicketName="TicketName"
                @close="showSubscribeTicketPop = false"
                :TicketImg="details.AllPicList[0].TagPicList[0].Path"
                :msgPath="msgPath"
              ></subscribeTicket>
            </view>
          </u-popup>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import calendar from "./components/uni-calendar/uni-calendar.vue";
import buyNotice from "./components/buyNotice.vue";
import subscribeTicket from "./components/subscribeTicket.vue";
import nearGood from "./components/near-good.vue";
import recommedHotel from "./components/recommed-hotel.vue";
export default {
  components: {
    calendar,
    buyNotice,
    subscribeTicket,
    nearGood,
    recommedHotel,
  },
  data() {
    return {
      ID: 0,
      Date: "", //日期
      details: {},
      titleStyle: {},
      active: 0,
      mainColor: "",
      controls: false, //显示默认控件
      videoContext: "",
      checkTicketNavIndex: 1,
      imgBaseUrl: "",
      calendar: [
        {
          date: "",
          info: "",
        },
      ], //日历高亮
      showPop: false,
      curTicketData: {},
      showSubscribeTicketPop: false, //订单弹出层
      TicketID: 0, //门票id
      TicketName: "",
      otherDate: "其他日期",
      msgPath: "",
      Up: 0,
      nearbyType: 0,
      scenicArr: [], //推荐景点
      haveticket: [{ date: "" }, { date: "" }], //最近3天的票
      TicketList: [],
    };
  },
  onShareTimeline() {
    // setTimeout(() => {
    //   console.log("分享朋友圈调用");
    //   this.getReceive();
    // }, 2500);
    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.details.Name ? this.details.Name : "门票";
    let imageUrl = this.details.AllPicList[0].TagPicList[0].Path
      ? this.details.AllPicList[0].TagPicList[0].Path
      : "";
    let id = this.ID;
    this.Up = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").UserPageType
      : 0;
    return {
      title: title,
      query:
        "id=" +
        this.id +
        "&user_id=" +
        uid +
        "&SmallShopId=" +
        SmallShopId +
        "&Up=" +
        this.Up,
      imageUrl: imageUrl,
    };
  },
  onShareAppMessage(res) {
    // setTimeout(() => {
    //   console.log("分享好友调用");
    //   this.getReceive();
    // }, 2500);
    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.details.Name ? this.details.Name : "门票",
      path:
        "/pages/index/index?id=" +
        this.ID +
        "&user_id=" +
        uid +
        "&SmallShopId=" +
        SmallShopId +
        "&Up=" +
        this.Up +
        "&JumpType=15",
      imageUrl: this.details.AllPicList[0].TagPicList[0].Path
        ? this.details.AllPicList[0].TagPicList[0].Path
        : "",
    };
  },
  onLoad(options) {
    let that = this;
    if (options && options.id) {
      this.ID = parseInt(options.id);
      this.getDetail();
    }
    this.msgPath = "/pages/ticketCoupons/detail?id=" + options.id;
    uni.getSystemInfo({
      success(res) {
        that.titleStyle = {
          height: "45px",
          paddingTop: `${res.statusBarHeight}px`,
          opacity: 0,
        };
      },
    });
    this.mainColor = this.$uiConfig.mainColor;

    let d = new Date();
    let year = d.getFullYear();
    let month = d.getMonth() + 1;
    if (month < 10) {
      month = "0" + month;
    }
    let day = d.getDate();
    if (day < 10) {
      day = "0" + day;
    }
    let today = year + "-" + month + "-" + day;
    this.Date = today;
    this.calendar.date = today;
    this.getRecomHotel();
    this.getGoodsprice(this.Date);
  },

  methods: {
    //选择其他日期门票
    confirm(e) {
      if (e.fulldate == this.haveticket[0].date) {
        this.checkTicketNavIndex = 1;
        this.otherDate = "其他日期";
      } else if (e.fulldate == this.haveticket[1].date) {
        this.checkTicketNavIndex = 2;
        this.otherDate = "其他日期";
      } else {
        this.otherDate = e.fulldate;
      }
      this.Date = e.fulldate;
      // this.calendar[0].date = e.fulldate

      this.getDetailByDate();
      this.$forceUpdate();
    },
    openBuyNotice(item) {
      this.curTicketData = item;
      this.showPop = true;
    },
    goUrl(url) {
      uni.navigateTo({
        url: url + "?id=" + this.ID,
      });
    },
    chooseSubscribeTicket(item) {
      this.showSubscribeTicketPop = true;
      this.TicketID = item.Id;
      this.TicketName = item.TicketSubName + item.TicketName;
    },
    //获取详情
    getDetail() {
      uni.showLoading({
        title: "加载中...",
      });
      this.request2(
        {
          url: "/api/AppletDining/GetTicketCouponsDetails",
          data: {
            ID: this.ID,
          },
        },
        (res) => {
          uni.hideLoading();
          if (res.resultCode == 1) {
            res.data.ScenicSpotTag = res.data.ScenicSpotTag.split(",");
            res.data.GeographicTag = res.data.GeographicTag.split(",");
            this.details = res.data;
            if (res.data.newMealList.length > 0) {
              this.TicketList = [];
              this.TicketList = res.data.newMealList[0].MealList;
              this.haveticket[0].date = res.data.newMealList[0].DayStr;
              this.haveticket[1].date = res.data.newMealList[1].DayStr;
            }
          }
        },
        (err) => {
          uni.hideLoading();
        }
      );
    },
    // 根据景点id与指定日期获取门票列表信息
    getDetailByDate() {
      this.request2(
        {
          url: "/api/AppletDining/GetTicketCouponsTicketList",
          data: {
            ID: this.ID,
            BuyDate: this.Date,
          },
        },
        (res) => {
          if (res.resultCode == 1) {
            this.TicketList = res.data;
          }
        }
      );
    },

    changeHandler(i) {
      this.active = i;
    },

    scroll(e) {
      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.tooltipShow = false;
      this.$forceUpdate();
    },
    goback() {
      uni.navigateBack({
        delta: 1,
      });
    },

    goMap(name, lon, lat) {
      let newLat = parseFloat(lat);
      let newLon = parseFloat(lon);
      uni.openLocation({
        latitude: newLat,
        longitude: newLon,
        scale: 18,
        name,
        address: name,
        success: (res) => {},
        fail: (err) => {},
      });
    },
    // 选择门票日期
    changeCheckTicketNavIndex(i) {
      this.checkTicketNavIndex = i;
      if (i === 1) {
        // let d = new Date();
        // let year = d.getFullYear();
        // let month = d.getMonth() + 1
        // if (month < 10) {
        // 	month = '0' + month
        // }
        // let day = d.getDate()
        // if (day < 10) {
        // 	day = '0' + day
        // }
        // let today = year + '-' + month + '-' + day
        // this.Date = today
        this.otherDate = "其他日期";
        this.Date = this.haveticket[0].date;
        this.getDetailByDate();
        this.$forceUpdate();
      } else if (i === 2) {
        // let d = new Date();
        // let nextDate = new Date(d.getTime() + 24 * 60 * 60 * 1000);
        // let year = nextDate.getFullYear();
        // let month = nextDate.getMonth() + 1
        // if (month < 10) {
        // 	month = '0' + month
        // }
        // let day = nextDate.getDate()
        // if (day < 10) {
        // 	day = '0' + day
        // }
        // let tomorrow = year + '-' + month + '-' + day
        // this.Date = tomorrow
        this.otherDate = "其他日期";
        this.Date = this.haveticket[1].date;
        this.getDetailByDate();
        this.$forceUpdate();
      } else if (i === 3) {
        this.$refs.calendar.open();
      }
    },
    successBuyNotice() {
      this.showPop = false;
      this.showSubscribeTicketPop = true;
    },
    changeNearbyType(t) {
      this.nearbyType = t;
    },
    getGoodsprice(date) {
      this.request2(
        {
          url: "/api/AppletDining/GetMonthTicketList",
          data: {
            TicketID: 0,
            BuyDate: date,
            TicketCounponID: this.ID,
          },
        },

        (res) => {
          if (res.resultCode === 1) {
            // calendar: [{
            // 	date: "",
            // 	info: ''
            // }],
            this.calendar = [];
            let now = new Date();
            now.setHours(0); //设置小时
            now.setMinutes(0); //设置分钟
            now.setSeconds(0); //设置秒
            now.setMilliseconds(0); //设置毫妙
            let today = now.getTime();
            res.data.map((i) => {
              let resDay = Date.parse(i.Year + "-" + i.Month + "-" + i.Day);
              if (i.IsHavePrice === 1 && resDay >= today) {
                let obj = {
                  date: i.Year + "-" + i.Month + "-" + i.Day,
                  // info:"有票",
                };
                this.calendar.push(obj);
              }
            });
          }
        }
      );
    },
    //获取推荐景点
    getRecomHotel() {
      this.request2(
        {
          url: "/api/AppletDining/GetTicketCouponsPage",
          data: {
            pageIndex: 1,
            pageSize: 10,
            Name: "",
            FoodTypeIds: 0,
            IsFree: -1,
            IsSameDayBuy: -1,
            IsWorryFreeRefund: -1,
            OrderBy: 3,
            ID: parseInt(this.ID),
          },
        },
        (res) => {
          if (res.resultCode == 1) {
            this.scenicArr = [];
            let tempHotel = res.data.pageData;
            tempHotel.forEach((x) => {
              if (this.scenicArr.length < 2) {
                this.scenicArr.push(x);
              }
            });
          }
        }
      );
    },
    changeMonth(val) {
      let now = new Date();
      now.setDate(1);
      now.setHours(0); //设置小时
      now.setMinutes(0); //设置分钟
      now.setSeconds(0); //设置秒
      now.setMilliseconds(0); //设置毫妙
      let curMonth = now.getTime();

      let chooseYear = val.year;
      let chooseMonth = val.month;
      if (chooseMonth < 10) {
        chooseMonth = "0" + chooseMonth;
      }
      let date = chooseYear + "-" + chooseMonth + "-01";
      let changeMonth = Date.parse(date);
      if (changeMonth >= curMonth) {
        this.getGoodsprice(date);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.banner-img {
  width: 750rpx;
  height: 500rpx;
}

.ticket-title-bar {
  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;
}

.label-b {
  height: 20px;
  padding: 0 3px;
  font-size: 13px;
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
}

.brand-xinx {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.brand-xinx-item {
  width: 33%;
  font-size: 17px;
}

.brand-xinx-item-m {
  font-size: 12px;
  color: #a4a4a4;
  margin: 10px 0;
}

.brand-xinx-item-t {
  display: flex;
  align-items: flex-end;
  font-weight: bold;
}

.brand-x {
  width: 100%;
  display: flex;
  align-items: flex-start;
  margin-top: 18px;
}

.brand-x-l {
  font-size: 13px;
  color: #a4a4a4;
  width: 130rpx;
}

.brand-x-r {
  font-size: 13px;
  color: #1f1f1f;
  line-height: 20px;

  font-family: PingFang SC;
  width: calc(100vw - 40px - 130rpx);
}

.brand-title {
  width: 134rpx;
  margin-top: 30px;
}

.brand-title image {
  width: 100%;
  height: auto;
}

.Listbox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.Listbox-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 170rpx;
  align-items: center;
  justify-content: center;
}

.Listbox-item image {
  width: 74rpx;
  height: auto;
}

.list-item-text {
  width: calc(100vw / 4);
  margin-top: 5px;
  text-align: center;
  font-size: 12rpx;
}

.no-data {
  .no-data-img {
    width: 180rpx;
    height: 240rpx;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .zhanwu {
    text-align: center;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    margin-top: 20rpx;
  }
}

.baseinfo {
  padding: 30rpx 45rpx;

  .info1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .name {
      width: 575rpx;
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 800;
      color: #111111;
      line-height: 44rpx;
    }

    .score-bg {
      position: relative;
      width: 65rpx;
      height: 65rpx;
      background-color: #ffffff;

      .pf-bg {
        width: 65rpx;
        height: 65rpx;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
      }
    }

    .score {
      width: 64rpx;
      height: 54rpx;
      // background: linear-gradient(0deg, rgba(228, 177, 53, 0.72), rgba(223, 190, 110, 0));
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 800;
      color: #ffffff;
      line-height: 44rpx;
      position: absolute;
      left: 8rpx;
      top: 4rpx;
      z-index: 2;
    }
  }

  .info2 {
    font-size: 20rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #dfbe6e;
    line-height: 44rpx;
    display: flex;
    justify-content: space-between;

    .BusinessState {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 800;
      color: #dfbe6e;

      .OpenTimeStr {
        margin-left: 10rpx;
        color: #111111;
        font-weight: bold;
      }
    }

    .commenticon-box {
      display: flex;
    }

    .icon {
      margin-left: 10rpx;
    }
  }

  .info3 {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .tag-box {
      display: flex;
      align-items: center;

      .tag {
        margin-right: 10rpx;
      }
    }

    .policy-detail {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #111111;
      display: flex;
      align-items: center;

      .icon {
        margin-left: 10rpx;
      }
    }
  }

  .line {
    height: 1rpx;
    background-color: #111111;
    opacity: 0.1;
    margin: 35rpx 0;
  }

  .info4 {
    height: 70rpx;
    display: flex;
    align-items: center;

    .mark-icon {
      width: 22rpx;
      margin-right: 20rpx;
    }

    .address {
      width: 420rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 800;
      color: #111111;
      line-height: 44rpx;
      margin-right: 70rpx;
    }

    .see-map {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #111111;
      line-height: 44rpx;
      display: flex;
      align-items: center;
      .icon {
        margin-left: 10rpx;
      }
    }
  }
}

.empty {
  height: 20rpx;
  background-color: #ecf1f4;
}

.ticket-title {
  // width: 70rpx;
  height: 50rpx;
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #1f1f1f;
  background-color: transparent;
  // line-height: 44rpx;
  position: relative;
  margin-bottom: 40rpx;

  .ticket-title-bg {
    width: 70rpx;
    height: 10rpx;
    background-color: #dfbe6e;
    border-radius: 4px;
    position: absolute;
    left: 0;
    bottom: 6rpx;
    z-index: 1;
    opacity: 0.6;
  }
}

.ticket-info {
  padding: 50rpx 45rpx;

  .ticket-navs {
    // height: 140rpx;
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;

    .ticket-nav {
      height: 60rpx;
      background-color: #ecf1f4;
      border-radius: 20rpx;
      text-align: center;
      line-height: 60rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #111111;
      padding: 0 30rpx;
      margin-right: 20rpx;
    }

    .check-ticket-nav {
      background-color: #111111 !important;
      color: #ffffff !important;
    }
  }

  .ticket-list-box {
    margin-bottom: 50rpx;

    .ticket-key {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 800;
      color: #111111;
      margin-bottom: 25rpx;
    }

    .ticket-list {
      padding: 40rpx 40rpx 0rpx 40rpx;
      background-color: #f4f4f4;

      .ticket-list-item {
        padding-bottom: 30rpx;
        margin-bottom: 30rpx;
        border-bottom: 2rpx solid #e4e4e4;
        position: relative;

        .TicketName {
          max-width: 450rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #111111;
          margin-bottom: 20rpx;
        }

        .price {
          font-size: 40rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #d91818;
          position: absolute;
          top: 0;
          right: 0;

          .price-pre {
            font-size: 22rpx;
          }

          .price-nex {
            font-size: 22rpx;
            color: #919191;
          }
        }

        .tag {
          display: flex;
          max-width: 70%;
          height: 32rpx;
          margin-bottom: 20rpx;

          .tag-img {
            width: 105rpx;
            height: 32rpx;
            // background-color: #FFFFFF;
            border-radius: 4rpx;
          }

          .tag-item {
            border: 2rpx solid #dfbe6e;
            border-radius: 0px 4rpx 4rpx 0px;
            background-color: #f4f4f4;
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #111111;
            padding: 0 14rpx;
          }

          .gap {
            margin-left: 15rpx;
          }
        }

        // <!-- 无忧退款 -->
        .WorryFreeRefund {
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #dfbe6e;
          margin-bottom: 15rpx;
        }

        .pre-buy {
          width: 114rpx;
          height: 60rpx;
          background: #111111;
          border-radius: 8rpx;
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: 800;
          color: #ffffff;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          top: 85rpx;
          right: 0rpx;
        }

        .ticket-sell {
          display: flex;
          align-items: center;

          .sell {
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #111111;
            // letter-spacing:2rpx
          }

          .vertical-line {
            width: 1rpx;
            height: 22rpx;
            margin: 0 15rpx;
            background-color: #111111;
          }

          .buy-know {
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 800;
            color: #111111;
          }
        }
      }
    }
  }

  .last-item {
    border-bottom: none !important;
    margin-bottom: 0rpx !important;
  }
}

.comment-box {
  padding: 50rpx 45rpx;

  .score-box {
    width: 235rpx;
    display: flex;

    .score {
      font-size: 60rpx;
      font-family: PingFang SC;
      font-weight: 700;
      color: #f0c253;
      line-height: 60rpx;

      // background: linear-gradient(0deg, #F0C253 0%, #FDD679 100%);
      .score-nex {
        font-size: 24rpx;
        font-weight: 500;
        line-height: 24rpx;
      }

      .gap {
        margin-right: 10rpx;
      }
    }
  }
}

.detail-box {
  padding: 50rpx;
}

.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;
}

.detail-box .nearby-type.active {
  color: #dfbe6e;
  background: rgba(223, 190, 110, 0.2);
}

.big-title {
  position: relative;
}

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

  position: absolute;
  left: 0;
  bottom: 6rpx;
  z-index: 1;
}

.big-title text {
  font-size: 34rpx;
  font-weight: bold;
  color: #1f1f1f;
  position: relative;
  z-index: 2;
}

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

.nearby-type {
  padding: 0 16rpx;
  height: 40rpx;

  background: #fff;
  border-radius: 20rpx;
  margin-right: 10rpx;

  font-size: 28rpx;
  font-weight: 500;
  color: #1f1f1f;
}

.active {
  color: #dfbe6e;
  background: rgba(223, 190, 110, 0.2);
}

.name-ali {
  // #ifdef MP-ALIPAY
  box-sizing: border-box;
  padding-left: 30rpx;
  // #endif
}
</style>
