<template>
  <m-grid
    :template="[
      'title title title',
      'box1 . box5',
      'box2 . box5',
      'box3 . box6',
      'box4 . box6',
    ]"
    columns="1fr 2.5fr 1fr"
    rows="5rem 1fr 1.5fr 1fr 2fr"
    gap="0"
    :bgImg="require('@/assets/images/stars-bg.png')"
    style="padding: 0"
  >
    <m-title area="title" color="#fff" :bgImg="require('@/assets/images/title-bg.png')">智慧物业管理微平台</m-title>
    <m-card area="box1" title="物业应急指挥体系" mode="4" :icon="require('@/assets/images/icon1.png')">
      <EmergencyCommand />
    </m-card>
    <m-card area="box2" title="运行体征" mode="4" :icon="require('@/assets/images/icon2.png')">
      <Operation @select="handleSelect" />
    </m-card>
    <m-card area="box3" title="投诉保修" mode="4" :icon="require('@/assets/images/icon3.png')">
      <Repair />
    </m-card>
    <m-card area="box4" title="智能发现" mode="4" :icon="require('@/assets/images/icon4.png')">
      <Discovery />
    </m-card>
    <m-card area="box5" title="物业督查" mode="4" :icon="require('@/assets/images/icon5.png')">
    <Supervision/>
    </m-card>
    <m-card area="box6" title="协同处置" mode="4" :icon="require('@/assets/images/icon6.png')">
    </m-card>
  </m-grid>
</template>

<script>
import EmergencyCommand from '@/views/components/emergencyCommand.vue'
import Operation from '@/views/components/operation.vue'
import Repair from '@/views/components/repair.vue'
import Discovery from '@/views/components/discovery.vue'
import Supervision from '@/views/components/supervision.vue'
export default {
  name: 'Main',
  components: {
    EmergencyCommand,
    Operation,
    Repair,
    Discovery,
    Supervision,
  },
  methods: {
    handleSelect(data) {
      console.log(data)
    }
  }
}
</script>
