<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 1fr 2fr 1fr 1.5fr 1.5fr 2.3fr"
    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 area="title" color="#fff" :bgImg="require('@/assets/images/title-bg3.png')">浦东新区物业微平台(临沂二村居委)</m-title>
    </m-animate>
    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box1" title="指挥体系" mode="4" btn="map-icon">
      <EmergencyCommand />
    </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/>
    </m-card>
    <m-card v-show="complete" area="box10" title="辅助应用" mode="4">
      <Application @elevator="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 />
    </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"/>
    </m-card>
    <MapMenu :full="complete" @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 style="width:100%;min-height:80vh;background:#fff;" src="http://211.136.105.193/elev/#/?name=南码头" frameborder="0"/>
    </m-modal>
    <m-modal v-model="showEventModal" title="传感器列表" @close="$refs.map.removeGifPoint('selected-point')" width="70%">
      <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>
    <div class="icon-wrapper">
      <p><img src="@/assets/images/no-warn.png"/>未报警传感器</p>
      <p><img src="@/assets/images/warn.png"/>已报警传感器</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-grid>
</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 NewMap from './components/new-map'
import VideoWrapper from './components/video-wrapper'

import {mapActions} from 'vuex'
export default {
  name: 'Linyi',
  components: {
    EmergencyCommand,
    BasicData,
    Repair,
    Discovery,
    Supervision,
    Handle,
    StreetMenu,
    BottomTabs,
    MapMenu,
    VueSeamlessScroll,
    ManageIssue,
    Application,
    ImgContainer,
    IssueDetail,
    NewMap,
    VideoWrapper,
  },
  data() {
    return {
      timer: null,
      curTitle: '',
      complete: false,
      showEleMap: false,
      openIcon: true,
      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: [],
      eventLayout: [
        {
          sensorType: {
            label: '传感器类型',
            width: 7,
          },
          sensorNo: {
            label: '传感器编号',
            width: 6,
          },
          _scene: {
            label: '场景类型',
            width: 6,
          },
          _status: {
            label: '状态',
            width: 5,
          },
        }
      ],
      curVideo: null,
      videoModal: false,
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  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.initLinyiData()
      this.addBuildingIcon()
      setTimeout(() => {
        this.complete = true
        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
      switch (layername) {
      case 'sensor':
        map.focus(data[0].x, data[0].y, 12)
        this.handleEventModal(data)
        break
      case 'flashlayer':
        map.focus(data[0][1].x, data[0][1].y, 12)
        this.handleEventModal(data[0][1])
        break
      default:
        break
      }
    },
    handleViewRemind(key) {
      const data = require('../../static/remind-data2.json')
      this.remindData = data[key]
      this.remindModal = true
    },
    handleEventModal(data) {
      const warn = [], noWarn = []
      const arr = Array.isArray(data) ? data : [data]
      arr.forEach(item => {
        if (item._status && item._status == '正常') {
          noWarn.push(item)
        } else {
          warn.push(item)
        }
      })
      this.eventData = [...warn, ...noWarn]
      this.showEventModal = true
    },
    handleSwitchIcon() {
      this.openIcon = !this.openIcon
      this.addSensorPoints()
    },
    showVideo(name) {
      this.curVideo = name
      this.videoModal = true
    },
    addSensorPoints() {
      const {map} = this.$refs
      map.removePoint('sensor')
      map.removeGifPoint('sensor')
      if (this.openIcon) {
        this.setSensorList()
      }
    },
    addPoints() {
      this.addSensorPoints()
      this.setDiscoverInfo()
      this.setHandleList()
      this.$ajax.get({ // 获取投诉报修数据
        url: this.$api.GET_TS_BX,
      }).then(res => {
        const data = this.$com.confirm(res, 'data.content', {})
        const result = [     // 报修投诉
          {
            title:'报修数量',
            img:'repair.png',
            num: data.alarmIn5MinBX || 0,
            allNum: data.undoneBX || 0,
          },
          {
            title:'投诉数量',
            img:'complaint.png',
            num: data.alarmIn5MinTS || 0,
            allNum: data.undoneTS || 0,
          },
        ]
        this.$store.commit('SET_REPAIRLIST', result)
      })
    },
    handleStreetSelect(index, name) {
      if (name === '临沂二村') return
      if (name === '申江豪城') {
        this.$router.push({path: '/shenjianghaocheng'})
        return
      }
      this.$router.push({path: '/'})
    },
    ...mapActions([
      'initLinyiData',
      'setDiscoverInfo',
      'setHandleList',
      'setSensorList',
    ])
  },
  watch: {
    '$store.state.sensorList': {
      handler(cur) {
        this.$refs.map.addPoint({name: 'sensor', key: 'id', size: 25, data: cur, icon: 'no-warn.png'})
      }
    },
  }
}
</script>
<style lang="stylus" scoped>
.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)
    &: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>
