<template>
  <div class="eContainer-home">
    <QuickVisitVue :cellScrollHeight="cellScrollHeight"></QuickVisitVue>
    <TaskStatisticsVue></TaskStatisticsVue>
    <NoticeAnnouncementVue :cellScrollHeight="cellScrollHeight" ></NoticeAnnouncementVue>
    <HallVue></HallVue>
    <CustomerAnalyseVue></CustomerAnalyseVue>
    <QuickSearchVue :cellScrollHeight="cellScrollHeight"></QuickSearchVue>
  </div>
</template>

<script>
import QuickVisitVue from "./cells/QuickVisit.vue";
import TaskStatisticsVue from "./cells/TaskStatistics.vue";
import NoticeAnnouncementVue from "./cells/NoticeAnnouncement.vue";
import HallVue from "./cells/Hall.vue";
import CustomerAnalyseVue from "./cells/CustomerAnalyse.vue";
import QuickSearchVue from "./cells/QuickSearch.vue";

export default {
  name: "Home",
  components: {
    QuickVisitVue,
    TaskStatisticsVue,
    NoticeAnnouncementVue,
    HallVue,
    CustomerAnalyseVue,
    QuickSearchVue,
  },
  mounted() {
    this.calcCellScrollHeight();
    this.calcCellScrollHeightBind = this.calcCellScrollHeight.bind(this);
    window.addEventListener("resize", this.calcCellScrollHeightBind);
  },
  data() {
    return {
      cellScrollHeight: 0,
    };
  },
  methods: {
    calcCellScrollHeight() {
      this.cellScrollHeight = this.$el.clientHeight * 0.49 - 52;
    },
  },
  destroyed() {
    window.removeEventListener("resize", this.calcCellScrollHeightBind);
  },
};
</script>

<style scoped>
.eContainer-home {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-around; */
  align-items: center;
}
.home-cell {
  width: 33%;
  height: 49%;
  margin-left: 0.166%;
  margin-right: 0.166%;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 8px;
}
.home-cell >>> .cell-content {
  /* max-height: calc(100% - 52px); */
  height: calc(100% - 52px);
  overflow: auto;
}
.home-cell >>> .el-scrollbar__wrap {
  overflow-y: scroll;
  overflow-x: auto;
}
</style>