<template>
  <div
    class="campsite-detail-page"
    style="margin-top:1.87733rem;">
    <Head/>
    <detail-banner
      :list = "detail.pictureList"
      :looptime="looptime"
      :width="width"
      :height="height"
      :background="background"
      :color="color"
      class="mb-50"
      @prev="prev"
      @next="next"
      @change="changeBanner"
      @click="bannerClick"/>
    <div class="detail-main-container">
      <div>
        <h1 class="campsite-detail-name">{{ detail.name }}</h1>
        <div class="campsite-detail-info">
          <div
            class="flex-aic">
            <img
              style="margin-right: 5px;width: 17px;"
              src="data:image/png;base64,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">
            <div style="font-size: 14px;">{{ detail.address }}</div>
          </div>
          <div
            class="flex-aic"
            style="margin: 13px 0;">
            <img
              style="margin-right: 5px;width: 18px;"
              src="data:image/png;base64,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">
            <span style="color: #666;font-size: 14px;">营地预约热线</span>
            <div><a :href="detail.toPhone">{{ detail.phone }}</a> </div>
          </div>
        </div>
      </div>
      <div>
        <div style="height: 10px;background: #eee;"/>
      </div>
      <div
        id="nav"
        :class="searchBarFixed == true ? 'isFixed' :''"
        class="scroll">
        <div
          style="border-bottom: 1px solid #dfdfdf;"
          class="flex-aic-jcb detail-list" >
          <ul class="select-tab flex-aic-jcb">
            <li
              :class="{active:active=='activity'}"
              class="select-tab-li-l mui-control-item"
              @click="activity()">营地详情</li>
            <li
              :class="{ active:active=='lastest'}"
              class="select-tab-li-l mui-control-item"
              @click="lastest()">配套设施收费</li>
            <li
              :class="{ active:active=='rank'}"
              class="select-tab-li-l mui-control-item"
              @click="rank()" >预定须知</li>
          </ul>
        </div>
      </div>
      <div id="segmentedControlContents">
        <!--详细内容-->
        <div
          id="activityIntro"
          class="scroll0" >
          <div class="base-set">
            营地详情
          </div>
          <div
            class="bt-line"
            v-html="detail.content"/>
        </div>
        <div
          id="lastestDubbing"
          class="scroll1" >
          <div class="base-set">
            配套设施收费
          </div>
          <div
            class="bt-line"
            v-html="detail.configure"/>
        </div>
        <div
          id="rankLlistDetail"
          class="scroll3">
          <div class="base-set" >
            预定须知
          </div>
          <div
            v-html="notice[0].value"/>
        </div>
      </div>
    </div>
    <detail-footer-btn/>
    <go-top/>
  </div>
</template>

<script>
  import axios from '../../plugins/axios'
  import Head from "~/components/head";
  import DetailBanner from '~/components/detailBanner'
  import GoTop from "~/components/goTop";
  import DetailFooterBtn from "~/components/detailFooterBtn";

  export default {
    components: {
      Head,
      DetailBanner,
      GoTop,
      DetailFooterBtn
    },
    data() {
      return {
        looptime: 4000, // 循环时间
        touchend: false,////没有更多数据
        dataType: [],
        totalCount: "",
        dataDetail: [],
        width: 400,
        height:200,
        background: 'red',
        color: '#fff',
        fontSize: '70px',
        active: 'activity',
        searchBarFixed:false,
      };
    },
    async asyncData({ route }) {
      const { data } = await axios.get( "/api/uccn/app/unauth/campsite/shop?id=" + route.query.id);
      let user = data.data;
      data.data.content = data.data.content.replace(/<img/g,"<img style='width:100%'");
      let pic = [];
      data.data.campsiteShopCarouselDetailVos.map(function(item){
        pic.push(item.imgUrl);
      });
      user.pictureList = pic;
      user.pictureNum = pic.length;
      user.toPhone = "tel:" + user.phone;
      if (!user) {
        return error({ message: 'User not found', statusCode: 404 })
      }
      let noticeData = await axios.get('/api/app/cofig/app/unauth/types?types=13');
      let notice = noticeData.data.data;
      return {detail: user, notice: notice}
    },
    created() {
      window.addEventListener('scroll', this.handleScroll);
    },
    methods: {
      // 点击下一页回调
      prev () {},
      // 点击下一页回调
      next () {},
      // 鼠标移入状态点回调
      changeBanner () {},
      bannerClick () {},
      handleScroll: function () {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        let path = $nuxt.$route.path;
        if(path == '/campsiteDetail'){
          var menuTop = document.querySelector('#nav').offsetTop;
          //滑动到指定位置菜单吸顶
          if (scrollTop > menuTop+180) {
            this.searchBarFixed = true;
          }

          //滑动到指定位置相应菜单高亮
          var top1 = document.querySelector('#activityIntro').offsetTop;
          var top2 = document.querySelector('#lastestDubbing').offsetTop;
          var top3 = document.querySelector('#rankLlistDetail').offsetTop;
          if (scrollTop < top1+180) {
            this.active = 'activity';
            this.searchBarFixed = false;
          }
          if (scrollTop < top2+180) {
            this.active = 'activity';
          } else if (scrollTop >= top2+180 && scrollTop < top3+180) {
            this.active = 'lastest';
          } else if (scrollTop >= top3+130) {
            this.active = 'rank';
          }
        }
      },
      lastest(){//配套设施收费
        this.active = "lastest";
        let top1 = document.querySelector('#lastestDubbing').offsetTop;
        let top = document.querySelector('#activityIntro').offsetTop;
        if(this.searchBarFixed){
          document.documentElement.scrollTop = top1 +180;
        } else {
          document.documentElement.scrollTop =  top1+130;
        }
        this.searchBarFixed = true;
      },
      activity(){
        //营地详情
        this.active = "activity";
        let top = document.querySelector('#nav').offsetTop;
        var top1 = document.querySelector('#activityIntro').offsetTop;
        if(this.searchBarFixed){
          document.documentElement.scrollTop = top1 +180;
        } else {
          document.documentElement.scrollTop = top1 +130;
        }
        this.searchBarFixed = true;
      },
      rank(){
        //预定须知
        this.active = "rank";
        let top1 = document.querySelector('#rankLlistDetail').offsetTop;
        if(this.searchBarFixed){
          document.documentElement.scrollTop = top1  +180;
        } else {
          document.documentElement.scrollTop = top1 +130;
        }
        this.searchBarFixed = true;
      }
    },
  };

</script>

<style lang="scss">
  @import "../../assets/styles/mixin";

  .campsite-detail-page {
    font-size: px2rem(26px);
    .campsite-detail-info{
      padding: 13px px2rem(20px);
      font-size: 14px;
      span{
        color: #666;
        min-width: 60px;
        margin-right: 13px;
      }
    }
    .detail-main-container{
      border-radius: 7px 7px 0 0;
      padding-bottom: 60px;
      box-shadow: 0px 0px 13px #666;
      margin-top: -10px;
      z-index: 99;
      position: relative;
      background: #fff;
      .campsite-detail-name{
        padding: 14px px2rem(20px) 0 px2rem(20px);
        font-size: px2rem(34px);
        font-weight: bold;
      }
      .vehicle-detail-config{
        padding: 0 px2rem(20px);
        border-bottom: 1px solid #dfdfdf;
        .config{
          margin-right: 30px;
          margin-bottom: 13px;
          margin-top: 13px;
        }
      }
      .vehicle-lower{
        padding: 0 px2rem(20px);
        font-size: px2rem(30px);
        margin-top: px2rem(20px);
        margin-bottom: px2rem(20px);
        span{
          color: #F25B5B;
          font-size: px2rem(36px);
          font-weight: bold;
          margin-left: px2rem(30px);
          margin-right: px2rem(4px);
        }
      }
      .member-list{
        padding: 0 px2rem(20px);
      }
      .member-list-c img{
        width: 20px;
        height: 20px;
        margin-right: px2rem(20px);
      }
      .member-list-name{
        color: #666;
        font-size:px2rem(26px);
        margin-bottom: px2rem(20px);
      }
      .market-price{
        font-size: px2rem(30px);
        margin: px2rem(34px) 0;
        padding: 0 px2rem(20px);
      }
      .detail-list{
        height: px2rem(100px);
      }
      .select-tab{
        width: 100%;
        .select-tab-li-l{
          font-size:16px;
          color: #999;
          padding: 0 px2rem(20px);
        }
        .select-tab-li-l.active{
          color: #333;
          font-weight: bold;
          height: px2rem(100px);
          line-height: px2rem(100px);
          border-bottom: 2px solid #1bbb9f;
        }
      }
      .scroll0, .scroll1, .scroll2, .scroll3{
        padding: 0 px2rem(20px);
        .base-set{
          margin: 17px 0;
          font-size: 15px;
          font-weight: bold;
        }
        .base-set-name{
          font-size: 13px;
          color: #666;
          padding: 0 10px 6px 0;
        }
      }

      .mint-navbar {
        position: sticky;
        top: 0;
        z-index: 20;

        .mint-tab-item-label {
          font-size: px2rem(30px);
        }

        .mint-tab-item {
          padding: 10px 0;

          &.is-selected {
            color: inherit;
            border: none;
            position: relative;

            &::after {
              content: " ";
              display: inline-block;
              @include wh(20%, 2px);
              background: #2395ff;
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
            }
          }
        }
      }
      .left-item{
        width: 30%;
        border-left: 1px solid #c1c1c1;
        border-right: 1px solid #c1c1c1;
        height: 34px;
        padding-left: 10px;
        line-height: 34px;
      }
      .right-item{
        width:70%;
        border-right: 1px solid #ccc;
        height: 34px;
        line-height: 34px;
        padding-left: 10px;
      }
      .modal-item{
        border-top:1px solid #ccc;
      }
      .kr-article-article .modal-item:last-child{
        border-bottom: 1px solid #ccc;
      }
    }
  }
</style>
