<template>
  <div>
    <menu-modal></menu-modal>
    <div class="main-container"  style="margin-top: 140px;">
      <div class="wrap">
        <div class="bread-menu">
          <nuxt-link to="/">首页></nuxt-link>
          <nuxt-link to="/campsite">房车营地></nuxt-link>
          <span>{{detail.name}}</span>
        </div>
        <div class="clearfix" style="background-color:#fff;padding:40px 20px 40px 40px;width:1120px;height:522px">
          <div style="float:left;width:544px;margin-right:10px">
            <div class="gallery-top-box" style="width:100%">
              <div class="swiper-container gallery-top" ref="mySwiper">
                <div class="swiper-wrapper" >
                  <div
                    class="swiper-slide"
                    v-for="(item,idx) in detail.pictureList"
                    :key="idx"
                  >
                    <img :src="item.imgUrl" style="width:100%;height:374px" />
                  </div>
                </div>
              </div>
              <div class="gallery-thumbs-box" style="width:554px">
                <div class="swiper-container gallery-thumbs" style="width:554px">
                  <div class="swiper-wrapper swiper-wrapper-thu" style="width:554px">
                    <div
                      class="swiper-slide imgWidth"
                      v-for="(item,index) in detail.pictureList"
                      :key="index"
                      @click="changeImgIndex(index,detail.pictureList.length)"

                    >
                      <img
                        :src="item.imgUrl"
                        :class="preIndex==index?'active':''"
                        alt
                        style="width:106px;height:64px"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="float:left;padding-left:20px;width:495px">
            <h2 style="font-size:20px;font-weight:bold">{{detail.name}}</h2>
            <div style="font-weight: 400;font-size:16px;margin:30px 0 210px 0"><img style="vertical-align:middle" src="../../assets/images/local.png" alt="欣新房车，让生活更美好"/>{{detail.address}}</div>
            <div style="" class="clearfix">
              <button class="buttonDetails" @click="visiblePic()" style="float:left;margin-right:30px">预定营地</button>
              <div style="float:left" class="clearfix" v-if="visible">
                <div style="float:left;width:114px;margin-right:30px;text-align:center">
                  <div style="background:#FFF5E6;border:2px solid #FFB74B">
                  <img src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png" style="width: 90px;margin:12px 10px 8px 10px;"/>
                  <div style="color: #FFB74B;font-size: 14px;margin-bottom:11px">滴房车App</div>
                  </div>
                  <div style="margin-top:8px;" class="scan-notice-c">
                    <div>安卓用户微信扫码</div>
                    <div>可马上下单</div>
                    <!-- <h6 style="font-size:12px;font-weight:400">安卓用户微信扫码可马上下单</h6> -->
                  </div>
                </div>

                <div style="float:left;width:114px;text-align:center">
                  <div style="background:#FFF5E6;border:2px solid #FFB74B">
                  <img src="../../assets/images/xxfczs.jpg" style="width: 90px;margin:12px 10px 8px 10px;"/>
                  <div style="color: #FFB74B;font-size: 14px;margin-bottom:11px">欣新助手小程序</div>
                  </div>
                  <div style="margin-top:8px;" class="scan-notice-c">
                    <div>微信扫码进入</div>
                    <div>欣新房车助手可预订</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="clearfix" style="margin-top:40px">
          <div style="float:left;width:800px;background-color:#fff;padding:31px 50px;">
            <h3 style="font-size:16px;font-weight:bold;margin-bottom:20px">营地详情</h3>
          <div  v-html="detail.content">
          </div>
          <h3 style="margin:31px 0 20px 0;font-size:16px;font-weight:bold">配套设施收费</h3>
          <div v-html="detail.configure">
          </div>
          <h3 style="margin:31px 0 20px 0;font-size:16px;font-weight:bold">预定须知</h3>
          <div v-html="notice[0].value">
          </div>
          </div>
          <div id = "fixContainer" class="hot-r-campsite" style="float:left;width:300px;margin-left:20px;background-color:#fff;text-align:center">
            <div id="campsiteHotId" :class="barFixed?'isFixed':''">
              <h3 style="height:53px;font-weight:400;line-height:53px;border-bottom:1px solid #EEEEEE;font-size:16px">热门营地</h3>
              <div v-for="(item,index) in hotList" :key="index" style="width:100%;padding:25px 60px 0 60px">
              <img :src="item.imgUrl" alt="" style="width:180px;height:135px">
              <h5 style="overflow: hidden;text-overflow:ellipsis;margin:21px 0 30px 0;font-weight:400;font-size:16px;white-space: nowrap;">{{item.name}}</h5>
               <nuxt-link :to="item.link"><button class="buttonDetail" style="font-size:14px;margin-bottom:57px" >营地详情</button></nuxt-link>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <go-top></go-top>
    <footer-modal></footer-modal>
  </div>
</template>

<script>
import axios from '../../plugins/axios'
import menuModal from "../../components/menu";
import footerModal from "../../components/footer";
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
import GoTop from "../../components/goTop";
export default {
  transition: "bounce",
  components: {
    GoTop,
    menuModal,
    footerModal
  },
  created() {
    if (typeof window !== 'undefined') {
      window.addEventListener('scroll', this.handleScroll);
    }
  },
  data() {
    return {
      lengthPic: 0,
      preIndex: 0, //当前轮播选中图
      visible: false,
      barFixed: false
    };
  },
  validate({ params }) {
    return !isNaN(+params.id);
  },
  async asyncData({ env, params, route, error}) {
      const { data } = await axios.get( "/api/uccn/app/unauth/campsite/shop?id=" + params.id);
      let user = data.data;
      data.data.content = data.data.content.replace(/<img/g,"<img style='width:100%'");
      let pic = data.data.campsiteShopCarouselDetailVos;
      user.pictureList = pic;
      user.pictureNum = pic.length;
      if (!user) {
        return error({ message: 'User not found', statusCode: 404 })
      }
      let tempBannerData = await axios.get('/api/uccn/random/list/app/unauth/get?type=3');
      let hot = tempBannerData.data.data;
      hot.map(function(item){
        item.link = encodeURI('/campsiteDetails/' + item.id+'?name='+item.title);
        item.link = encodeURI(item.link)
      });
      let noticeData = await axios.get('/api/app/cofig/app/unauth/types?types=13');
      let notice = noticeData.data.data;
      return {detail: user, hotList: hot, notice: notice}
    },
  methods: {
    changeImgIndex(index, length) {
      this.$refs.mySwiper.swiper.slideTo(index + 1, 1000, true);
      this.lengthPic = length;
    },
    visiblePic() {
      this.visible = !this.visible;
    },
    handleScroll: function () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      let path = $nuxt.$route.path;
      if(path.indexOf('/campsiteDetail') != -1 ){
        var menuTop = document.querySelector('#campsiteHotId').offsetTop;
        console.log(menuTop+"--"+scrollTop);
        //滑动到指定位置菜单吸顶
        if (scrollTop > menuTop-120) {
          this.barFixed = true;
        }
        let fixContainer = document.querySelector('#fixContainer').offsetTop;
        if(scrollTop<fixContainer-120){
          this.barFixed = false;
//          this.tabIndex = 0;
        }
      }
    },
  },
  mounted() {
    let t = this;
    let galleryThumbs = new Swiper(".gallery-thumbs", {
      spaceBetween: 10,
      slidesPerView: 5,
      freeMode: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true
    });
    let galleryTop = new Swiper(".gallery-top", {
      spaceBetween: 10,
      loop: true,
       autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
      on: {
        slideChangeTransitionEnd: function() {
          t.preIndex = this.activeIndex - 1;
          if (t.preIndex == t.detail.pictureNum) {
            t.preIndex = 0;
          }
          // console.log(this.activeIndex);
        }
      },
      // navigation: {
      //   nextEl: ".swiper-button-next",
      //   prevEl: ".swiper-button-prev"
      // },
      thumbs: {
        swiper: galleryThumbs
      }
    });

  },
  head: {
    title: "营地详情"
  }
};
</script>

<style scoped>
  .hot-r-campsite  .isFixed{
    position: fixed;
    top: 120px;
    width: 300px;
    background: #fff;
  }
.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.scan-notice-c{
  color: #666;
  font-size: 12px;
}
.clearfix {
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

.gallery-top img {
  width: 100%;
}
.swiper-container{
    height: auto;
}
.imgWidth{
  height:64px;
  width:100px!important
}
.swiper-wrapper-thu {
  /*max-width: 293px;*/
  margin: 0 !important;
}
.swiper-wrapper-thu img {
  width: 100%;
  border: 2px solid #fff;
}
.swiper-wrapper-thu img.active {
  border: 2px solid #1bbb9f;
  padding: 5px;
}
.buttonDetails {
  width: 180px;
  font-size: 20px;
  height: 60px; /* 高度 */
  border-width: 0px; /* 边框宽度 */
  background: #1bbb9f; /* 背景颜色 */
  cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
  outline: none; /* 不显示轮廓线 */
  font-family: Microsoft YaHei; /* 设置字体 */
  color: white; /* 字体颜色 */
}
.buttonDetail{
    width: 150px;
  height: 35px; /* 高度 */
  border: 1px solid #1bbb9f;
  background-color: #fff;
  cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
  outline: none; /* 不显示轮廓线 */
  font-family: Microsoft YaHei; /* 设置字体 */
  color: #1bbb9f; /* 字体颜色 */
}
.buttonDetail:hover{
    color: #fff;
    background: #1bbb9f;
  }

</style>


