<template>
    <div class="content">
      <display-board class="content_card" :title="curPageTitle" title_size="large">
        <paging-list class="list_data" style="overflow: auto;" id="ar_company_list"
                      :columns-style="{'title':{'width':'30%'}}"
                      :leftDatas="pageData.leftData" :rightDatas="pageData.rightData"
                      :pageSize = "pageSize"
        />
        <div class="bottom">
          <el-pagination
            background
            :page-size="pageSize"
            :pager-count="11"
            :current-page="curPage"
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :total="pageData.total">
          </el-pagination>
        </div>
      </display-board>
    </div>
</template>
<script>

import data from "./mockData/lost_add_customer.json";
import DisplayBoard from "../components/container/display-board.vue";
import PagingList from "../components/card/paging-list.vue";
import {getAllDatas} from "./js/lostAddCustomer"
import moment from 'moment'

export default {
  name: "LostAddCustomer",
  components: {PagingList, DisplayBoard},
  data() {
    return {
      today: moment().format("yyyy-MM-DD"),
      curPageTitle: this.$route.query.code === 1 ? "新增客户(较去年)" : "流失客户(较去年)",
      pageData :{},
      pageSize:40,
      curPage:1,
    }
  },
  methods: {
    back() {
      this.$router.push({path: '/'});
    },
    async  handleCurrentChange(currentPage){
       this.pageData = await getAllDatas(this.today, this.$route.query.code,currentPage)
    }
  },
  async mounted() {
    this.pageData = await getAllDatas(this.today, this.$route.query.code)
  },
}
</script>
<style scoped>
.page {
  width: 100%;
  height: 100%;
}

.content {
  width: 100%;
  height: 80%;
  display: flex;
  float: left;
  justify-content: space-evenly;
  padding: 0 2rem 2rem 2rem;
}

.content_card {
  width: 100%;
  height: 90%;
  margin-top: 3%;
}
.list_data{

}
.bottom{
  display: inline-block;
  width: 100%;
  height: 10%;
  line-height: 10%;
  text-align: center;
}

</style>
