<template>
  <div class="container" style="background: #fff;">
   <menu-modal v-on:childByValue = "childByValue"></menu-modal>
    <div class="main-container">
      <div class="wrap" style="background:#fff">

        <find-menu></find-menu>

        <div>
          <div class="margin-Top clearfix title-find">
            <div style="font-size:18px;font-weight:Bold">欣新活动</div>
          </div>
          <ul class="v-ul clearfix list list-four">
              <li v-for="item in actDetail" :key="item.id">
                <nuxt-link :to="item.link" class="flex-aic-noc">
                  <img class="v-img-cover" :src="item.banner" alt="房车租赁" />
                  <div style="margin-left: 11px;position: relative;text-align: left;">
                    <h2 class="ellipsis2" style="font-size: 18px;margin-top:10px;max-width: 400px;">{{item.title}}</h2>
                    <h2 style="font-size: 12px;color:#666666;margin-top:23px">
                      <i class="el-icon-location"></i>
                      {{item.province}}{{item.city}}{{item.town}}{{item.address}}
                    </h2>
                  </div>
                </nuxt-link>
              </li>
            </ul>
        </div>
       <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>
    </div>
    <footer-modal></footer-modal>
  </div>
</template>

<script>
import axios from "../../plugins/axios";
import menuModal from "../../components/menu";
import footerModal from "../../components/footer";
import GoTop from "../../components/goTop";
import findMenu from "../../components/findMenu"
export default {
  data() {
    return {
      router: "/",

     totalCount:0,
      actDetail: [],

      listQuery: {
        type: "activity",
        keyword: "",
        page: 1,
        limit: 10
      },
    };
  },
  components: {
    GoTop,
    menuModal,
    footerModal,
    findMenu
  },
  created() {
     console.log(this);
    this.listQuery.keyword = this.$route.query.keywords;
    this.getAll();
  },
  methods: {
    childByValue(e){
      this.listQuery.keyword = e;
      this.getAll();
    },
    async getAll() {
      let {
        data: { data }
      } = await axios.get(
        `/api/uccn/app/unauth/search?type=${this.listQuery.type}&keyword=${this.listQuery.keyword}&page=${this.listQuery.page}&limit=${this.listQuery.limit}`
      );
      // console.log(data);

      data.activity.data.map(function(item) {
        item.link = encodeURI(
          "/activityList/" + item.id + "?name=" + item.title
        );
        item.link = encodeURI(item.link);
      });
      this.actDetail = data.activity.data;
      this.totalCount = data.activity.totalCount
      //活动

    },
    handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getAll();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.listQuery.page = 1;
        this.getAll();
      },
  }
};
</script>

<style scoped>
.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.webMap {
  background-color: #fff;
  padding: 20px;
  font-size: 14px;
  width: 1120px;
  margin: 0 auto 30px auto;
}

.v-ul {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-top:24px
}
.v-ul .v-li {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  font-size: 22px;
  padding-right: 30px;
}

.margin-Top {
  margin-top: 30px;
}
.active {
  color: #1bbb9f !important;
  /* border-bottom: 3px solid #1bbb9f !important; */
}

.title-find {
  position: relative;
}
.one {
  position: absolute;
  top: 0px;
  left: 1px;
  background-color: #1bbb9f;
  width: 6px;
  height: 18px;
}
.list li {
  float: left;
  border: 1px solid #eee;
  width: 540px;
  height:140px;
  padding: 10px;
  margin-bottom:17px
}
.list li:hover{
  box-shadow: 0 0 5px #ccc;
}

.list-four li:nth-child(odd){
   margin-right: 20px;
}
.list-act li {
  float: left;
  border: 1px solid #eee;
  width: 550px;
  padding: 10px;
}
.v-img-cover {
  width: 180px;
  height: 120px;
}
.v-act-img {
  width: 80px;
  height: 50px;
}
.list-act li:nth-child(odd) {
  margin-right: 20px;
}
.list-act li:nth-child(1) {
  margin-bottom: 15px;
}
.buttonDetails {
    width: 116px;
    height: 34px;
    border-width: 0px;
    background: #1bbb9f;
    cursor: pointer;
    outline: none;
    font-family: Microsoft YaHei;
    color: white;
    font-size: 14px;
    padding-right: 15px;
  }
.config {
  color: #666;
  font-size: 12px;
  margin-right: 14px;
}
</style>
