<template>
  <m-grid
    :template="[
      'title title title',
      'box1 . box5',
      'box2 . box5',
      'box8 . box5',
      'box8 . box3',
      'box8 . box10',
      'box6 box7 box9',
    ]"
    columns="1fr 2fr 1fr"
    rows="3rem 0.8fr 1.2fr 0.5fr 1fr 1fr 1.5fr"
    gap="0.5rem"
    style="padding: 0.5rem"
    :complete="complete"
  >
    <m-map ref="map" @event="handleMapClick" @complete="mapComplete" />
    <m-animate enter="fadeInDown" leave="fadeOutUp">
      <m-title v-show="!emergencyMode" area="title" color="#fff" :bgImg="require('@/assets/images/title-bg4.png')">浦东新区物业微平台({{curTitle}}街道)</m-title>
    </m-animate>
    <m-animate enter="fadeInDown" leave="fadeOutUp">
      <m-title v-show="emergencyMode" :imgStyle="{height: '178%', top: '-1rem'}" area="title" color="gold" :bgImg="require('@/assets/images/title-bg2.png')" size="2.4rem">物业微平台({{curTitle}}街道)</m-title>
    </m-animate>
    <img v-show="emergencyMode" @mouseenter="showModeMenu = true" class="mode-btn" src="@/assets/images/title-arrow2.png"/>
    <m-menu v-model="showModeMenu" />
    <m-card class="em em1" enter="fadeInDown" leave="fadeOutUp" v-show="!complete && emergencyMode" mode="3" title="IV级模式应急指挥体系" :icon="require('@/assets/images/title6.png')">
      <EmergencyCommand @select="changeMode" hideEmergency/>
    </m-card>
    <m-card class="em em2" enter="fadeInLeft" leave="fadeOutLeft" v-show="!complete && emergencyMode" mode="3" title="防台防汛检查情况" :icon="require('@/assets/images/title2.png')">
      <Emergency1 :show="emergencyMode"/>
    </m-card>
    <m-card class="em em3" v-show="!complete && emergencyMode" mode="3" title="应急响应机制" :icon="require('@/assets/images/title5.png')">
      <h1>IV级响应防御提示</h1>
      <p>(1) 各级防汛机构和有关抢险单位加强值班，密切监视汛情和灾情，落实应对措施。</p>
      <p>(2) 发布有关预警信息和防汛防台提示。</p>
      <p>(3) 各防汛排水泵站加强值守;城镇排水单位量放水人员进岗到位，加强雨中路面巡视，及时抢排道路积水;移动泵车做好抢排准备。</p>
      <p>(4) 低洼、易受淹地区做好排水防涝准备工作。</p>
      <p>(5) 高空、水上等户外作业人员采取有效防御措施，必要时加固或拆除户外装置。</p>
      <p>(6) 电力、通信等部门、单位加强抢修力量的配备。</p>
      <p>(7) 加强巡查，对易倒伏的高大树木进行修剪、绑扎、加固等。</p>
      <p>(8) 检查加固高架、高速道路的各类指示标志，落实杨高路商务走廊防积水和紧急排水措施。</p>
      <p>(9) 加强对玻璃幕墙和空调外机等高空构建筑物的检查，督促业主落实安全措施。</p>
      <p>(10) 各专业抢险队伍进入应急准备状态，组织巡检，一旦受灾，应当在第一时间内，完成抢排积水、道路清障、应急抢修等工作。</p>
      <img @click="handleViewImg('flow.png')" style="width:100%;height:100%;" src="@/assets/images/flow.png"/>
    </m-card>
    <m-card class="em em4" enter="fadeInUp" leave="fadeOutDown" v-show="!complete && emergencyMode" mode="3" title="应急处置人员" :icon="require('@/assets/images/title4.png')">
      <div class="em-person">
        <div v-for="(item,i) in personList" :key="i">
          <img src="@/assets/images/mw.png"/>
          {{item.name}} {{item.phone}}
        </div>
      </div>
    </m-card>
    <m-card class="em em5" enter="fadeInUp" leave="fadeOutDown" v-show="!complete && emergencyMode" mode="3" title="远程指挥（视频直播）" :icon="require('@/assets/images/title1.png')">
      <img @click="handleViewImg('m1.jpeg')" src="@/assets/images/m1.jpeg" style="width:100%;height:90%;"/>
    </m-card>
    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box1" title="指挥体系" mode="4" btn="map-icon">
      <EmergencyCommand @changeMode="changeMode"/>
    </m-card>
    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box2" title="基础数据" mode="4">
      <Operation />
    </m-card>
    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box8" title="管理要素" mode="4" btn="模型">
      <!-- <ManageIssue v-if="complete"/> -->
      <ManageIssue @select="(data) => {issueInfo = data; showIssueInfo = true;}"/>
    </m-card>
    <m-card v-show="complete" area="box3" title="投诉报修" mode="4">
      <Repair />
    </m-card>
    <!-- <m-card v-show="complete" area="box4" title="督查提醒" mode="4">
      <Supervision />
    </m-card> -->
    <m-card v-show="complete" area="box9" title="视频监控" mode="4">
      <VideoWrapper @select="showVideo"/>
    </m-card>
    <m-card v-show="complete" area="box5" title="智能发现" mode="4">
      <Discovery
        @summary="handleDiscoverSummary"
      />
    </m-card>
    <m-card v-show="complete" area="box10" title="辅助应用" mode="4">
      <Application
        @elevator="() => {mapSrc = 'http://211.136.105.193/elev/#/?name=南码头';showEleMap = true}"
        @house="() => {mapSrc = 'http://211.136.105.193/elev/#/house-map';showEleMap = true}"
      />
    </m-card>
    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box6" title="治理分析" mode="4">
      <GovernAnalysis @select="(name) => {this.showAnalysisDetail = true; this.analysisTitle = name;}" v-if="complete"/>
    </m-card>
    <m-card v-show="complete" enter="fadeInUp" leave="fadeOutDown" area="box7" title="联勤联动动态流程" mode="4" :width="25">
      <Handle v-if="complete" @select="(data) => {this.handleDetail = data;this.showHandleDetail = true;}"/>
    </m-card>
    <MapMenu :full="complete" @full="handleFullView" @switch="handleSwitchIcon" @in="$refs.map.zoomIn()" @out="$refs.map.zoomOut()"/>
    <StreetMenu @select="handleStreetSelect"/>
    <!-- <m-animate enter="fadeInUp" leave="fadeOutDown">
      <BottomTabs v-show="complete" @click="showModal = true"/>
    </m-animate> -->
    <div class="icon-wrapper">
      <p v-for="item in tooltipIcons" :key="item.label"><img :src="require(`@/assets/images/${item.icon}.png`)"/>{{item.label}}</p>
    </div>
    <m-modal :value="$store.state.showElementModal" @close="$store.commit('SET_ELEMENTMODAL', false)" width="85%" title="小区综合治理管理要素">
      <IssueDetail />
    </m-modal>
    <m-modal v-model="showEleMap" width="90%" title="辅助应用">
      <iframe v-if="showEleMap" style="width:100%;min-height:80vh;background:#fff;" :src="mapSrc" frameborder="0"/>
    </m-modal>
    <m-modal v-model="showImgModal" title="图片">
      <img v-if="showImgModal" style="width: 100%;" :src="require(`@/assets/images/${curImg}`)" />
    </m-modal>
    <m-modal v-model="showAnalysisDetail" :title="analysisTitle">
      <AnalysisModal :analysisTitle="analysisTitle"/>
    </m-modal>
    <m-modal v-model="videoModal" title="视频监控">
      <video v-if="videoModal" style="width:100%;height:100%;" controls autoplay>
        <source :src="require(`@/assets/images/${curVideo}.mp4`)" type="video/mp4">
        您的浏览器不支持 video 标签。
      </video>
    </m-modal>
    <m-modal v-model="repairListModal" title="投诉、报修列表" width="70%">
      <m-table :layout="repairListLayout" :model="repairList" />
    </m-modal>
    <m-modal v-model="showEventModal" title="传感器列表" width="70%">
      <SensorList :data="eventData" />
      <!-- <m-form v-for="data in eventData" :key="data.id" :title="data.addr" :label-width="6" :model="data" :layout="eventLayout"/> -->
      <!-- <img v-if="showEventModal" style="width:100%;" :src="eventData.img ? require(`@/assets/images/${eventData.img}`) : null"/> -->
    </m-modal>
    <m-modal v-model="$store.state.processModal" @close="$store.commit('SET_PROCESSMODAL', false)" title="联勤联动处置模型" width="80%">
      <img style="width:100%;height:100%;" src="@/assets/images/process-model.png"/>
    </m-modal>
    <m-modal v-model="$store.state.discoverModal" @close="$store.commit('SET_DISCOVERMODAL', false)" title="传感器设备阀值设置" width="70%">
      <m-table :layout="discoverModalLayout" :model="discoverModalList" />
    </m-modal>
    <m-modal v-model="discoverModal" title="智能发现清单" width="70%" offset="-21%">
      <m-table :layout="discoverLayout" :model="discoverList" clickable @row-click="(data) => {this.handleDetail = data;this.showHandleDetail = true;}"/>
    </m-modal>
    <m-modal v-model="showHandleDetail" title="联勤联动动态流程" width="60%">
      <m-form :label-width="8" title="流程信息" :model="handleDetail" :layout="handleDetailLayout"/>
      <div style="width:90%;margin:3rem auto;">
        <m-step
          :steps="[{name:'推送',},{name:'接收',},{name:'处置',},{name:'完成'}]"
          :current="[handleDetail.done_time ? 3 : (handleDetail.current || 2), false]"
          :msg="[handleDetail.create_time || '', handleDetail.check_time || '', handleDetail.receive_time || '', handleDetail.done_time || '']"
          :info="handleDetail"
        />
      </div>
    </m-modal>
    <m-modal v-model="showIssueInfo" :title="issueInfo.title" width="25%">
      <m-table v-if="showIssueInfo" :layout="issueInfoLayout" :model="issueInfo.data" />
    </m-modal>
    <m-modal v-model="$store.state.showImgView" @close="$store.commit('SET_IMGVIEW', false)" title="照片预览">
      <img v-if="$store.state.showImgView" style="width:100%;height:100%;" :src="$store.state.imgViewSrc"/>
    </m-modal>
  </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 StreetMenu from './components/street-menu'
import BottomTabs from './components/bottom-tabs'
import ManageIssue from './components/manage-issue'
import MapMenu from './components/map-menu'
import Emergency1 from './components/emergency1'
import ImgContainer from './components/img-container'
import Application from './components/application'
import GovernAnalysis from './components/govern-analysis'
import AnalysisModal from './components/analysis-modal'
import IssueDetail from './components/issue-detail'
import VideoWrapper from './components/video-wrapper'
import SensorList from './components/sensor-list'

import {mapActions} from 'vuex'
export default {
  name: 'Main',
  components: {
    EmergencyCommand,
    Operation,
    Repair,
    Discovery,
    Supervision,
    Handle,
    StreetMenu,
    BottomTabs,
    ManageIssue,
    MapMenu,
    Emergency1,
    ImgContainer,
    Application,
    GovernAnalysis,
    AnalysisModal,
    IssueDetail,
    VideoWrapper,
    SensorList,
  },
  data() {
    return {
      timer: null,
      openIcon: false,
      curTitle: '南码头',
      emergencyMode: false,
      showModeMenu: false,
      complete: false,
      showEleMap: false,
      curImg: '',
      mapSrc: null,
      showImgModal: false,
      eventData: [],
      showHandleDetail: false,
      handleDetail: {},
      handleDetailLayout: [
        {
          communityName: {
            label: '小区名称',
            width: 8,
          },
          communityAddr: {
            label: '小区地址',
            width: 16,
          },
        },
        {
          types: {
            label: '协同事项',
            width: 8,
            format: val => (val && this.$com.getSensorScene(val)) || this.handleDetail.matter
          },
          cspName: {
            label: '响应部门',
            width: 16,
          },
        },
        {
          check_type: {
            label: '发现方式',
            width: 8,
            format: val => val || '智能发现'
          },
          device_name: {
            label: '设备地点',
            width: 16,
          },
        },
        {
          imgs_url: {
            label: '照片',
            width: 16,
            type: 'img',
          },
        }
      ],
      repairList: [],
      repairListModal: false,
      repairListLayout: [
        {
          title: '街镇',
          key: 'street',
          width: 3,
          format: val => '南码头街道'
        },
        {
          title: '小区',
          key: 'communityName',
          width: 3,
          format: val => '临沂二村'
        },
        {
          title: '地址',
          key: 'address',
          width: 3,
        },
        {
          title: '类型',
          key: 'troubleType',
          width: 3,
        },
        {
          title: '反映问题',
          key: 'reportContent',
          width: 6,
        },
        {
          title: '状态',
          key: 'status',
          width: 3,
        },
        {
          title: '受理时间',
          key: 'acceptTime',
          width: 3,
        },
      ],
      personList: [
        {name: '张三', phone: '13764650559'},
        {name: '李四', phone: '13764330559'},
        {name: '王五', phone: '13764633559'},
        {name: '赵六', phone: '13394650559'},
        {name: '张三', phone: '13764650559'},
        {name: '李四', phone: '13764330559'},
        {name: '王五', phone: '13764633559'},
        {name: '赵六', phone: '13394650559'},
        {name: '张三', phone: '13764650559'},
        {name: '李四', phone: '13764330559'},
        {name: '王五', phone: '13764633559'},
        {name: '赵六', phone: '13394650559'},
      ],
      showAnalysisDetail: false,
      analysisTitle: null,
      curVideo: null,
      videoModal: false,
      showEventModal: false,
      discoverModal: false,
      discoverLayout: [
        {
          title: '小区名称',
          key: 'communityName',
          width: 4,
        },
        {
          title: '小区地址',
          key: 'communityAddr',
          width: 5,
        },
        {
          title: '协同事项',
          key: 'types',
          format: (val) => this.$com.getSensorScene(val),
          width: 4,
        },
        {
          title: '响应部门',
          key: 'cspName',
          width: 4,
        },
        {
          title: '发现时间',
          key: 'check_time',
          width: 4,
        },
        {
          title: '状态',
          key: 'done_time',
          format: (val) => val ? '完成' : '处置',
          width: 2,
        },
        {
          title: '-',
          key: 'imgs_url',
          type: 'icon',
          width: 1,
        }
      ],
      discoverList: [],
      showIssueInfo: false,
      issueInfo: {title: ''},
      issueInfoLayout: [
        {
          title: '事件名称',
          key: 'name',
          width: 12,
          align: 'center',
        },
        {
          title: '扣分值',
          key: 'count',
          width: 12,
          align: 'center',
        },
      ],
      discoverModalLayout: [
        {
          title: '应用场景',
          key: 'scene',
          width: 6,
        },
        {
          title: '传感器名称',
          key: 'name',
          width: 6,
        },
        {
          title: '传感器安装地址',
          key: 'address',
          width: 6,
        },
        {
          title: '传感器阀值设置',
          key: 'setting',
          width: 6,
        },
      ],
      discoverModalList: [
        {scene: '非定时倾倒垃圾监控', name: '智能门磁感应器', address: '浦三路12弄18号楼北侧垃圾房-1', setting: '无阈值设置'},
        {scene: '非定时倾倒垃圾监控', name: '智能门磁感应器', address: '浦三路12弄18号楼北侧垃圾房-2', setting: '无阈值设置'},
        {scene: '非定时倾倒垃圾监控', name: '智能门磁感应器', address: '浦三路12弄18号楼北侧垃圾房-3', setting: '无阈值设置'},
        {scene: '非定时倾倒垃圾监控', name: '智能门磁感应器', address: '浦三路12弄18号楼北侧垃圾房-4', setting: '无阈值设置'},
        {scene: '集中充电异常', name: '烟雾感应器', address: '浦三路28弄5号非机车库-4', setting: '通过红外光散射原理来探测火灾'},
        {scene: '集中充电异常', name: '烟雾感应器', address: '浦三路28弄5号非机车库-1', setting: '通过红外光散射原理来探测火灾'},
        {scene: '集中充电异常', name: '烟雾感应器', address: '浦三路28弄5号非机车库-3', setting: '通过红外光散射原理来探测火灾'},
        {scene: '集中充电异常', name: '烟雾感应器', address: '浦三路28弄5号非机车库-2', setting: '通过红外光散射原理来探测火灾'},
        {scene: '集中充电异常', name: '温湿度传感器', address: '浦三路28弄5号非机车库-4', setting: '温度阈值：60度'},
        {scene: '集中充电异常', name: '温湿度传感器', address: '浦三路28弄5号非机车库-2', setting: '温度阈值：60度'},
        {scene: '集中充电异常', name: '温湿度传感器', address: '浦三路28弄5号非机车库-3', setting: '温度阈值：60度'},
        {scene: '集中充电异常', name: '温湿度传感器', address: '浦三路28弄5号非机车库-1', setting: '温度阈值：60度'},
        {scene: '平改坡屋顶积水', name: '温湿度传感器', address: '浦三路12弄10号楼顶平台', setting: '温度阈值：60度'},
        {scene: '平改坡屋顶积水', name: '温湿度传感器', address: '浦三路12弄9号楼顶平台', setting: '温度阈值：60度'},
        {scene: '平改坡屋顶积水', name: '温湿度传感器', address: '浦三路12弄11号楼顶平台', setting: '温度阈值：60度'},
        {scene: '平改坡屋顶积水', name: '温湿度传感器', address: '浦三路12弄7号楼顶平台', setting: '温度阈值：60度'},
        {scene: '平改坡屋顶积水', name: '水浸传感器', address: '浦三路12弄10号楼顶平台', setting: '无阈值设置，传感器被水漫过，导致两极短路即报警'},
        {scene: '平改坡屋顶积水', name: '水浸传感器', address: '浦三路12弄9号楼顶平台', setting: '无阈值设置，传感器被水漫过，导致两极短路即报警'},
        {scene: '平改坡屋顶积水', name: '水浸传感器', address: '浦三路12弄7号楼顶平台', setting: '无阈值设置，传感器被水漫过，导致两极短路即报警'},
        {scene: '平改坡屋顶积水', name: '水浸传感器', address: '浦三路12弄11号楼顶平台', setting: '无阈值设置，传感器被水漫过，导致两极短路即报警'},
        {scene: '水箱异常开启', name: '智能门磁感应器', address: '浦三路12弄11号楼顶平台', setting: '无阈值设置'},
        {scene: '水箱异常开启', name: '智能门磁感应器', address: '浦三路12弄7号楼顶平台', setting: '无阈值设置'},
        {scene: '水箱异常开启', name: '智能门磁感应器', address: '浦三路12弄10号楼顶平台', setting: '无阈值设置'},
        {scene: '水箱异常开启', name: '智能门磁感应器', address: '浦三路12弄9号楼顶平台', setting: '无阈值设置'},
        {scene: '损坏房屋承重结构', name: '震动传感器', address: '南码头路451弄12号3F外墙', setting: '共振阈值超：4.5'},
        {scene: '损坏房屋承重结构', name: '震动传感器', address: '南码头路451弄6号3F外墙', setting: '共振阈值超：4.5'},
        {scene: '损坏房屋承重结构', name: '震动传感器', address: '南码头路451弄33号3F外墙', setting: '共振阈值超：4.5'},
        {scene: '损坏房屋承重结构', name: '震动传感器', address: '南码头路451弄10号3F外墙', setting: '共振阈值超：4.5'},
        {scene: '损坏房屋承重结构', name: '震动传感器', address: '南码头路451弄8号3F外墙', setting: '共振阈值超：4.5'},
        {scene: '损坏房屋承重结构', name: '震动传感器', address: '南码头路451弄41号3F外墙', setting: '共振阈值超：4.5'},
        {scene: '损坏房屋承重结构', name: '震动传感器', address: '南码头路451弄37号3F外墙', setting: '共振阈值超：4.5'},
        {scene: '屋顶违章建筑', name: '人体感应传感器', address: '浦三路12弄10号楼顶平台', setting: '3米范围内通过红外线变化量来判断是否有人'},
        {scene: '屋顶违章建筑', name: '人体感应传感器', address: '浦三路12弄7号楼顶平台', setting: '3米范围内通过红外线变化量来判断是否有人'},
        {scene: '屋顶违章建筑', name: '人体感应传感器', address: '浦三路12弄11号楼顶平台', setting: '3米范围内通过红外线变化量来判断是否有人'},
        {scene: '屋顶违章建筑', name: '人体感应传感器', address: '浦三路12弄9号楼顶平台', setting: '3米范围内通过红外线变化量来判断是否有人'},
        {scene: '窨井异常', name: '井盖异动检测器', address: '浦三路12弄29号楼东北侧雨水井', setting: '阈值：0度'},
        {scene: '窨井异常', name: '井盖异动检测器', address: '浦三路12弄33号楼东北侧雨水井', setting: '阈值：0度'},
        {scene: '窨井异常', name: '井盖异动检测器', address: '浦三路12弄27号楼东北侧雨水井', setting: '阈值：0度'},
        {scene: '窨井异常', name: '井盖异动检测器', address: '南码头路451弄7号楼东南侧雨水井', setting: '阈值：0度'},
        {scene: '占用消防通道', name: '超声波车检器', address: '浦三路12弄小区东北消防通道', setting: '阈值:10分钟'},
        {scene: '占用消防通道', name: '超声波车检器', address: '浦三路十二弄9号楼对面东北侧', setting: '阈值:10分钟'},
        {scene: '占用消防通道', name: '超声波车检器', address: '南码头路四五一弄26号楼东侧', setting: '阈值:10分钟'},
        {scene: '占用消防通道', name: '超声波车检器', address: '浦三路十二弄25号楼对面西北侧', setting: '阈值:10分钟'},
        {scene: '占用消防通道', name: '超声波车检器', address: '浦三路十二弄43号楼旁边西南侧', setting: '阈值:10分钟'},
        {scene: '占用消防通道', name: '超声波车检器', address: '南码头路四五一弄23号门口', setting: '阈值:10分钟'},
        {scene: '占用消防通道', name: '超声波车检器', address: '南码头路四五一弄23号门口', setting: '阈值:10分钟'},
        {scene: '楼道充电（电动车入梯）', name: '电梯监控套装', address: '上海市浦东新区浦三路12弄6号楼A电梯', setting: '检测到电瓶车入梯即报警，具体阈值未告知'},
        {scene: '楼道充电（电动车入梯）', name: '电梯监控套装', address: '上海市浦东新区浦三路12弄6号楼B电梯', setting: '检测到电瓶车入梯即报警，具体阈值未告知'},
        {scene: '楼道充电（电动车入梯）', name: '电梯监控套装', address: '上海市浦东新区浦三路12弄4号楼B电梯', setting: '检测到电瓶车入梯即报警，具体阈值未告知'},
        {scene: '楼道充电（电动车入梯）', name: '电梯监控套装', address: '上海市浦东新区浦三路12弄4号楼A电梯', setting: '检测到电瓶车入梯即报警，具体阈值未告知'},
      ],
    }
  },
  beforeDestroy() {
    this.$store.commit('SET_CURSCENE', null)
    this.$store.commit('SET_CURREPAIR', null)
    this.$store.commit('SET_OPERATELIST', [])
    clearInterval(this.timer)
    this.timer = null
  },
  computed: {
    tooltipIcons() {
      if (this.curScene) {
        return [
          {label: '智能预警待处置', icon: 'discover-todo'},
          {label: '智能预警已处置', icon: 'discover-done'},
        ]
      }
      // if (this.curRepair) {
      //   return [
      //     {label: '报修', icon: 'repair-icon'},
      //   ]
      // }
      return [
        {label: '未报警传感器', icon: 'no-warn'},
        {label: '已报警传感器', icon: 'warn'},
      ]
    },
    curScene() {
      return this.$store.state.curScene
    },
    curRepair() {
      return this.$store.state.curRepair
    },
    handleList() {
      return this.$store.state.handleList
    },
  },
  methods: {
    mapComplete() {
      const {features} = require('../../static/nanmatou.json')
      this.$refs.map.drawStreet('nanmatou', features[0].geometry.rings[0])
      this.$refs.map.focus(4039.44281, -4712.403381, 6)
      this.addBuildingIcon()
      setTimeout(() => {
        this.complete = true
        this.initNanmatouData()
        this.startTimer()
      }, 3000)
    },
    startTimer() {
      this.addPoints()
      this.timer = setInterval(this.addPoints, 1000 * 60 * 3)
    },
    addBuildingIcon() {
      this.$refs.map.removePoint('building')
      this.$ajax.get({
        url: this.$api.GET_BUILDING,
      }).then(res => {
        const data = this.$com.confirm(res, 'data.content', [])
        this.$refs.map.addPoint({name: 'building', size: 13, labelKey: 'unitAddr', key: 'id', data: data, icon: 'icon-unit.png'})
      })
    },
    handleMapClick({layername, data}) {
      const {map} = this.$refs
      data = Array.isArray(data) ? data : [data]
      switch (layername) {
      case 'sensor':
        map.focus(data[0].x, data[0].y, 12)
        this.handleEventModal(data)
        break
      case 'discover':
        map.focus(data[0].gps_x, data[0].gps_y, 12)
        this.handleDiscoverEvent(data)
        break
      case 'repair':
        map.focus(data[0].x, data[0].y, 12)
        this.hanleRepairEvent(data)
        break
      default:
        break
      }
    },
    handleEventModal(data) {
      const warn = [], noWarn = []
      data.forEach(item => {
        if (item._status && item._status == '正常') {
          noWarn.push(item)
        } else {
          warn.push(item)
        }
      })
      this.eventData = [...warn, ...noWarn]
      this.showEventModal = true
    },
    handleDiscoverEvent(data) { // 点击智能发现落点触发
      this.discoverList = data
      this.discoverModal = true
    },
    handleRepairEvent(data) { // 点击投诉报修落点触发
      this.repairList = data
      this.repairListModal = true
    },
    handleFullView() {
      this.complete = !this.complete
      if (this.emergencyMode) {
        this.emergencyMode = !this.emergencyMode
      }
    },
    changeMode(name) {
      this.complete = false
      this.emergencyMode = true
    },
    handleStreetSelect(index, name) {
      if (name === '临沂二村') {
        this.$router.push({path: '/linyiercun'})
        return
      }
      if (name === '申江豪城') {
        this.$router.push({path: '/shenjianghaocheng'})
        return
      }
      this.curTitle = name.replace('街道', '')
      this.$refs.map.removePoint('nanmatou')
      const {features} = require('../../static/nanmatou.json')
      this.$refs.map.drawStreet('nanmatou', features[0].geometry.rings[0])
      this.$refs.map.focus(4039.44281, -4712.403381, 5.5)
      this.initNanmatouData()
    },
    handleViewImg(img) {
      this.curImg = img
      this.showImgModal = true
    },
    showVideo(name) {
      this.curVideo = name
      this.videoModal = true
    },
    handleSwitchIcon() {
      this.openIcon = !this.openIcon
      if (this.curScene == 'all') {
        this.$store.commit('SET_CURSCENE', null)
      }
      this.addSensorPoints()
    },
    addSensorPoints() {
      if (this.openIcon && !this.curScene) {
        this.setSensorList()
      }
    },
    addPoints() {
      this.addSensorPoints()
      this.setDiscoverInfo()
      this.setHandleList()
      const result = [     // 报修投诉
        {
          title:'报修数量',
          img:'repair.png',
          num: 0,
          allNum: 129,
          key: 'bx',
        },
        {
          title:'投诉数量',
          img:'complaint.png',
          num: 0,
          allNum: 33,
          key: 'ts',
        },
      ]
      this.$store.commit('SET_REPAIRLIST', result)
    },
    handleDiscoverSummary(key) {
      if (key === 'today') {
        this.discoverList = this.$store.state.handleList
        this.discoverModal = true
      } else {
        const today = this.$moment()
        const lastDay = this.$moment('2020-06-25')
        this.$ajax.get({
          url: this.$api.GET_HANDLE_LIST,
          params: {
            days: today.diff(lastDay, 'days')
          },
        }).then(res => {
          this.discoverList = this.$com.confirm(res, 'data.content', [])
          this.discoverModal = true
        })
      }
    },
    clearPoints() {
      const {map} = this.$refs
      map.removePoint('sensor')
      map.removePoint('discover')
    },
    ...mapActions([
      'initNanmatouData',
      'setDiscoverInfo',
      'setHandleList',
      'setSensorList',
    ])
  },
  watch: {
    '$store.state.curRepair': {
      handler(cur) {
        const {map} = this.$refs
        if (!cur) {
          map.focus(3706.690186, -4234.159912, 8.5)
          return
        }
        this.$store.commit('SET_CURSCENE', null)
        this.$ajax.get({ // 获取投诉报修列表
          url: this.$api.GET_TSBX_LIST.replace('{type}', cur),
        }).then(res => {
          const repairList = this.$com.confirm(res, 'data.content', [])
          this.$store.commit('SET_REPAIRHANDLE', repairList)
          this.handleRepairEvent(repairList)
        })
      },
    },
    '$store.state.curScene': {
      handler(cur) {
        const {map} = this.$refs
        this.clearPoints()
        if (!cur) {
          this.$refs.map.focus(4039.44281, -4712.403381, 6)
          this.addSensorPoints()
          return
        }
        this.$store.commit('SET_CURREPAIR', null)
        let handleList = []
        if (cur == 'all') {
          handleList = this.handleList.filter(item => item.gps_x && item.gps_y)
        } else {
          handleList = this.handleList.filter(item => item.types && (item.types == cur) && item.gps_x && item.gps_y)
        }
        if (handleList.length <= 0) return
        const doneList = [], todoList = []
        JSON.parse(JSON.stringify(handleList)).forEach(item => {
          if(item.done_time) {
            item.icon = 'icon9.png'
            doneList.push(item)
          } else {
            item.icon = 'icon8.png'
            todoList.push(item)
          }
        })
        setTimeout(() => {
          map.addPoint({name: 'discover', key: 'id', size: 25, data: [...doneList, ...todoList], icon: 'icon9.png'})
          map.focus(3706.690186, -4234.159912, 8.5)
        }, 1000)
      }
    },
    '$store.state.sensorList': {
      handler(cur) {
        this.clearPoints()
        this.$refs.map.addPoint({name: 'sensor', key: 'id', size: 25, data: cur, icon: 'icon6.png'})
      }
    },
    emergencyMode(cur) {
      const {map} = this.$refs
      map.focus(4039.44281, -4712.403381, 6)
      map.removeGifPoint('selected-point')
      map.removePoint('em')
      map.removeGifPoint('community')
      if (cur) {
        const mock = [
          {COMMUNITYNAME: '（补）教师大楼', TASKID:'（补）教师大楼', COMMUNITYID: '（补）教师大楼', icon: 'icon2.png', X: 4039.44281, Y: -4712.403381},
          {COMMUNITYNAME: '（补）临沂二村', TASKID:'（补）临沂二村', COMMUNITYID: '（补）临沂二村', icon: 'icon2.png', X: 3706.690186, Y: -4234.159912},
          {COMMUNITYNAME: '（补）金田公寓', TASKID:'（补）金田公寓', COMMUNITYID: '（补）金田公寓', icon: 'icon1.png', X: 3391.523438, Y: -3836.112488},
          {COMMUNITYNAME: '（补）临沂五村', TASKID:'（补）临沂五村', COMMUNITYID: '（补）临沂五村', icon: 'icon3.png', X: 3779.35022, Y: -4665.97998},
          {COMMUNITYNAME: '（补）华南名苑', TASKID:'（补）华南名苑', COMMUNITYID: '（补）华南名苑', icon: 'icon2.png', X: 3094.474182, Y: -4879.984985},
          {COMMUNITYNAME: '（补）明丰佳园', TASKID:'（补）明丰佳园', COMMUNITYID: '（补）明丰佳园', icon: 'icon2.png', X: 4574.670227, Y: -4217.309998},
        ]
        this.$refs.map.addGifPoint({name: 'community', key: 'COMMUNITYID', data: mock, color: 'red'})
        const data = [{COMMUNITYNAME: '应急维修服务站', TASKID:'应急维修服务站', COMMUNITYID: '应急维修服务站', X: 4476.35021972656, Y: -4935.41998291016}]
        map.addPoint({name: 'em', key: 'COMMUNITYID', labelKey: 'COMMUNITYNAME', data: data, icon: 'user4.png'})
      }
    }
  },
}
</script>

<style lang="stylus" scoped>
.mode-btn
  display block
  position fixed
  top 4rem
  left 0
  right 0
  width 3rem
  margin 0 auto
  cursor pointer
.em
  width 20% !important
  position fixed
  overflow hidden
  &.em1
    top 3.5rem
    height 17vh
    left 0.5rem
  &.em2
    top calc(3.5rem + 17vh + 0.5rem)
    height 76vh
    left 0.5rem
  &.em3
    top 3.5rem
    height 50vh
    right 0.5rem
    p
      line-height 2
  &.em4
    top calc(3.5rem + 50vh + 0.5rem)
    height 20vh
    right 0.5rem
  &.em5
    top calc(3.5rem + 70vh + 1rem)
    height 23vh
    right 0.5rem
.em-person
  display flex
  flex-wrap wrap
  font-size 0.9rem
  >div
    width 50%
    margin-bottom 1rem
    img
      width 1rem
      height @width
.icon-wrapper
  position fixed
  bottom 22%
  left 28%
  p
    display flex
    align-items center
    margin-bottom 1rem
  img
    width 1.2rem
    margin-right 0.5rem
</style>
