<template>
  <m-grid
    :template="[
      'title title title',
      'left . right',
    ]"
    columns="33.3vw auto 33.3vw"
    rows="0.4rem auto"
    gap="0.05rem"
    :complete="complete"
  >
    <m-map ref="map" @complete="mapComplete" @event="handleMapClick" @grid="handleGridClick" />
    <m-title area="title" :bgImg="require('@/assets/images/title-bg.png')">{{currentStreetInfo.name}}城市运行平台</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="handleListClick"
        @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="doneModal" title="已完成处置">
      <DoneComponent v-if="doneModal" :data="doneData" />
    </m-modal>
    <m-modal title="指挥体系" :value="showCommandModal" @close="$store.commit('SET_COMMAND_MODAL', false)">
      <m-form :label-width=".7" :model="streetInfo[currentStreetInfo.id]" :layout="streetInfo[currentStreetInfo.id].layout" />
    </m-modal>
    <m-modal v-model="patrolModal" title="主动巡检">
      <m-form :label-width=".6" :model="patrolData" :layout="patrolLayout" />
    </m-modal>
    <m-modal v-model="gridPersonModal" title="网格详情" @close="removeSelectedGridLayer">
      <m-table :model="gridPersonList" :layout="gridPersonLayout" />
    </m-modal>
    <m-modal :title="`鹰眼监控：${cameraName || ''}`" 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 DoneComponent from './components/done-component'
import {mapState, mapActions} from 'vuex'
export default {
  name: 'Main',
  components: {
    LeftComponent,
    RightComponent,
    MapBtns,
    VideoComponent,
    DoneComponent,
  },
  data() {
    return {
      timer: null,
      timer2: null,
      complete: false,
      fullView: false,
      videoModal: false,
      videoSrc: null,
      detailModal: false,
      smartPoints: null,
      detailData: {},
      cameraPoints: [],
      cameraName: null,
      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,
          },
        },
      ],
      patrolModal: false,
      patrolData: null,
      patrolLayout: [
        {
          communityName: {
            label: '小区名称',
            width: 12,
          },
          orderTypeName: {
            label: '整改事项',
            width: 12,
          },
        },
        {
          checkTime: {
            label: '发现时间',
            width: 12,
          },
          checkStateName: {
            label: '整改状态',
            width: 12,
          },
        },
        {
          checkPersonName: {
            label: '上报人',
            width: 12,
          },
          hoName: {
            label: '房办名称',
            width: 12,
          },
        },
        {
          tcName: {
            label: '检查主题',
            width: 24,
          },
        },
      ],
      doneModal: false,
      doneData: {},
      gridLayer: null,
      gridPersonModal: false,
      gridPersonList: [],
      gridPersonLayout: [
        {
          key: 'street',
          title: '街道',
          width: 4,
        },
        {
          key: 'title',
          title: '职务',
          width: 4,
        },
        {
          key: 'contacts',
          title: '姓名',
          width: 4,
        },
        {
          key: 'mobile',
          title: '联系方式',
          width: 6,
        },
        {
          key: 'department',
          title: '所属部门',
          width: 6,
        },
      ],
      selectedGridArea: null,
      selectedGridBoundary: null,
    }
  },
  computed: {
    ...mapState([
      'currentStreetInfo',
      'streetInfo',
      'curSmartType',
      'showCommandModal',
      'cameraList',
      'patrolList',
      'handleList',
      'handleCurTab',
    ])
  },
  beforeCreate() {
    const {name} = this.$route.query
    this.$store.commit('SET_CURRENT_STREET', name)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    clearInterval(this.timer2)
    this.timer = null
    this.timer2 = null
  },
  methods: {
    ...mapActions([
      'initData', // 初始化获取首次加载所需的所有数据
      'getRepairRate',
      'getDiscoverInfo',
      'getRepairInfo',
      'getHandleList',
      'getPatrolList',
      'getDoneList',
      'getGridSum',
      'getCheckSum',
    ]),
    mapComplete() {
      this.init()
      this.initData()
      this.complete = true
      this.timer = setInterval(() => {
        this.getRepairRate()
        this.getDiscoverInfo()
        this.getRepairInfo()
        this.getHandleList()
        this.getPatrolList()
        this.getDoneList()
        this.getCheckSum()
      }, 1000 * 60 * 1)
      this.timer2 = setInterval(() => {
        this.getGridSum()
      }, 1000 * 60 * 30)
    },
    init() {
      const {name, } = this.currentStreetInfo
      document.querySelector('title').innerText = `${name}城市运行平台`
      const {map} = this.$refs
      this.initMapFocus()
      // map.addPolygon({paths: this.$store.state.streetPaths[id], fillColor: 'rgba(51,145,255,.3)'})
      map.addBoundary({name: name})
      this.gridLayer = map.addGrid(this.currentStreetInfo.name)
    },
    initMapFocus() {
      const {center} = this.currentStreetInfo
      this.$refs.map.focus(...center, 5.5)
    },
    handleMapClick(data) {
      if (!data) return
      if (data.key === 'camera') {
        const {deviceGbcode, deviceName} = data
        this.$ajax.get({
          url: this.$api.GET_VIDEO_URL + deviceGbcode,
          showLoading: true,
        }).then(res => {
          this.handleViewVideo(this.$com.confirm(res, 'payload.url', ''), deviceName)
        })
      } else if (data.key === 'patrol') {
        this.patrolData = data
        this.patrolModal = true
      } else if (data.key === 'smart') {
        this.detailData = data
        this.detailModal = true
      }
      // this.$refs.map.focus(data.x || data.gpsx, data.y || data.gpsy, 8)
    },
    handleGridClick({attributes, geometry}) {
      const {map} = this.$refs
      this.removeSelectedGridLayer()
      const [paths] = geometry.rings
      this.selectedGridArea = map.addPolygon({paths, fillColor: 'rgba(255,235,59,.15)'})
      this.$ajax.get({
        url: this.$api.DATA_URL + this.$api.GET_GRID_PERSON,
        params: {street: this.currentStreetInfo.name, gridId: +attributes['网格编']},
        showLoading: true,
      }).then(res => {
        this.gridPersonList = res || []
        this.gridPersonModal = true
      })
    },
    removeSelectedGridLayer() {
      const {map} = this.$refs
      map.remove(this.selectedGridArea)
      map.remove(this.selectedGridBoundary)
    },
    handleListClick(data) {
      if (this.handleCurTab === '处置中') {
        this.detailData = data
        this.detailModal = true
      } else {
        this.doneData = data
        this.doneModal = true
      }
    },
    drawSmartPoints(data) {
      const {addPoint, remove} = this.$refs.map
      remove(this.smartPoints)
      this.smartPoints = addPoint({
        key: 'smart',
        size: [14, 16],
        data: data.map(item => {
          return {
            ...item,
            icon: 'red4.png',
          }
        }),
      })
    },
    handleViewVideo(src, name) {
      this.videoSrc = src
      this.videoModal = true
      this.cameraName = name
    },
    zoom(type) {
      if (type === 'in') this.$refs.map.zoomIn()
      else this.$refs.map.zoomOut()
    },
  },
  watch: {
    cameraList(cur) {
      const {addPoint, remove} = this.$refs.map
      remove(this.cameraPoints)
      this.cameraPoints = addPoint({
        key: 'camera',
        size: 14,
        icon: 'blue4.png',
        data: cur,
      })
    },
    patrolList(cur) {
      const {addPoint, remove} = this.$refs.map
      remove(this.patrolPoints)
      this.patrolPoints = 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>
