<template>
  <m-grid
    :template="[
      'title title title',
      'left . right',
    ]"
    columns="1fr 1fr 1fr"
    rows="0.4rem 1fr"
    gap="0.05rem"
    :complete="complete"
  >
    <m-map ref="map" @complete="mapComplete" @event="handleMapClick"/>
    <m-title area="title" :bgImg="require('@/assets/images/title-bg.png')">杨浦区物业地理信息平台</m-title>
    <m-animate enter="fadeInLeft" leave="fadeOutLeft">
      <LeftComponent v-show="!fullView" area="left"/>
    </m-animate>
    <m-animate enter="fadeInRight" leave="fadeOutRight">
      <RightComponent
        v-show="!fullView"
        area="right"
        @handle="handleMapClick"
      />
    </m-animate>
    <MapBtns v-model="fullView" @zoomin="zoom('in')" @zoomout="zoom('out')" />
    <m-modal v-model="detailModal" title="智能报警">
      <m-form :label-width=".6" :model="detailData" :layout="detailLayout" />
    </m-modal>
    <m-modal title="指挥体系" :value="showCommandModal" @close="$store.commit('SET_COMMAND_MODAL', false)">
      <m-form :label-width=".7" :model="commandData" :layout="commandLayout" />
    </m-modal>
  </m-grid>
</template>

<script>
import LeftComponent from './components/left-component'
import RightComponent from './components/right-component'
import MapBtns from './components/map-btns'
import VideoComponent from './components/video-component'
import {mapState, mapActions} from 'vuex'
export default {
  name: 'Main',
  components: {
    LeftComponent,
    RightComponent,
    MapBtns,
    VideoComponent,
  },
  data() {
    return {
      timer: null,
      complete: false,
      fullView: false,
      detailModal: false,
      smartPoints: null,
      detailData: {},
      detailLayout: [
        {
          communityName: {
            label: '小区名称',
            width: 12,
          },
          check_type: {
            label: '发现方式',
            width: 12,
            format: val => val || '智能发现'
          },
        },
        {
          types: {
            label: '协同事项',
            width: 12,
            format: val => val && this.$com.transType(val)
          },
          receive_property_name: {
            label: '响应部门',
            width: 12,
          },
        },
        {
          device_name: {
            label: '设备地点',
            width: 24,
          },
        },
      ],
    }
  },
  computed: {
    ...mapState([
      'yangpuPaths',
      'commandLayout',
      'commandData',
      'showCommandModal',
      'handleList',
    ])
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    ...mapActions([
      'initData', // 初始化获取首次加载所需的所有数据
      'getHandleList',
    ]),
    mapComplete() {
      this.init()
      this.initData()
      this.complete = true
      this.timer = setInterval(() => {
        this.getHandleList()
      }, 1000 * 60 * 1)
    },
    init() {
      const {map} = this.$refs
      this.initMapFocus()
      map.addPolygon({paths: this.yangpuPaths, fillColor: 'rgba(51,145,255,.3)'})
      map.addBoundary({name: '杨浦区'})
    },
    initMapFocus() {
      this.$refs.map.focus(5493.207992825168, 7214.452284743532, 3.5)
    },
    handleMapClick(data) {
      this.detailData = data
      this.detailModal = true
    },
    drawSmartPoints(data) {
      const {addPoint, removePoint} = this.$refs.map
      removePoint(this.smartPoints)
      this.smartPoints = addPoint({
        key: 'smart',
        size: [14, 16],
        data: data.map(item => {
          return {
            ...item,
            icon: item.done_time ? 'blue4.png' : 'red4.png',
          }
        }),
      })
    },
    zoom(type) {
      if (type === 'in') this.$refs.map.zoomIn()
      else this.$refs.map.zoomOut()
    },
  },
  watch: {
    handleList(cur) {
      this.drawSmartPoints(cur)
    },
  }
}
</script>
