<template>
  <div class="home-page">
    <header-top></header-top>
    <div class="body">
      <el-card class="panel">
        <mobile-tool
          ref="tool"
          @search="search"
          @add="$refs.list.add()"
          @delete="$refs.list.deleteRows()"
          @getLastCount="$refs.list.getLastCount()"
        ></mobile-tool>
      </el-card>
      <el-card class="panel">
        <mobile-home-list ref="list" @search="search" @changeDate="changeDate"></mobile-home-list>
      </el-card>
    </div>
  </div>
</template>

<script>
import HeaderTop from "../components/headerTop";
import MobileTool from "../components/mobile/tool";
import MobileHomeList from "../components/mobile/homeList";

export default {
  name: "home_m",
  components: { HeaderTop, MobileTool, MobileHomeList },
  methods: {
    search(params) {
      this.$refs.list.query(params);
    },
    changeDate(date) {
      this.$refs.tool.setDate(date);
    }
  }
};
</script>

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

.body {
  padding: 10px;
}

.panel {
  margin-bottom: 10px;
}
</style>
