<template>
  <m-grid
    :template="[
      'summary box1 box2',
      '. box3 box4',
      '. box5 box6',
    ]"
    columns="1.5fr 1fr 1fr"
    rows="1fr 1fr 1fr"
    gap="0.5rem"
  >
    <DiseaseMap />
    <DiseaseSum area="summary"/>
    <m-card area="box1" title="病害预警">
      <DiseaseWarning />
    </m-card>
    <m-card area="box2" title="会诊统计">
      <ConsultationSum />
    </m-card>
    <m-card area="box3" title="队伍建设">
      <TeamBuild />
    </m-card>
    <m-card area="box4" title="实时问答">
      <Questions />
    </m-card>
    <m-card area="box5" title="专项监测">
      <SpecialMonitoring />
    </m-card>
    <m-card area="box6" title="疫情测报">
      <DiseaseForeCast />
    </m-card>
  </m-grid>
</template>

<script>
import DiseaseMap from './components/disease/disease-map'
import DiseaseWarning from './components/disease/disease-warning'
import ConsultationSum from './components/disease/consultation-sum'
import TeamBuild from './components/disease/team-build'
import Questions from './components/disease/questions'
import SpecialMonitoring from './components/disease/special-monitoring'
import DiseaseForeCast from './components/disease/disease-forecast'
import DiseaseSum from './components/disease/disease-sum'
import {mapActions} from 'vuex'
export default {
  name: 'Main',
  components: {
    DiseaseMap,
    DiseaseWarning,
    ConsultationSum,
    TeamBuild,
    Questions,
    SpecialMonitoring,
    DiseaseForeCast,
    DiseaseSum,
  },
  mounted() {
    this.$nextTick(this.init)
  },
  methods: {
    ...mapActions([
      'getDiseaseSummary',
      'getAquafarmPoints',
      'getDiseaseWarning',
    ]),
    init() {
      this.getDiseaseSummary()
      this.getAquafarmPoints()
      this.getDiseaseWarning()
    }
  },
}
</script>
