<template>
<div style="width:100%;height:100vh;">
  <div class="border left"/>
  <div class="border right"/>
  <m-animate enter="zoomInRight" leave="zoomOutRight">
    <div v-show="!hide3d" id="linyiMap"/>
  </m-animate>
  <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 1fr 2fr 1fr 1.5fr 1.5fr 2.3fr"
    gap="0.5rem"
    style="padding: 0.5rem;"
    :complete="complete"
  >
    <m-animate enter="zoomInLeft" leave="zoomOutLeft">
      <m-map v-show="hide3d" ref="map" @event="handleMapClick" @complete="mapComplete" />
    </m-animate>
    <m-animate enter="fadeInDown" leave="fadeOutUp">
      <m-title area="title" color="#fff" :bgImg="require('@/assets/images/title-bg4.png')">浦东新区物业微平台(临沂二村居委)</m-title>
    </m-animate>
    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box1" title="指挥体系" mode="4" btn="map-icon">
      <EmergencyCommand @more="showCommand = true"/>
    </m-card>
    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box2" title="基础数据" mode="4">
      <BasicData />
    </m-card>
    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box8" title="管理要素" mode="4" btn="模型">
      <!-- <ManageIssue v-if="complete" showList/> -->
      <ManageIssue @select="(data) => {issueInfo = data; showIssueInfo = true;}"/>
    </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" 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="box3" title="投诉报修" mode="4">
      <Repair/>
    </m-card>
    <m-card v-show="complete" area="box6" enter="fadeInLeft" leave="fadeOutLeft" title="工作提示" mode="4" :width="50">
      <div v-if="complete" class="analysis-wrapper">
        <div v-for="item in remindList" :key="item.title" @click="handleViewRemind(item.key)">
          <p>{{item.title}}</p>
          <template v-if="item.detail.length > 0">
          <vue-seamless-scroll class="seamless-wrap" isSingleRemUnit :data="item.detail" :class-option="options">
            <ul class="item" :style="`width:${item.detail.length * 14}rem`">
              <li v-for="(e, i) in item.detail" :key="i">{{e.title}}</li>
            </ul>
          </vue-seamless-scroll>
          </template>
          <div class="no-more" v-else>- 暂无更多数据 -</div>
        </div>
        <!-- <div v-for="item in remindList" :key="item.title" @click="handleViewRemind(item.key)">
          <p><img src="@/assets/images/home.png"/>{{item.title}}</p>
          <p><b>{{item.total}}</b> 件</p>
          <template v-if="item.detail.length > 0">
          <vue-seamless-scroll class="seamless-wrap" isSingleRemUnit :data="item.detail" :class-option="options">
            <ul class="item" :style="`width:${item.detail.length * 14}rem`">
              <li v-for="(e, i) in item.detail" :key="i">{{e.title}} <b>{{e.num}}</b> 件</li>
            </ul>
          </vue-seamless-scroll>
          </template>
          <p class="seamless-wrap" v-else>暂无智能提示</p>
        </div> -->
      </div>
    </m-card>
    <m-card v-show="complete" enter="fadeInUp" leave="fadeOutDown" area="box7" title="联勤联动动态流程" :width="25" mode="4">
      <Handle
        v-if="complete"
        @select="(data) => {this.handleDetail = data;this.showHandleDetail = true;}"
        @repair-select="(data) => {this.repairDetail = data; this.showRepairDetail = true;}"
      />
    </m-card>
    <MapMenu :full="complete" @3d="hide3d = !hide3d" @switch="handleSwitchIcon" @full="complete = !complete" @in="$refs.map.zoomIn()" @out="$refs.map.zoomOut()"/>
    <StreetMenu @select="handleStreetSelect"/>
    <m-modal :value="$store.state.showElementModal" @close="$store.commit('SET_ELEMENTMODAL', false)" width="85%" title="小区综合治理管理要素">
      <IssueDetail />
    </m-modal>
    <m-modal v-model="remindModal" width="70%" title="智能提示列表">
      <m-table :layout="remindLayout" :model="remindData"/>
    </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="showEventModal" title="传感器列表" width="70%">
      <!-- <m-form v-for="data in eventData" :key="data.id" :title="data.addr" :label-width="6" :model="data" :layout="eventLayout"/> -->
      <SensorList :data="eventData" />
    </m-modal>
    <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 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="$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="showRepairDetail" title="投诉报修详情" width="70%">
      <m-form title="投诉报修信息" :label-width="6" :model="repairDetail" :layout="repairLayout"/>
    </m-modal>
    <m-modal v-model="showCommand" title="指挥体系">
      <m-table :layout="commandLayout" :model="commandList"/>
    </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>
</div>
</template>

<script>
import EmergencyCommand from '@/views/components/emergencyCommand.vue'
import BasicData from '@/views/components/basic-data.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 MapMenu from './components/map-menu'
import VueSeamlessScroll from 'vue-seamless-scroll'
import ManageIssue from './components/manage-issue'
import Application from './components/application'
import ImgContainer from './components/img-container'
import IssueDetail from './components/issue-detail'
import VideoWrapper from './components/video-wrapper'
import SensorList from './components/sensor-list'
const {AMap} = window

import {mapActions} from 'vuex'
export default {
  name: 'Linyi',
  components: {
    EmergencyCommand,
    BasicData,
    Repair,
    Discovery,
    Supervision,
    Handle,
    StreetMenu,
    BottomTabs,
    MapMenu,
    VueSeamlessScroll,
    ManageIssue,
    Application,
    ImgContainer,
    IssueDetail,
    VideoWrapper,
    SensorList,
  },
  data() {
    return {
      hide3d: true,
      map: null,
      mapConfig: {
        resizeEnable: true,
        rotateEnable: true,
        pitchEnable: true,
        showLabel: true,
        zoom: 18,
        pitch: 45,
        rotation: 45,
        viewMode: '3D', // 开启3D视图,默认为关闭
        buildingAnimation:true, // 楼块出现是否带动画
        expandZoomRange:true,
        zooms: [10,20],
        center: [121.511785, 31.194485],
        showIndoorMap: false,
        mapStyle:'amap://styles/grey',
        features: ['bg', 'road', 'building'],
      },
      timer: null,
      curTitle: '',
      complete: false,
      showEleMap: false,
      openIcon: false,
      remindList: [
        {key: 'linyi', title: '临沂二村', total: 17, detail: [
          {title: '屋顶漏水', num: 6},
          {title: '保洁服务', num: 2},
          {title: '违法搭建', num: 2},
          {title: '群租管理', num: 7},
        ]},
        {key: 'liuhao', title: '浦三路12弄6号大楼', total: 2, detail: [{title: '车辆停放管理', num: 2}]},
        {key: 'haipu', title: '海浦小区', total: 3, detail: [{title: '占用公共部位', num: 3}]},
        {key: 'mingcheng', title: '铭城园', total: 2, detail: [{title: '垃圾分类', num: 2}]},
        {key: 'sihao', title: '浦三路12弄4号大楼', total: 0, detail: []},
      ],
      options: {direction: 2, limitMoveNum: 2},
      remindModal: false,
      remindLayout: [
        {
          title: '提示分类',
          key: 'type',
          width: 4,
        },
        {
          title: '预警来源',
          key: 'from',
          width: 3,
        },
        {
          title: '地址',
          key: 'address',
          width: 7,
        },
        {
          title: '预警详情',
          key: 'detail',
          width: 10,
        },
      ],
      remindData: [],
      showEventModal: false,
      eventData: [],
      curVideo: null,
      mapSrc: null,
      videoModal: false,
      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,
        },
      ],
      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: [],
      showRepairDetail: false,
      repairLayout: [
        {
          street: {
            label: '街镇',
            width: 8,
            format: (val) => '南码头街道',
          },
          communityName: {
            label: '小区',
            width: 8,
            format: (val) => '临沂二村',
          },
          address: {
            label: '地址',
            width: 8,
          },
        },
        {
          troubleType: {
            label: '类型',
            width: 8,
          },
          reportContent: {
            label: '反映问题',
            width: 8,
          },
          status: {
            label: '状态',
            width: 8,
          },
        },
        {
          acceptTime: {
            label: '受理时间',
            width: 8,
          },
          feedBackDate: {
            label: '反馈时间',
            width: 8,
          },
        }
      ],
      repairDetail: [],
      showCommand: false,
      commandLayout: [
        {
          title: '序号',
          key: 'index',
          width: 3,
        },
        {
          title: '单位',
          key: 'unit',
          width: 7,
        },
        {
          title: '姓名',
          key: 'name',
          width: 7,
        },
        {
          title: '电话',
          key: 'phone',
          width: 7,
        },
      ],
      commandList: [
        {index:1, unit: '居委会', name: '倪萍', phone: '15921782009'},
        {index:2, unit: '居委会', name: '徐琼', phone: '13818191609'},
        {index:3, unit: '居委会', name: '郑振杰', phone: '13774255345'},
        {index:4, unit: '居委会', name: '范琰', phone: '13816353573'},
        {index:5, unit: '居委会', name: '小二', phone: '18017388279'},
        {index:6, unit: '物业公司', name: '李铭', phone: '13301851930'},
        {index:7, unit: '物业公司', name: '潘忠民', phone: '13818527634'},
        {index:8, unit: '物业公司', name: '刘西金', phone: '13817673939'},
        {index:9, unit: '物业公司', name: '高海娅', phone: '13901781375'},
        {index:10, unit: '物业公司', name: '陈国祥', phone: '18939801110'},
        {index:11, unit: '物业公司', name: '肖舜衎', phone: '18521038752'},
        {index:12, unit: '公安', name: '冯建', phone: '18101772776'},
        {index:13, unit: '城管', name: '孙利明', phone: '18918152178'},
        {index:14, unit: '城管', name: '刘颖杰', phone: '18918152171'},
      ],
      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: {
    sizeRate() {
      return Number((screen.height / 800).toFixed(1))
    },
    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
    },
  },
  mounted() {
    const path1 = [
      ['121.510899', '31.196536'],
      ['121.510817', '31.19635'],
      ['121.510783', '31.196269'],
      ['121.510764', '31.196208'],
      ['121.510758', '31.196133'],
      ['121.510817', '31.196033'],
      ['121.511474', '31.196323'],
      ['121.51187', '31.195654'],
      ['121.511222', '31.195362'],
      ['121.511755', '31.194543'],
      ['121.511158', '31.194246'],
      ['121.510662', '31.195048'],
      ['121.509983', '31.194731'],
      ['121.509945', '31.194815'],
      ['121.509653', '31.195489'],
      ['121.509447', '31.19599'],
      ['121.509439', '31.196088'],
      ['121.509482', '31.196188'],
      ['121.509824', '31.196632'],
      ['121.51008', '31.196474'],
      ['121.510275', '31.196489'],
      ['121.510407', '31.196535'],
      ['121.511175', '31.197527'],
      ['121.511229', '31.197524'],
      ['121.511518', '31.197214'],
      ['121.511295', '31.197034'],
      ['121.511176', '31.196933'],
      ['121.511056', '31.196831'],
      ['121.510899', '31.196536'],

      // ['121.511421', '31.19647'],
      // ['121.511402', '31.196417'],
      // // ['121.510899', '31.196536'],
      // // ['121.510817', '31.19635'],
      // // ['121.510783', '31.196269'],
      // // ['121.510764', '31.196208'],
      // // ['121.510758', '31.196133'],
      // // ['121.510817', '31.196033'],
      // // ['121.5114', '31.1963'],
      // ['121.511478', '31.196329'],
      // // ['121.51184', '31.195641'],
      // ['121.5119', '31.195663'],
      // ['121.511222', '31.195362'],
      // ['121.511755', '31.194543'],
      // ['121.511158', '31.194246'],
      // ['121.510662', '31.195048'],
      // ['121.509983', '31.194731'],
      // ['121.509945', '31.194815'],
      // ['121.509653', '31.195489'],
      // // ['121.509447', '31.19599'],
      // ['121.509434', '31.195984'],
      // ['121.509439', '31.196088'],
      // ['121.509482', '31.196188'],
      // ['121.509824', '31.196632'],
      // ['121.510693', '31.197708'],
      // ['121.510787', '31.197758'],
      // // ['121.51008', '31.196474'],
      // // ['121.510275', '31.196489'],
      // // ['121.510407', '31.196535'],
      // // ['121.511175', '31.197527'],
      // ['121.511229', '31.197524'],
      // ['121.511518', '31.197214'],
      // // ['121.511295', '31.197034'],
      // // ['121.511176', '31.196933'],
      // // ['121.511056', '31.196831'],
      // ['121.511825', '31.196686'],
      // // ['121.510899', '31.196536'],
      // ['121.511421', '31.19647'],
    ]
    const path2 = [
      [121.51153, 31.197203],
      [121.511078, 31.196824],
      [121.510959, 31.1966],
      [121.510838, 31.196382],
      [121.510779, 31.19621],
      [121.510774, 31.196131],
      [121.51082, 31.196044],
      [121.511474, 31.196324],
      [121.511419, 31.19645],
      [121.511861, 31.196686],
    ]
    const path3 = [
      [121.510634, 31.196829],
      [121.510404, 31.196538],
      [121.510281, 31.196492],
      [121.510083, 31.196479],
      [121.509764, 31.196676],
      [121.509958, 31.196905],
      [121.510063, 31.196877],
      [121.510448, 31.196821],
    ]
    const path4 = [
      [121.510856, 31.197143],
      [121.510739, 31.197241],
      [121.510545, 31.197226],
      [121.510379, 31.197295],
      [121.510075, 31.196903],
      [121.510452, 31.196843],
      [121.510613, 31.196845],
    ]
    const path5 = [
      [121.511159, 31.197533],
      [121.510872, 31.197172],
      [121.510757, 31.197253],
      [121.510721, 31.197289],
      [121.510695, 31.197394],
      [121.510606, 31.197527],
      [121.510668, 31.197579],
      [121.510966, 31.197636],
    ]
    const paths = [path1, path2, path3, path4, path5]
    this.map = new AMap.Map('linyiMap', this.mapConfig)
    // this.map.addControl(new AMap.ControlBar({
    //   showZoomBar: false,
    //   showControlButton: true,
    //   position: {
    //     right: '10px',
    //     top: '10px',
    //   }
    // }))
    this.map.on('click', ({lnglat}) => {
      console.log('click', [lnglat.lng, lnglat.lat])
    })
    const buildingOptions = {
      hideWithoutStyle: true,
      areas: paths.map(path => {
        return {
          rejectTexture: true, // 是否屏蔽自定义地图的纹理
          color1: 'ffffffff', // 楼顶颜色
          color2: 'cccccccc', // 楼面颜色
          path: path,
        }
      })
    }
    const buildingLayer = new AMap.Buildings({zIndex: 130, opacity: 0.8, merge: false, sort: false, zooms: [10,20]})
    buildingLayer.setStyle(buildingOptions)
    this.map.setLayers([
      new AMap.TileLayer(), // 高德默认的地图图层
      buildingLayer, // 咱们自定义的建筑物上色图层
    ])

    const polygon = paths.map(path => {
      return new AMap.Polygon({
        zIndex: 1,
        strokeWeight: 3,
        path: path,
        fillOpacity: 0.3,
        // fillColor: '#87ceeb',
        fillColor: '#e6d74e',
        strokeColor: '#e6d74e',
      })
    })
    this.map.add(polygon)
    const marker = new AMap.Marker({
      position: [121.509859, 31.196088],
      zIndex: 99,
      icon: new AMap.Icon({
        size: [16 * this.sizeRate, 20 * this.sizeRate],
        image: require('@/assets/images/no-warn.png'),
      }),
    })
    this.map.add(marker)

    // this.mapComplete()
  },
  methods: {
    mapComplete() {
      const list = ['linyi', 'haipu', 'huaxia', 'mingchengyuan', 'sihao']
      list.forEach(name => {
        const {features} = require(`../../static/${name}.json`)
        this.$refs.map.drawStreet(name, features[0].geometry.rings[0])
      })
      this.$refs.map.focus(3706.690186, -4234.159912, 8.5)
      this.addBuildingIcon()
      setTimeout(() => {
        this.complete = true
        this.initLinyiData()
        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.handleRepairEvent(data)
        break
      default:
        break
      }
    },
    handleViewRemind(key) { // 展示工作提示列表
      const data = require('../../static/remind-data2.json')
      this.remindData = data[key]
      this.remindModal = true
    },
    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
    },
    handleSwitchIcon() { // 开关传感器落点
      this.openIcon = !this.openIcon
      if (this.curScene == 'all') {
        this.$store.commit('SET_CURSCENE', null)
      }
      this.addSensorPoints()
    },
    showVideo(name) {
      this.curVideo = name
      this.videoModal = true
    },
    addSensorPoints() {
      this.clearPoints()
      if (this.openIcon && !this.curScene) {
        this.setSensorList()
      }
    },
    addPoints() {
      this.addSensorPoints()
      this.setDiscoverInfo()
      this.setHandleList()
      this.setTsBx()
    },
    handleStreetSelect(index, name) {
      if (name === '临沂二村') return
      if (name === '申江豪城') {
        this.$router.push({path: '/shenjianghaocheng'})
        return
      }
      this.$router.push({path: '/'})
    },
    // showRepairList(key) {
    //   this.$store.commit('SET_CURSCENE', null)
    //   this.$ajax.get({ // 获取投诉报修列表
    //     url: this.$api.GET_TSBX_LIST.replace('{type}', key),
    //   }).then(res => {
    //     this.repairList = this.$com.confirm(res, 'data.content', [])
    //     this.repairListModal = true
    //   })
    // },
    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([
      'initLinyiData',
      'setDiscoverInfo',
      'setHandleList',
      'setSensorList',
      'setTsBx',
    ])
  },
  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) {
          map.focus(3706.690186, -4234.159912, 8.5)
          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 = 'discover-done.png'
            doneList.push(item)
          } else {
            item.icon = 'discover-todo.png'
            todoList.push(item)
          }
        })
        setTimeout(() => {
          map.addPoint({name: 'discover', key: 'id', size: 25, data: [...doneList, ...todoList], icon: 'discover-done.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'})
      }
    },
  }
}
</script>
<style lang="stylus" scoped>
.border
  position fixed
  width 30%
  height 100vh
  top 0
  z-index 10
  &.left
    left 0
    background linear-gradient(to left, transparent, #000)
  &.right
    right 0
    background linear-gradient(to right, transparent, #000)

#linyiMap
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  width 100%
  height 100vh
  z-index 9
  // &:after {
  //   position absolute
  //   content ''
  //   width 100%
  //   height 100%
  //   top 0
  //   left 0
  //   box-shadow 0 0 50rem 10rem rgba(0,0,0,.8) inset
  //   z-index 8
  // }
.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
.analysis-wrapper
  height 100%
  width 100%
  >div
    display flex
    align-items center
    justify-content space-between
    padding 0 .5rem
    cursor pointer
    &:nth-child(2n+1)
      // background rgba(6,27,50,0.9)
      background $color-map(.1)
    &:hover
      color $color-blue
    p
      overflow hidden
      width 14rem
      font-weight bold
    .no-more
      width 9rem
    .seamless-wrap
      width 11rem
      overflow hidden
      height 2rem
      line-height 2rem
      text-align center
      .item
        list-style none
        li
          width 9.5rem
          float left
          text-align right
          b
            color $edgeColor
            font-size 1.2rem
</style>

<style lang="stylus">
.amap-logo
.amap-copyright
  display none !important
.amap-icon
  img
    width 100%
    height 100%
.menu
  .ivu-collapse-content
    max-height 80vh
    overflow-y auto
    overflow-x hidden
    padding 0 1rem
    .ivu-collapse-content-box
      padding 1rem 0
      button
        text-align left
        font-size 1rem
.tab-menu
  .ivu-tabs-bar
    margin-bottom 0
  .ivu-tabs-nav
    .ivu-tabs-tab
      &:last-child
        margin-right 0
</style>
