<template>
  <div class="page">
    <div class="content">
      <display-board class="content_card" :title="lostCustomerTitle" title_size="large">
        <winners-list style="height: 100%;overflow: auto;" id="ar_company_list"
                      :rows="lostCustomer"
        />
      </display-board>
      <display-board class="content_card" :title="addCustomerTitle" title_size="large">
        <winners-list style="height: 100%;overflow: auto;" id="ar_company_list"
                      :rows="addCustomer"
        />
      </display-board>
    </div>
  </div>
</template>
<script>

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

export default {
  name: "LostAddCustomer",
  components: {WinnersList, DisplayBoard},
  data() {
    return {
      today: moment().format("yyyy-MM-DD"),
      lostCustomerTitle: "流失客户(较去年)",
      lostCustomer: [],
      addCustomerTitle: "新增客户(较去年)",
      addCustomer: [],
      currentData: {},
      mockData: data.list,
      chart: null,
      currentCard: null,
      listTitle: "流失客户(较去年)",
      currentBtn: {
        date: "day",
        subdivide: "domain",
      },
    }
  },
  methods: {
    back() {
      this.$router.push({path: '/'});
    },
  },
  async mounted() {
    this.lostCustomer = await getAllDatas(this.today, 1)
    console.log(this.lostCustomer)
    this.addCustomer = await getAllDatas(this.today, 2)
    console.log(this.addCustomer)
  },
}
</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: 30%;
  margin-top: 5%;
  height: 100%;
}
</style>
