<template>
  <div class="main">
    <div class="middle">
      <display-board class="trade_left" title="营业情况">
        <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
          <contrast-card style="height: 28%;">content</contrast-card>
          <contrast-card style="height: 28%;">content</contrast-card>
          <contrast-card style="height: 28%;">content</contrast-card>
        </div>
      </display-board>
      <display-board class="trade_middle" corner_size="large">
        <div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
          <simple-card style="width: 30%;height: 100%">content</simple-card>
          <simple-card style="width: 30%;height: 100%">content</simple-card>
          <simple-card style="width: 30%;height: 100%">content</simple-card>
        </div>
        <ar-summary-bar ref="arSummaryBar" style="width: 100%; height: 64%;"></ar-summary-bar>
      </display-board>
      <display-board class="trade_right" title="账款情况">
        <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
          <contrast-card style="height: 28%;">content</contrast-card>
          <contrast-card style="height: 28%;">content</contrast-card>
          <contrast-card style="height: 28%;">content</contrast-card>
        </div>
      </display-board>
    </div>
    <div class="middle">
      <display-board class="trade_left" title="已开票未收款">
        <winners-list style="height: 96%" @click.native="goArBar" id="ar_company_list" :rows="arCompanyList"/>
      </display-board>
      <div class="trade_middle" style="border: none;box-shadow: none;">
        <div style="display: flex; justify-content: space-between; height: 50%;">
          <display-board style="width: 32%;" title="每日目标情况">content</display-board>
          <display-board style="width: 32%;" title="月度目标情况">content</display-board>
          <display-board style="width: 32%;" title="年度目标情况">content</display-board>
        </div>
        <div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;">
          <showcase style="width: 18%;" title="当日订单量">content</showcase>
          <showcase style="width: 18%;" title="当日完成量">content</showcase>
          <showcase style="width: 18%;" title="余量">content</showcase>
          <showcase style="width: 18%;" title="流失客户">content</showcase>
          <showcase style="width: 18%;" title="新增客户">content</showcase>
        </div>
      </div>
      <display-board class="trade_right" title="当日订单量占比">content</display-board>
    </div>
  </div>
</template>
<script>
import DisplayBoard from "./components/container/display-board.vue";
import Showcase from "./components/container/showcase.vue";
import ContrastCard from "./components/card/contrast-card.vue";
import SimpleCard from "./components/card/simple-card.vue";
import ArSummaryBar from "./components/chart/ar-summary-bar.vue";
import WinnersList from "./components/card/winners-list.vue";
import {arSummaryBar, arCompanyList} from "../api/apiList"

export default {
  components: {
    Showcase,
    DisplayBoard,
    ContrastCard,
    SimpleCard,
    ArSummaryBar,
    WinnersList
  },
  data() {
    return {
      arCompanyList: [
        {title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]},
        {title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]},
        {title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]},
        {title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]},
        {title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]},
      ]
    }
  },
  methods: {
    // 跳转已开票未收款页面
    goArBar() {
      this.$router.push('/ar_bar')
    },
    // 获取应收账款数据
    getArSummaryBar() {
      arSummaryBar().then(res => {
        let data = res.data.data
        let seriesData = []
        seriesData.push(data.unsettled_amount)
        seriesData.push(data.settled_amount)
        seriesData.push(data.unregister_amount)
        seriesData.push(data.receivable_amount)
        seriesData.push(data.cancelled_amount)
        this.$refs.arSummaryBar.drawArSummaryBar(seriesData)
      }).catch(err => {
        console.log(err);
      });
    },
    // 获取已开票未收款排行
    getArCompanyList() {
      arCompanyList().then(res => {
        if (res.data.data.length) {
          this.arCompanyList = res.data.data
        }
      }).catch(err => {
        console.log(err);
      });
    }
  },
  mounted() {
    this.getArSummaryBar();
    this.getArCompanyList();
  }
};
</script>

<style scoped>
#ar_company_list:hover {
  background-color: #19EBFF10;
  transform: scale(101%);
}
</style>
