<template>
  <div class="home-page">
    <header-top></header-top>
    <div class="body">
      <el-card class="panel">
        <tool
          ref="tool"
          @search="search"
          @add="$refs.list.add()"
          @delete="$refs.list.deleteRows()"
          @export="$refs.list.export()"
          @getLastCount="$refs.list.getLastCount()"
        ></tool>
      </el-card>
      <el-row :gutter="14" class="charts">
        <el-col :span="8"><el-card><echart1 ref="chart1"></echart1></el-card></el-col>
        <el-col :span="8"><el-card><echart2 ref="chart2"></echart2></el-card></el-col>
        <el-col :span="8"><el-card><echart3 ref="chart3" @balance="refreshAll"></echart3></el-card></el-col>
      </el-row>
      <el-card class="panel">
        <home-list ref="list" @search="search" @changeDate="changeDate"></home-list>
      </el-card>
    </div>
  </div>
</template>

<script>
import HeaderTop from "../components/headerTop";
import Tool from "../components/tool";
import HomeList from "../components/homeList";
import Echart1 from "../components/echart1";
import Echart2 from "../components/echart2";
import Echart3 from "../components/echart3";

export default {
  name: "home",
  components: { HeaderTop, Tool, HomeList, Echart1, Echart2, Echart3 },
  methods: {
    search(params) {
      this.$refs.list.query(params);
      this.$refs.chart1.query(params);
      this.$refs.chart2.query(params);
      this.$refs.chart3.query(params);
    },
    changeDate(date) {
      this.$refs.tool.setDate(date);
    },
    refreshAll() {
      this.$refs.tool.search();
    }
  }
};
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  background: #f3f6fb;
}

.body {
  padding: 14px;
}

.panel,
.charts {
  margin-bottom: 14px;
}
</style>
