<template>
  <div class="news-container">
    <Head/>
    <second-banner
      :list = "bannerList"
      :looptime="looptime"
      :width="width"
      :height="height"
      :background="background"
      :color="color"
      class="mb-50"
      @prev="prev"
      @next="next"
      @change="changeBanner"
      @click="bannerClick"/>
    <ul
      v-if="dataDetail.length"
      id="scroll-area"
      class="main-padding">
      <router-link
        v-for="item in dataDetail"
        :to="{ path: 'newsDetail', query:{id: item.id }}"
        :key="item.id"
        class="flex-jcb"
        style="margin-bottom: 20px;">
        <img
          :src="item.coverImage"
          class="news-img-list">
        <div class="news-list">
          <div class="ellipsis2 news-list-title">{{ item.title }}</div>
          <div class="epitome news-list-time flex-aic">
            <img
              src="data:image/png;base64,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"
              style="height: 17px;margin-right: 7px;">
            {{ item.addTime.substring(0, 10) }}</div>
        </div>
      </router-link>
    </ul>
    <p
      v-if="preventRepeatReuqest"
      class="loading">加载中……</p>
    <p
      v-if="touchend"
      class="empty_data">——共{{ totalCount?totalCount:0 }}篇新闻资讯——</p>
    <go-top/>
    <Footer v-if="touchend"/>
  </div>
</template>

<script>
  import config from "~/config";
  import Footer from "~/components/footer";
  import Head from "~/components/head";
  import axios from '../plugins/axios'
  import {
    mapGetters
  } from "vuex";
  import GoTop from "~/components/goTop";
  import SecondBanner from '~/components/secondBanner'
  export default {
    components: {
      Footer,
      Head,
      GoTop,
      SecondBanner
    },
    data(){
      return{
        showBanner: !0,
        touchend: false,////没有更多数据
        looptime: 4000, // 循环时间
        nodata: `${config.IMG_URL}nodata.png`,
        dataType: [],
        totalCount: "",
        dataDetail: [],
        width: 400,
        height:200,
        background: 'red',
        color: '#fff',
        fontSize: '70px',
        listQuery: {
          tagId: "",
          page: 1,
          limit: 10
        },
        store: "",
        dataNull:false,
        tourList: []
      };
    },
    computed: {
      ...mapGetters(["userInfo"])
    },
    created() {
      this.preventRepeatReuqest = true;
      window.addEventListener('scroll', this.handleScroll);
      this.getAll();
    },
    async asyncData() {
      const { data } = await axios.get('/api/app/banner/app/unauth/findBannerlist?type=5&platform=1');
      let cc = data.data;
      return { bannerList: cc}
    },
    methods: {
      chooseSelect(e) {
        console.log(e.target.value);
        this.listQuery.tagId = e.target.value;
        this.preventRepeatReuqest = true;
        this.getAll();
      },
      handleScroll: function () {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        // 设备/屏幕高度
        let scrollObj = document.getElementById("scroll-area"); // 滚动区域
        if(scrollObj){
          let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
          //滚动条到底部的条件
          if(document.documentElement.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeight-100) {
            if (this.touchend) {
              return;
            }
            //防止重复请求
            if (this.preventRepeatReuqest) {
              return;
            }
            this.preventRepeatReuqest = true;
            //数据的定位加20位
            this.listQuery.page = this.currentPage + 1;
            this.getAll();
          }
        }
      },
      getAll() {
        let t = this;
        axios.get('/api/uccn/article/app/unauth/list?type=1&page='+this.listQuery.page+'&limit='+this.listQuery.limit)
          .then(function(response) {
            t.totalCount = response.data.data.total;
            let list = response.data.data.list;
            t.dataDetail = [...t.dataDetail, ...list];
            t.currentPage = response.data.data.pageNum;
            if (response.data.data.total < t.listQuery.limit*t.listQuery.page) {
              t.touchend = true;
            }
            t.preventRepeatReuqest = false;
          });
      },
      // 点击下一页回调
      prev () {},
      // 点击下一页回调
      next () {},
      // 鼠标移入状态点回调
      changeBanner () {},
      bannerClick () {},
    },
    head () {
      return {
        title: "欣新新闻|房车新闻|房车资讯|房车动态|房车市场信息|房车旅游动态|房车路线分享|房车新闻APP"
      }
    },
  };

</script>

<style lang="scss">
  @import "../assets/styles/mixin";
  .news-container{
    .news-img-list{
      width: 92px;
      height: 75px;
      border-radius: 3px;
    }
    .news-list {
      border-bottom: 1px solid #dfdfdf;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 13px;
      padding-bottom: 13px;
    }
    .news-list-title{
      margin-bottom: 15px;
      font-size: 15px;
    }
    .news-list-time{
      font-size: 13px;
      color: #999;
    }
  }
  .news-item{
    margin: 10px 0;
  }
  .tour-home-r, .news-home-r{
    width: 58%;
  }
  .tour-img-home, .news-home-img{
    width: px2rem(300px);
    height: px2rem(150px);
  }
</style>
