<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"/>
    </m-animate>
    <MapBtns v-model="fullView" @zoomin="zoom('in')" @zoomout="zoom('out')" />
    <m-modal v-model="showModal" 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 {mapState, mapActions} from 'vuex'
export default {
  name: 'Main',
  components: {
    LeftComponent,
    RightComponent,
    MapBtns,
  },
  data() {
    return {
      complete: false,
      fullView: false,
      showModal: false,
      detailData: {},
      detailLayout: [
        {
          id: {
            label: '工单编号',
            width: 12,
          },
          type: {
            label: '事件类型',
            width: 12,
          },
        },
        {
          time: {
            label: '报警时间',
            width: 12,
          },
          level: {
            label: '报警等级',
            width: 12,
          },
        },
        {
          address: {
            label: '地址',
            width: 24,
          },
        },
        {
          result: {
            label: '处理结论',
            width: 24,
          },
        },
      ],
    }
  },
  computed: {
    ...mapState([
      'xinjiangwanPaths',
      'commandLayout',
      'commandData',
      'showCommandModal',
    ])
  },
  methods: {
    ...mapActions([
      'initData', // 初始化获取首次加载所需的所有数据
    ]),
    mapComplete() {
      this.initData()
      setTimeout(() => {
        this.complete = true
        this.init()
      }, 1000)
    },
    init() {
      const {map} = this.$refs
      const mockPoints = {
        size: [14, 16],
        data: [
          {
            x: 2594.9960327148437,
            y: 11519.020812988281,
            id: 123,
            type: '事件类型',
            time: '2020-10-23 13:25:15',
            level: '2级',
            address: '地址',
            result: '处理结论',
            icon: 'blue1.png',
          },
          {
            x: 5163.4830322265625,
            y: 11044.733642578125,
            id: 1223,
            name: '雍景苑',
            type: '事件类型',
            time: '2020-10-23 13:25:15',
            level: '2级',
            address: '地址',
            result: '处理结论',
            icon: 'blue2.png',
          },
          {
            x: 3489.0714111328125,
            y: 10384.431030273437,
            name: '九龙仓玺园',
            id: 3223,
            type: '事件类型',
            time: '2020-10-23 13:25:15',
            level: '2级',
            address: '地址',
            result: '处理结论',
            icon: 'red3.png',
          },
          {
            x: 2438.0490112304687,
            y: 8973.5946044921875,
            name: '保利维拉家园',
            id: 4223,
            type: '事件类型',
            time: '2020-10-23 13:25:15',
            level: '2级',
            address: '地址',
            result: '处理结论',
            icon: 'green.png',
          },
        ],
      }
      map.focus(3489.0714111328125, 10384.431030273437, 4.5)
      map.addPolygon({paths: this.xinjiangwanPaths, fillColor: 'rgba(51,145,255,.3)'})
      map.addBoundary({name: '新江湾城'})
      map.addPoint(mockPoints)
    },
    handleMapClick(data) {
      this.detailData = data
      this.showModal = true
    },
    zoom(type) {
      if (type === 'in') this.$refs.map.zoomIn()
      else this.$refs.map.zoomOut()
    }
  }
}
</script>
