<template>
  <m-grid
    :template="[
      'title title title',
      'box1 . box5',
      'box2 . box5',
      'box2 . box5',
      'box8 . box3',
      'box8 . box10',
      'box6 box7 box9',
    ]"
    columns="1fr 2fr 1fr"
    rows="3rem 1fr 1fr 1fr 1.5fr 1.5fr 1.9fr"
    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="list">
      <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">
      <div style="display:flex;height:100%;padding:0.3rem;justify-content:space-between;">
        <ImgContainer style="width:48%;" text="小区入口岗亭" src="gate1.png"/>
        <ImgContainer style="width:48%;" text="小区入口岗亭" src="gate2.png"/>
      </div>
    </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><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" @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="事件详情">
      <m-form v-if="showEventModal" title="基本信息" :label-width="8" :model="eventData" :layout="eventLayout"/>
      <img v-if="showEventModal" style="width:100%;" :src="eventData.img ? require(`@/assets/images/${eventData.img}`) : null"/>
    </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 {mapActions} from 'vuex'
export default {
  name: 'Linyi',
  components: {
    EmergencyCommand,
    BasicData,
    Repair,
    Discovery,
    Supervision,
    Handle,
    StreetMenu,
    BottomTabs,
    MapMenu,
    VueSeamlessScroll,
    ManageIssue,
    Application,
    ImgContainer,
    IssueDetail,
  },
  data() {
    return {
      curTitle: '',
      complete: false,
      showEleMap: 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: {},
      eventLayout: [
        {
          type: {
            label: '预警类型',
            width: 12,
          },
          addr: {
            label: '地址',
            width: 12,
          }
        }
      ],
    }
  },
  methods: {
    mapComplete() {
      const {data} = require('../../static/mock.json')
      this.tableData = data
      const list = ['shenjianghaocheng']
      list.forEach(name => {
        const {features} = require(`../../static/${name}.json`)
        this.$refs.map.drawStreet(name, features[0].geometry.rings[0])
      })
      this.$refs.map.focus(2693.42919921875, -7671.93206787109, 8.5)
      // this.addPoints()
      setTimeout(() => {
        this.complete = true
        this.initShenjiangData()
      }, 3000)
    },
    handleMapClick({layername, data}) {
      switch (layername) {
      case 'sensor':
        const {x, y} = data[0]
        const {map} = this.$refs
        map.removeGifPoint('selected-point') // 先移除已点击的点
        map.focus(x, y, 9)
        map.addGifPoint({name: 'selected-point', key: 'id', data: data[0], icon: 'yellow.png'})
        this.handleEventModal(data[0])
        break
      default:
        break
      }
    },
    handleViewRemind(key) {
      const data = require('../../static/remind-data2.json')
      this.remindData = data[key]
      this.remindModal = true
    },
    handleEventModal({type, addr}) {
      this.eventData = {img: null, type, addr}
      this.showEventModal = true
    },
    addPoints() {
      // const data = [
      //   {TASKID:'（补）临沂二村', COMMUNITYID: '（补）临沂二村', msg: {img: '1.png', type: '屋顶违建', method: '物联传感'}, X: 3706.690186, Y: -4234.159912},
      //   {TASKID:'铭城园', COMMUNITYID: '铭城园', msg: {img: '2.png', type: '非定时倾倒垃圾', method: '物联传感'}, X: 3787.49700927734, Y: -4072.19757080078},
      //   {TASKID:'海浦小区', COMMUNITYID: '海浦小区', msg: {img: '4.png', type: '楼道充电', method: '视频识别'}, X: 3750.58459472656, Y: -3983.67626953125},
      //   {TASKID:'浦三路12弄', COMMUNITYID: '浦三路12弄', msg: {img: '4.png', type: '楼道充电', method: '视频识别'}, X: 3731.8646240234375, Y: -4073.232177734375},
      //   {TASKID:'4号大楼', COMMUNITYID: '4号大楼', msg: {img: '3.png', type: '集中充电异常', method: '视频识别'}, X: 3706.68023681641, Y: -4030.7874558594},
      // ]
      // this.$refs.map.addPoint({name: 'community', key: 'COMMUNITYID', data: data, icon: 'yellow.png'})
      this.$ajax.get({
        url: this.$api.GET_SENSOR,
      }).then(res => {
        const sensorList = this.$com.confirm(res, 'data.content', [])
        this.$refs.map.addPoint({name: 'sensor', key: 'id', data: sensorList, icon: 'yellow.png'})
      })
    },
    handleStreetSelect(index, name) {
      if (name === '申江豪城') return
      if (name === '临沂二村') {
        this.$router.push({path: '/linyiercun'})
        return
      }
      this.$router.push({path: '/'})
    },
    ...mapActions([
      'initShenjiangData',
    ])
  },
}
</script>
<style lang="stylus" scoped>
.analysis-wrapper
  height 100%
  width 100%
  >div
    display flex
    align-items center
    padding 0 0 0 0.3rem
    cursor pointer
    &:nth-child(2n+1)
      background rgba(6,27,50,0.9)
    &:hover
      color $color-blue
    p
      display flex
      align-items center
      overflow hidden
      width 14rem
      margin-right .5rem
      &:nth-child(2)
        width 3rem
        text-align right
        b
          color $edgeColor
          margin-right .2rem
      img
        width 1.2rem
        height @width
        margin-right .5rem
    .seamless-wrap
      overflow hidden
      height 2rem
      width 11rem
      margin 0
      .item
        list-style none
        li
          float left
          margin-right 1rem
          b
            color $edgeColor
            font-size 1.2rem
</style>
