<template>
  <m-grid
    :template="[
      'title title title',
      'box1 . box5',
      'box2 . box5',
      'box3 . box6',
      'box4 . box6',
    ]"
    columns="1fr 2fr 1fr"
    rows="3rem 1fr 1.5fr 1fr 2fr"
    gap="0"
    style="padding: 0"
    :complete="complete"
  >
    <m-map ref="map" @event="handleMapClick" @complete="mapComplete" />
    <m-animate enter="fadeInDown" leave="fadeOutUp">
      <m-title area="title" color="#fff" :bgImg="require('@/assets/images/title-bg.png')">智慧物业管理微平台</m-title>
    </m-animate>
    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box1" title="物业应急指挥体系" mode="4" :icon="require('@/assets/images/icon1.png')">
      <EmergencyCommand />
    </m-card>
    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box2" title="运行体征" mode="4" :icon="require('@/assets/images/icon2.png')">
      <Operation @select="handleSelect" />
    </m-card>
    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box3" title="投诉保修" mode="4" :icon="require('@/assets/images/icon3.png')">
      <Repair />
    </m-card>
    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box4" title="智能发现" mode="4" :icon="require('@/assets/images/icon4.png')">
      <Discovery />
    </m-card>
    <m-card v-show="complete" area="box5" title="物业督查" mode="4" :icon="require('@/assets/images/icon5.png')">
      <Supervision  @clickCommunity="clickCommunity"/>
    </m-card>
    <m-card v-show="complete" area="box6" title="协同处置" mode="4" :icon="require('@/assets/images/icon6.png')">
      <Handle/>
    </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'
import Handle from '@/views/components/handle.vue'

import {mapActions} from 'vuex'
export default {
  name: 'Main',
  components: {
    EmergencyCommand,
    Operation,
    Repair,
    Discovery,
    Supervision,
    Handle,
  },
  data() {
    return {
      complete: false,
    }
  },
  methods: {
    mapComplete() {
      setTimeout(() => {
        this.complete = true
        this.initData()
        this.getCheckCommunityList({isPublish: 1, someday: '20200316'})
        this.getCheckCommunityList()
        this.getCheckedPeopleList()
      }, 3000)
    },
    handleMapClick({layername, data}) {
      switch (layername) {
      case 'community': // 当点击图层为小区时
        const {X, Y} = data[0]
        const {map} = this.$refs
        map.removeGifPoint('selected-point') // 先移除已点击的点
        map.focus(X, Y, 8)
        map.addGifPoint({name: 'selected-point', key: 'COMMUNITYID', labelKey: 'COMMUNITYNAME', data: data[0], icon: data[0].icon || 'blue.png'})
        break
      default:
        break
      }
    },
    handleSelect(data) {
      console.log(data)
    },
    clickCommunity(data){
      console.log(data)
    },
    ...mapActions([
      'initData',
      'getCheckCommunityList',
      'getCheckedPeopleList'
    ])
  },
  watch: {
    '$store.state.supervisionCommunityList': {
      handler(cur) {
        this.$refs.map.removePoint('community')
        this.$refs.map.addPoint({name: 'community', key: 'COMMUNITYID', data: cur, icon: 'blue.png'})
      }
    },
  },
}
</script>
