<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"
        @patrol="handleMapClick"
        @handle="handleMapClick"
        @video="handleViewVideo"
      />
    </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 v-model="patrolModal" title="主动巡检">
      <m-form :label-width=".6" :model="patrolData" :layout="patrolLayout" />
    </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-modal title="鹰眼监控" v-model="videoModal">
      <VideoComponent v-if="videoModal" :videoSrc="videoSrc" />
    </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 {
      complete: false,
      fullView: false,
      videoModal: false,
      videoSrc: null,
      detailModal: false,
      patrolModal: false,
      smartPoints: null,
      detailData: {},
      patrolData: {},
      detailLayout: [
        {
          communityName: {
            label: '小区名称',
            width: 12,
          },
          communityAddr: {
            label: '小区地址',
            width: 12,
          },
        },
        {
          types: {
            label: '协同事项',
            width: 12,
            format: val => val && this.$com.transType(val)
          },
          receive_property_name: {
            label: '响应部门',
            width: 12,
          },
        },
        {
          check_type: {
            label: '发现方式',
            width: 12,
            format: val => val || '智能发现'
          },
          device_name: {
            label: '设备地点',
            width: 12,
          },
        },
      ],
      // 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,
      //     },
      //   },
      // ],
      patrolLayout: [
        {
          name: {
            label: '小区名称',
            width: 12,
          },
          event: {
            label: '整改事项',
            width: 12,
          },
        },
        {
          time: {
            label: '发现时间',
            width: 12,
          },
          status: {
            label: '整改状态',
            width: 12,
          },
        },
        {
          submit: {
            label: '上报人',
            width: 12,
          },
          department: {
            label: '房办名称',
            width: 12,
          },
        },
        {
          theme: {
            label: '检查主题',
            width: 24,
          },
        },
      ],
    }
  },
  computed: {
    ...mapState([
      'curSmartType',
      'xinjiangwanPaths',
      'commandLayout',
      'commandData',
      'showCommandModal',
      'patrolList',
      'handleList',
    ])
  },
  methods: {
    ...mapActions([
      'initData', // 初始化获取首次加载所需的所有数据
    ]),
    mapComplete() {
      this.init()
      this.initData()
      this.complete = true
      // setTimeout(() => {
      //   this.complete = true
      //   this.init()
      // }, 1000)
    },
    init() {
      const {map} = this.$refs
      this.initMapFocus()
      map.addPolygon({paths: this.xinjiangwanPaths, fillColor: 'rgba(51,145,255,.3)'})
      map.addBoundary({name: '新江湾城'})
    },
    initMapFocus() {
      this.$refs.map.focus(3489.0714111328125, 10384.431030273437, 4.5)
    },
    handleMapClick(data) {
      if (data.key === 'patrol') {
        this.patrolData = data
        this.patrolModal = true
      } else {
        this.detailData = data
        this.detailModal = true
      }
      // this.$refs.map.focus(data.x || data.gpsx, data.y || data.gpsy, 8)
    },
    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',
          }
        }),
      })
    },
    handleViewVideo(src) {
      this.videoSrc = src
      this.videoModal = true
    },
    zoom(type) {
      if (type === 'in') this.$refs.map.zoomIn()
      else this.$refs.map.zoomOut()
    },
  },
  watch: {
    patrolList(cur) {
      this.$refs.map.addPoint({
        key: 'patrol',
        size: 14,
        icon: 'red.png',
        data: cur,
      })
    },
    curSmartType(cur) {
      let data = this.handleList
      if (cur) {
        data = this.handleList.filter(item => item.types === cur)
      }
      this.drawSmartPoints(data)
    },
    handleList(cur) {
      let data = cur
      if (this.curSmartType) {
        data = cur.filter(item => item.types === this.curSmartType)
      }
      this.drawSmartPoints(data)
    },
  }
}
</script>
