<template>
  <div>
    <menu-modal></menu-modal>
    <div class="main-container">
      <div class="wrap">
        <div class="bread-menu" style="margin-top: 20px;">
          <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 ref="newTitle">{{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, headList : detail.title };
  },
  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;
        //滑动到指定位置菜单吸顶
        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: this.detail.title,
      meta: [
        { hid: "keywords", name: "keywords", content: this.detail.keywords },
        {
          hid: "description",
          name: "description",
          content: this.detail.description
        }
      ]
    };
  }
};
</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>
