<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="/news">新闻动态></nuxt-link>
          <span>{{detail.title}}</span>
        </div>
        <div class="content">
          <div style="width: 100%;padding-top: 20px;">
            <h3 class="tc news-title">{{detail.title}}</h3>
            <div class="content-detail" v-html="detail.text"></div>
          </div>
        </div>
      </div>
      <div style="width: 1120px;margin: 0 auto 20px auto;">
        <div class="flex-aic-jcb more-container new-cc">
          <div style="width: 1100px;">
            <div>推荐咨讯</div>
          </div>
          <nuxt-link to="/news"><div>MORE<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmOWM5ZDk3ZC02OTQwLWJkNGYtODJjMC02MTdkYTY5MDlkYmEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkVFMDFEOTZDQjE1MTFFOUJFOTNEQzRCNjMyNDdBOUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkVFMDFEOTVDQjE1MTFFOUJFOTNEQzRCNjMyNDdBOUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Y2FhZjgzM2YtYjY4Ni0yMjRlLWJkMDMtYWI5YWIxYmE5ZjExIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmY5YzlkOTdkLTY5NDAtYmQ0Zi04MmMwLTYxN2RhNjkwOWRiYSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pl/v7K8AAACYSURBVHjaYvz//z8DNQETA5XBqIGUAxZ0gVmzZuFT7wfE2kDcTrSBeIAoEC8BYl4glgPiHCD+S4mXXwNxPBB/B+IMIF4PxNyUhiHIECcgfgPEvkC8D4jFkBUwgnIKMNxANrGRYLAq1HApIL4LxF5AfAs5DEExEUVmxCoD8TFohB2DGfgViN9TmPxWg8KYcbRwGDWQdAAQYACwex9Q4YB1FQAAAABJRU5ErkJggg=="/></div></nuxt-link>
        </div>
        <div class="content-new" v-for="item in hotList" :key="item.id">
          <nuxt-link :to="'/newsList/'+item.id">
            <img :src="item.coverImage" style="width:180px;height: 114px;"/>
            <div style="margin-left: 20px;">
              <div class="ellipsis c-title">{{item.title}}</div>
              <div class="ellipsis2 ep-hot">导语：{{item.epitome}}</div>
              <div class="ep-time">{{item.addTime}}</div>
            </div>
         </nuxt-link>
        </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
    },
    data(){
      return{
        lengthPic:0,
        preIndex: 0,//当前轮播选中图
      }
    },
    validate ({ params }) {
      console.log(params.id);
      return !isNaN(+params.id)
    },
    async asyncData({ env, params, error}) {
      const { data } = await axios.get('/api/uccn/article/app/unauth/one?id='+params.id+"&urlType=1");
      let detail = data.data;
      let tempBannerData = await axios.get('/api/uccn/article/app/unauth/three?type=1&number=3&id='+params.id);
      let hot = tempBannerData.data.data;
      detail.text = detail.text.replace(/<img/g,"<img style='width:90%'");
//      detail.text = detail.text.replace(/font-size: 18px !important;/g,"font-size: 14px !important;color:#666;line-height: normal !important;");
      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);
      },
    },
    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
        }
      });
    }
  }
</script>
<style  scoped>
  .r-content{
    margin-left: 20px;
  }
  .r-content p{
    padding: 5px 0;
  }
  .is-fixed{
    position: fixed;
    width: 1200px;
    background: #fff;
    border-bottom: 10px solid #ccc;
    margin-left: -30px;
    padding-left: 0;
    top: 90px;
  }
  .news-title{
    font-size: 20px;
    color: #333;
    margin-bottom: 21px;
  }
  .ep-hot, .ep-time{
    font-size: 14px;
    color: #666;
    margin-top:20px;
  }
  .new-cc{
    background: #fff;
    margin-bottom:10px;
    padding: 20px;
    position: relative;
  }
  .content{
    display: flex;
    justify-content: space-between;
    background: #fff;
  }
  .content-t{
    border-bottom: 5px solid #1bbb9f;
    width: 100px;
    text-align: center;
    padding: 10px;
    font-weight: normal;
  }
  .swiper-container {
    height: auto;
  }
  .gallery-top img{
    width: 100%;
  }
  .content-detail{
    padding: 20px 0;
    width: 100%;
  }
  .c-title{
    color: #333;
    font-size:20px;
  }
  .content-new a{
    display: flex;
    color: #333;
  }
  .swiper-wrapper-thu{
    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;
  }
  .content-r-link{
    margin-left: 3%;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>
