<template>
  <div class="scroll_content">
    <menu-modal></menu-modal>
    <div class="main-container">
      <vehicle-banner
        :list = "bannerList"
        :looptime="looptime"
        :width="width"
        :height="height"
        :background="background"
        :color="color"
        :fontSize="fontSize"
        @prev="prev"
        @next="next"
        @change="changeBanner"
        @click="bannerClick"
        class="mb-50">
      </vehicle-banner>
      <div class="wrap" style="background: #f1f1f1;">
        <div class="bread-menu" style="margin-top: 20px;padding: 0">
          <nuxt-link to="/">首页></nuxt-link>
          <span>欣新活动</span>
        </div>
        <div class="total-div">
          共{{totalCount}}个活动
        </div>
        <ul class="campsiteDetail clearfix">
          <li v-for="item in dataDetail" :key="item.id" class="activity-item">
            <nuxt-link :to="'/activityList/'+item.id">
              <img :src="item.banner" alt style="width:438px;height: 243px;" />
              <div style="margin-left:20px" class="active-r">
                <h2 class="ellipsis2">{{item.title }}</h2>
                <div class="activity-time">{{item.startTime | formatDate('yyyy-MM-dd hh:mm')}}~{{item.endTime | formatDate('yyyy-MM-dd hh:mm')}}</div>
                <div class="ellipsis2 activity-addr"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmOWM5ZDk3ZC02OTQwLWJkNGYtODJjMC02MTdkYTY5MDlkYmEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjY3NjhDRTNDQTA4MTFFOUJDNEZGREQ4NkYzODA4MTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjY3NjhDRTJDQTA4MTFFOUJDNEZGREQ4NkYzODA4MTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmVjOTJkZGFkLWZlMWUtODE0Zi05NDNmLTQwNjFjZTI4MjZhMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpmOWM5ZDk3ZC02OTQwLWJkNGYtODJjMC02MTdkYTY5MDlkYmEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7vvm3YAAABgklEQVR42qyUsUvDQBSHTdEapSBS0YJLBnURp4CTiwgKEhQKRbq4iosoTi62mZ0cqiBODiqCTjEgRdwcgn+AqLub0EXEivE7yHAeuTNCDz4eL/fe7+5e7p0Vx3FXJ0e37/upE57njWK2YBkc+IZnuIT9IAje0vJyGrEq5gm2YUwsDHmYhF14IWY+kyCBK5hT6DecbBCuiZ01ChIwhDnOWi44I6dg2uEmFJRvRzANM3ClzI3AurqKPJYU/4Tir0knuMc0YU6KKcOeTnBC8c9lB/EY0QtFcKpWq9k6wR7FL6XUbljx+7h6H7oavir+DjsqSUcWJ9gw5ag7vIVVyR+HR4RCbC8sgq3kNE1/uZFyxAGoJsW3U+YbWkGKHmEO/9G6B+Q8/NV64i6GGcTCpNfNrceKn5gK3BnExFwliTULcqfyrut+FYvFskZUfPMQe8/62rQFjuO0RCJE0lxkEhPD4oH9dZm5pG3lwRB/+SZxFxBrmQpr1ev1jr7YObkPOzF+BBgAae5of8BDmoUAAAAASUVORK5CYII=" alt="欣新房车，让生活更美好"/>{{item.province}}{{item.city}}{{item.town}}{{item.address}}</div>
              </div>
            </nuxt-link>
          </li>
        </ul>
        <div class="pagination-container">
          <el-pagination @current-change="handleCurrentChange"
                         :current-page.sync="listQuery.page"
                         @size-change="handleSizeChange"
                         :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                         layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
        </div>
        <div class="right">
          <nuxt-child :key="$route.params.id" />
        </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 vehicleBanner from "../components/vehicleBanner"
  import GoTop from "../components/goTop";
  export default {
    transition: "bounce",
    components: {
      GoTop,
      menuModal,
      footerModal,
      vehicleBanner
    },
    data() {
      return {
        dataType: [],
        totalCount: 0,
        dataDetail: [],
        bannerList: [],//车型banner列表
        listQuery: {
          type: "",
          page: 1,
          limit: 10
        },
        store: "",
        curId: 0,
        items1: {},
        curId1: 0,
        looptime: 4000, // 循环时间
        width: 400,
        height:200,
        background: 'red',
        color: '#fff',
        fontSize: '70px',
      };
    },
    created() {
      this.getAll();
      this.getBanner();
    },
    mounted() {
      window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件
    },
    methods: {
      // 点击下一页回调
      prev () {
      },
      // 点击下一页回调
      next () {
      },
      // 鼠标移入状态点回调
      changeBanner () {
      },
      bannerClick () {
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getAll();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.listQuery.page = 1;
        this.getAll();
      },
      /**
       * 获取车型列表页banner
       */
      async getBanner(){
        //活动banner 0：首页，1：旅游 2：营地 3：房车 4：活动 5：新闻 6：关于欣新
        let tempBannerData = await axios.get( '/api/app/banner/app/unauth/findBannerlist?type=4&platform=1');
        let banner = tempBannerData.data.data;
        this.bannerList = banner;
      },
      chooseSelect(e) {
        this.listQuery.type = e.target.value;
        this.getAll();
      },
      async getAll() {
        let {
          data: { data }
        } = await axios.get( `/api/uccn/summitActivity/app/unauth/list?page=${this.listQuery.page}&limit=${this.listQuery.limit}`);
        // console.log(data);
        this.totalCount = data.totalCount;
        this.dataDetail = data.data;
      },
    },
    async asyncData() {
   let headData = await axios.get('/api/uccn/seo/app/unauth/officialWebsite/5');
  let head = headData.data.data;
   return { headList : head}
  },
  head () {
    return {
      title: this.headList.title,
       meta: [
        { hid: 'keywords', name: 'keywords', content: this.headList.keywords },
        { hid: 'description', name: 'description', content: this.headList.description }
      ],
    }
  }
  };
</script>

<style scoped>
  .active-r{
    color: #333;
  }
  .clearfix:after {
    /*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .activity-time, .activity-addr{
    color: #666;
    font-size: 14px;
    margin: 20px 0;
    display: flex;
    align-items: center;
  }
  .clearfix {
    *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
  }
  .banner {
    text-align: center;
  }

  .banner h2 {
    font-size: 20px;
    font-weight: 700;
    padding-top: 40px;
  }

  .banner h3 {
    font-size: 16px;
    padding-top: 20px;
    font-weight: 400;
    padding-bottom: 40px;
  }

  .campsiteDetail {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .campsiteDetail li a {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    text-decoration: none;
  }

  .toDetail {
    font-size: 16px;
  }

  .buttonDetails {
    width: 156px; /* 宽度 */
    height: 35px; /* 高度 */
    border-width: 0px; /* 边框宽度 */
    background: #1bbb9f; /* 背景颜色 */
    cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
    outline: none; /* 不显示轮廓线 */
    font-family: Microsoft YaHei; /* 设置字体 */
    color: white; /* 字体颜色 */
    margin-left: 10px;
  }
</style>
