<template>
  <div>
    <menu-modal></menu-modal>
    <div class="main-container"  style="margin-top: 110px;">
      <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:20px">
          <div style="float:left;width:50%">
            <div class="gallery-top-box" style="width:100%">
              <div class="swiper-container gallery-top" ref="mySwiper">
                <div class="swiper-wrapper" style="height:450px">
                  <div
                    class="swiper-slide"
                    v-for="(item,idx) in detail.pictureList"
                    :key="idx"
                  >
                    <img :src="item.imgUrl" style="width:100%" />
                  </div>
                </div>
                <!-- <div class="swiper-button-next swiper-button-black"></div>
                <div class="swiper-button-prev swiper-button-black"></div> -->
              </div>
              <div class="gallery-thumbs-box">
                <div class="swiper-container gallery-thumbs">
                  <div class="swiper-wrapper swiper-wrapper-thu">
                    <div
                      class="swiper-slide"
                      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:100%"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="float:left;padding-left:50px;width:50%">
            <h2>{{detail.name}}</h2>
            <h3 style="font-weight: 400;margin-left:20px;font-size:16px;margin-top:10px">{{detail.address}}</h3>
            <div style="margin-top:20%" class="clearfix">
              <button class="buttonDetails" @click="visiblePic()" style="float:left;width:30%">预定营地</button>
              <div style="float:left;width:60%" class="clearfix" v-if="visible">
                <div style="float:left;width:40%;margin-left:5%">
                  <img :src="detail.logo" style="width:100%;vertical-align:top" />
                  <p>
                    安卓用户扫码下载
                    滴房车APP可预订
                  </p>
                </div>
                <div style="float:left;width:40%;margin-left:5%">
                  <img :src="detail.logo" style="width:100%;vertical-align:top" />
                  <p>
                    微信扫码进入
                    欣新房车助手可预订
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="clearfix" style="margin-top:40px;">
          <div style="float:left;width:70%;background-color: #fff;padding:20px">
            <h3>营地详情</h3>
          <div  v-html="detail.content">
          </div>
          <h3 style="margin-top:30px">配套设施收费</h3>
          <div v-html="detail.configure">
          </div>
          <h3 style="margin-top:30px">预定须知</h3>
          <div v-html="notice[0].value">
          </div>
          </div>
          <div style="float:left;width:27%;margin-left:3%;background-color:#fff;text-align:center">
              <h3 style="height:40px;font-weight:400;line-height:40px;border-bottom:1px solid #ccc">热门旅行</h3>
              <div v-for="(item,index) in hotList" :key="index" style="width:100%;padding:20px 50px">
              <img :src="item.imgUrl" alt="" style="width:100%">
              <h5 style="overflow: hidden;text-overflow:ellipsis;width:100%;margin:10px 0">{{item.name}}</h5>
              <nuxt-link :to="item.link"><button class="buttonDetail" style="margin-bottom:20px">营地详情</button></nuxt-link>

              </div>
          </div>
        </div>
      </div>
    </div>
    <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";
export default {
  transition: "bounce",
  components: {
    menuModal,
    footerModal
  },
  created() {
    // this.getNode();
    // this.toHot();
    // this.getHot()
  },
  data() {
    return {
      lengthPic: 0,
      preIndex: 0, //当前轮播选中图
      visible: 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;
    },
  },
  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>
.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

.gallery-top img {
  width: 100%;
}
.swiper-container{
    height: auto;
}
.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 {
  height: 35px; /* 高度 */
  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; /* 字体颜色 */
}
</style>


