<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="/activity">欣新活动></nuxt-link>
          <span>{{detail.title}}</span>
        </div>
        <div style="display: flex;padding: 20px;background: #fff">
          <img :src="detail.banner" style="width: 540px;height:320px;"/>
          <div class="r-content">
            <h1>{{detail.title}}</h1>
            <div class="r-cc">
              <p>活动人数<span style="margin-left: 20px;">{{detail.limitNum}}</span></p>
              <p>活动时间<span style="margin-left: 20px;">{{detail.startTime | formatDate('yyyy-MM-dd hh:mm')}}~{{detail.endTime | formatDate('yyyy-MM-dd hh:mm')}}</span></p>
              <p class="ellipsis2">活动地点<span style="margin-left: 20px;">{{detail.province}}{{detail.city}}{{detail.town}}{{detail.address}}</span></p>
            </div>
            <!--<div class="buttonDetails">报名参加</div>-->
          </div>
        </div>
        <div class="flex-jcb">
          <div style="width: 800px;background: #fff;margin: 20px 0;padding: 0 40px 40px 40px;">
            <h3 class="content-t content-t-l" style="text-align: left;">活动详情</h3>
            <div class="models-details" v-html="detail.content"></div>
          </div>
          <div id = "fixContainer" class="content-r-link" style="width: 300px;background: #fff;margin: 20px 0;padding: 0 20px 20px 20px;">
            <div id="activityHotId" :class="barFixed?'isFixed':''">
              <h3 class="content-t hot-t-r">热门活动</h3>
          <!--<div class="content-r-link" style="width: 300px;background: #fff;margin: 20px 0;padding: 0 20px 20px 20px;">-->
            <!--<h3 class="content-t hot-t-r">热门活动</h3>-->
            <div class="content-detail tc" v-for="item in hotList" :key="item.id">
              <img :src="item.banner" :alt="item.title" style="width: 190px;height: 120px;"/>
              <div class="tc ellipsis cc-title">{{item.title}}</div>
              <nuxt-link :to="'/activityList/'+item.id"><div class="detail-new">活动详情</div></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
    },
    data(){
      return{
        lengthPic:0,
        preIndex: 0,//当前轮播选中图
        barFixed: false
      }
    },
    created() {
      if (typeof window !== 'undefined') {
        window.addEventListener('scroll', this.handleScroll);
      }
    },
    validate ({ params }) {
      console.log(params.id);
      return !isNaN(+params.id)
    },
    async asyncData({ env, params, error}) {
      const { data } = await axios.get( '/api/uccn/summitActivity/app/unauth/'+params.id);
      let detail = data.data;
      detail.content =detail.content.replace(/<img/g,"<img style='width:90%'");
      if (!detail) {
        return error({ message: 'detail not found', statusCode: 404 })
      }
      let tempBannerData = await axios.get('/api/uccn/random/list/app/unauth/get?type=4');
      let hot = tempBannerData.data.data;
      return {detail: detail, hotList: hot}
    },
    methods:{
      changeImgIndex(index,length){
        this.$refs.mySwiper.swiper.slideTo(index+1, 1000, true);
        this.lengthPic = length;
        console.log(this.lengthPic);

      },
      handleScroll: function () {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        let path = $nuxt.$route.path;
        if(path.indexOf('/activityList') != -1 ){
          var menuTop = document.querySelector('#activityHotId').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,
        on: {
          slideChangeTransitionEnd: function () {
            t.preIndex = this.activeIndex-1;
            if(t.preIndex == 5){
              t.preIndex = 0
            }
            console.log(this.activeIndex)
          },
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        thumbs: {
          swiper: galleryThumbs
        }
      });
    },
    head () {
    return {
      title: "活动详情",
    }
  }
  }
</script>
<style  scoped>
  .isFixed{
    position: fixed;
    top: 120px;
    width: 300px;
    background: #fff;
  }
  .tc {
    text-align: center;
  }
  .swiper-container {
    height: auto;
  }
  .gallery-top img{
    width: 100%;
  }
  .content-detail{
    padding: 20px 0;
    width: 100%;
  }
  .content-detail .cc-title{
    margin: 20px;
  }
  .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: 156px; /* 宽度 */
    padding: 10px 0;
    background: #1bbb9f; /* 背景颜色 */
    cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
    font-family: Microsoft YaHei; /* 设置字体 */
    color: #fff; /* 字体颜色 */
    text-align: center;
  }
  .detail-new{
    width: 156px;
    padding: 5px 0;
    cursor: pointer;
    font-family: Microsoft YaHei;
    color: #1bbb9f;
    border: 1px solid #1bbb9f;
    text-align: center;
    margin: 0 auto;
  }

  .detail-new:hover{
    color: #fff;
    background: #1bbb9f;
  }

  .content-r-link{
    margin-left: 3%;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>
