<template>
  <!-- 政策详情 -->
  <view class="policyDetail">
    <view class="tab-box">
      <u-tabs
        :list="typeList"
        :current="active"
        name="Name"
        :is-scroll="false"
        @change="changeHandler"
        :active-color="mainColor"
        bg-color="#FFF"
        :bar-style="barStyle"
        height="100"
      ></u-tabs>
    </view>

    <view class="officialNotice">
      <view class="title" id="notice"> 官方公告信息 </view>
      <view class="desc">
        <rich-text
          :nodes="details.TicketNotice"
          class="policyDetail-richText"
          v-if="details.TicketNotice"
          >></rich-text
        >
        <text v-if="!details.TicketNotice">暂无公告</text>
      </view>

      <view class="title"> 开放时间 </view>
      <view class="desc">
        <view v-for="(item, index) in details.OpenTimeList" :key="index">
          <view class="open-date" v-if="item.StartDay && item.EndDay">
            {{ item.StartDay }}~<text v-if="item.IsNextYear === 1">次年</text
            >{{ item.EndDay }}
          </view>
          <view class="open-item" v-if="item.StartDay && item.EndDay">
            <view class="BusinessStartWeek">
              <text v-if="item.BusinessStartWeek === 0">不限</text>
              <text v-if="item.BusinessStartWeek === 1">周一</text>
              <text v-if="item.BusinessStartWeek === 2">周二</text>
              <text v-if="item.BusinessStartWeek === 3">周三</text>
              <text v-if="item.BusinessStartWeek === 4">周四</text>
              <text v-if="item.BusinessStartWeek === 5">周五</text>
              <text v-if="item.BusinessStartWeek === 6">周六</text>
              <text v-if="item.BusinessStartWeek === 7">周七</text> </view
            >~
            <view class="BusinessEndWeek">
              <text v-if="item.BusinessEndWeek === 0">不限</text>
              <text v-if="item.BusinessEndWeek === 1">周一</text>
              <text v-if="item.BusinessEndWeek === 2">周二</text>
              <text v-if="item.BusinessEndWeek === 3">周三</text>
              <text v-if="item.BusinessEndWeek === 4">周四</text>
              <text v-if="item.BusinessEndWeek === 5">周五</text>
              <text v-if="item.BusinessEndWeek === 6">周六</text>
              <text v-if="item.BusinessEndWeek === 7">周七</text>
            </view>
            <view class="Businesstime" v-if="item.StartTime && item.EndTime">
              {{ item.StartTime }}~{{ item.EndTime }},
              <text v-if="item.StopTime">{{ item.StopTime }}停止入场</text>
            </view>
          </view>
        </view>
      </view>
      <view class="title" id="buyTicket"> 购票须知 </view>
      <view class="desc">
        <rich-text :nodes="details.BookingInfo"></rich-text>
      </view>
      <view class="title" id="tip"> 温馨提示 </view>
      <view class="desc">
        <rich-text :nodes="details.About"></rich-text>
      </view>
    </view>
  </view>
</template>

<script>
// #ifdef MP-ALIPAY
import parseHtml from "../../plugin/htmlparse.js";
// #endif
export default {
  data() {
    return {
      active: 0,
      mainColor: "#DFBE6E",
      barStyle: {
        width: "50rpx ",
        height: "6rpx !important",
        backgroundColor: "#DFBE6E !important",
        borderRadius: "3rpx !important",
      },
      typeList: [
        {
          Id: 0,
          Name: "官方公告",
        },
        {
          Id: 1,
          Name: "购票须知",
        },
        {
          Id: 2,
          Name: "温馨提示",
        },
      ],
      richText: "",
      ID: 0,
      details: {},
    };
  },
  onLoad(options) {
    this.ID = options.id;
    this.getDetail();
    uni.setNavigationBarTitle({
      title: "景区详细信息",
    });
  },
  onPageScroll(res) {},
  methods: {
    changeHandler(i) {
      this.active = i;
      let toID = "";
      if (i === 0) {
        toID = "#notice";
      } else if (i == 1) {
        toID = "#buyTicket";
      } else if (i == 2) {
        toID = "#tip";
      }
      uni.pageScrollTo({
        selector: toID,
        duration: 300,
        success: (res) => {},
      });
    },
    //获取详情
    getDetail() {
      this.request2(
        {
          url: "/api/AppletDining/GetTicketCouponsDetails",
          data: {
            ID: this.ID,
          },
        },
        (res) => {
          if (res.resultCode == 1) {
            // res.data.ScenicSpotTag = res.data.ScenicSpotTag.split(',')
            // res.data.GeographicTag = res.data.GeographicTag.split(',')
            this.details = res.data;
            // #ifdef MP-ALIPAY
            if (this.details.TicketNotice) {
              this.details.TicketNotice = parseHtml(res.data.TicketNotice);
            }
            if (this.details.BookingInfo) {
              this.details.BookingInfo = parseHtml(res.data.BookingInfo);
            }
            if (this.details.About) {
              this.details.About = parseHtml(res.data.About);
            }
            // #endif
          }
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-box {
  width: 750rpx;
  position: fixed;
  top: 0;
  left: 0;
}
.policyDetail {
  margin-top: 100rpx;
  .officialNotice {
    padding: 0 45rpx 0rpx;
  }

  .title {
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 800;
    color: #111111;
    margin-bottom: 45rpx;
  }

  .desc {
    margin-bottom: 60rpx;

    .open-date {
      // width: 660rpx;
      height: 60rpx;
      background-color: #f4f4f4;
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #4b4949;
      line-height: 58rpx;
      padding: 0 30rpx;
    }

    .open-item {
      display: flex;
      height: 60rpx;
      background-color: #ffffff;
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #4b4949;
      line-height: 58rpx;
      padding: 0 30rpx;
      border: 1rpx solid #f4f4f4;

      .Businesstime {
        margin-left: 20rpx;
      }
    }
  }
}
.policyDetail-richText p {
  font-size: 26rpx !important;
  font-weight: 500 !important;
}
</style>
