<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 {resultProcess} 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: {
        leftData: {},
        rightData: {},
        total: 0
      },
      pageSize: 40,
      curPage: 1,
    }
  },
  methods: {
    back() {
      this.$router.push({path: '/'});
    },
    handleCurrentChange(currentPage) {
      this.curPage = currentPage;
      this.getAllData();
    },
    getAllData() {
      let index = (this.curPage - 1) * 40
      this.pageData.leftData = resultProcess(data.slice(index, index + 20));
      this.pageData.rightData = resultProcess(data.slice(index + 20, index + 40));
      this.pageData.total = data.length;
    }
  },
  mounted() {
    this.getAllData();
  },
}
</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>
