<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="/tour">房车旅行></nuxt-link>
          <span>{{detail.name}}</span>
        </div>
        <div class="clearfix" style="background-color:#fff;padding:40px 20px 40px 40px;width:1120px;height:536px">
          <!-- <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.cover" style="width:100%;height:388px" />
                  </div>
                </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.cover"
                        :class="preIndex==index?'active':''"
                        alt
                        style="width:100px;height:64px"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div> -->
          <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.cover" 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.cover"
                        :class="preIndex==index?'active':''"
                        alt
                        style="width:106px;height:64px"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="float:left;width:495px">
            <h2 style="font-size:20px;font-weight:bold;padding-left:20px;">{{detail.name}}</h2>
            <div style="margin:21px 20px 91px 19px;padding:21px 0 21px 16px;background:#f6f6f6">
            <div style="display: flex">
              <h1 style="flex:2;font-size:14px;font-weight:400;color:#666">
                出发地
              </h1>
                <h1 style="flex:8;font-size:14px;font-weight:400;color:#666">
                  {{detail.addressTo.provinceName}} {{detail.addressTo.cityName}} {{detail.addressTo.address}}
                  </h1>
                  </div>
            <div style="display: flex;margin:13px 0 16px 0">
              <h1 style="flex:2;font-size:14px;font-weight:400;color:#666">
                目的地
              </h1>
            <h1 style="flex:8;font-size:14px;font-weight:400;color:#666;">
                {{detail.addressGo.provinceName}} {{detail.addressGo.cityName}} {{detail.addressGo.address}}
                </h1>
                </div>
            <div style="font-size:14px;font-weight:400;color:#666;">最近出发日期<h5 style="font-size:14px;font-weight:400;display:inline-block;color:#666;margin-left:9px">  {{detail.time.startTime| formatDate('yyyy/MM/dd')}} {{detail.time.weekStart}} {{detail.addressTo.departTime | formatDate('hh:mm')}} ~  {{detail.time.endTime| formatDate('yyyy/MM/dd')}} {{detail.time.weekEnd}}</h5></div>
            </div>
             <div style="" class="clearfix">
              <button class="buttonDetails" @click="visiblePic()" style="float:left;margin:0 30px 0 20px">预定出游</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="../../assets/images/dfcapp.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">
                    <div style="font-size:12px">安卓用户微信扫码</div>
                    <div style="font-size:12px">可马上下单</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;">
                    <div style="font-size:12px">微信扫码进入</div>
                    <div style="font-size:12px">欣新房车助手可预订</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.introduce">
          </div>
          <h3 style="margin:31px 0 20px 0;font-size:16px;font-weight:bold">报名须知</h3>
          <div v-html="notice[0].value">
          </div>
          </div>
          <div style="float:left;width:300px;margin-left:20px;background-color:#fff;text-align:center">
              <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.cover" 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>
    <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 { getDetail } from '../../../../demo nuxt/nuxt-bnhcp/ajax/getData';
export default {
  transition: "bounce",
  components: {
    menuModal,
    footerModal
  },
  data() {
    return {
      lengthPic: 0,
      preIndex: 0, //当前轮播选中图
      visible: false,

    };
  },
  validate({ params }) {
    console.log(params.id);
    return !isNaN(+params.id);
  },
  async asyncData({ env, params, route, error}) {
      const { data } = await axios.get( env.host + "/api/uccn/app/unauth/tour/detail/" + params.id);
      let user = data.data;
      // data.data.content = data.data.content.replace(/<img/g,"<img style='width:100%'");
      // data.data.modelParam =  JSON.parse(data.data.modelParam );
      let pic = data.data.bannerDTOS;
      user.pictureList = pic;
      user.pictureNum = pic.length;
      let startAddress = data.data.tourDepartVo;
      for(var i = 0;i<startAddress.length;i++){
        if(startAddress[i].type == 0){
          console.log(startAddress[i]);
          user.addressTo = startAddress[i];
        }
        if(startAddress[i].type == 2){
          console.log(startAddress[i]);
          user.addressGo = startAddress[i];
        }
      }
      let tourTimeVo = data.data.tourDepartTimeVo
      for(var i = 0;i<tourTimeVo.length;i++){
        if(tourTimeVo[i].overdue == 0){
          console.log(tourTimeVo[i]);
          user.time = tourTimeVo[i];
          break
        }else{
          user.time = tourTimeVo[i];
        }
      }
      var weekday=["周日","周一","周二","周三","周四","周五","周六"]
      user.time.weekStart = weekday[user.time.startWeek];
      user.time.weekEnd = weekday[user.time.endWeek];
      // console.log(startAddress);

      console.log(pic);

      console.log(user);
      if (!user) {
        return error({ message: 'User not found', statusCode: 404 })
      }
      let tempBannerData = await axios.get( env.host + '/api/uccn/random/list/app/unauth/get?type=2');
      let hot = tempBannerData.data.data;
      hot.map(function(item){
        item.link = encodeURI('/tourDetails/' + item.id+'?name='+item.name);
        item.link = encodeURI(item.link)
      });
      console.log(hot);

      let noticeData = await axios.get( env.host + '/api/app/cofig/app/unauth/types?types=14');
      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;
      console.log(this.lengthPic);
    },
    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);
        }
      },
      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{
    width: 100%;
}
.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;
}
.imgWidth{
  height:64px;
  width:100px!important
}
.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: 116px;
  height: 34px; /* 高度 */
  border: 1px solid #1bbb9f;
  background-color: #fff;
  cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
  outline: none; /* 不显示轮廓线 */
  font-family: Microsoft YaHei; /* 设置字体 */
  color: #1bbb9f; /* 字体颜色 */
}
.buttonDetail:hover{
    color: #fff;
    background: #1bbb9f;
  }
.tabContent {
  padding: 0;
  margin: 0;
  list-style: none;
}
.tabContent li {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 32%;
  float: left;
}
</style>



