<template>
  <m-grid
    :template="[
      'title title title',
      'box1 . box5',
      'box2 . box5',
      'box2 . box3',
      'box8 . box4',
      'box8 . box10',
      'box9 box7 box6',
    ]"
    columns="1fr 2fr 1fr"
    rows="3rem 1fr 1fr 1fr 1fr 1.4fr 1.8fr"
    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-bg3.png')" size="2.4rem">物业微平台({{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 @select="handleSelect" />
    </m-card>
    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box8" title="管理要素" mode="4" btn="list">
      <ManageIssue />
    </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  @clickCommunity="clickCommunity"/>
    </m-card>
    <m-card v-show="complete" area="box9" enter="fadeInLeft" leave="fadeOutLeft" title="视频监控" mode="4">
      <div style="display:flex;height:100%;padding:0.8rem 0.5rem;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="box10" title="辅助应用" mode="4">
      <Application @elevator="showEleMap = true"/>
    </m-card>
    <m-card v-show="complete" area="box6" title="治理分析" mode="4">
      <GovernAnalysis v-if="complete"/>
      <!-- <div class="analysis-wrapper">
        <Carousel v-if="complete" autoplay v-model="curTab" @on-click="handleViewImg(images[$event])" loop :autoplay-speed="5000">
          <CarouselItem v-for="img in images" :key="img">
            <img style="width:100%;height:100%;display:block;" :src="require(`@/assets/images/${img}`)" />
          </CarouselItem>
        </Carousel>
      </div> -->
    </m-card>
    <m-card v-show="complete" enter="fadeInUp" leave="fadeOutDown" area="box7" title="联勤联动动态流程" mode="4" :width="25">
      <Handle v-if="complete"/>
    </m-card>
    <MapMenu :full="complete" @full="handleFullView" @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>
    <m-modal :value="$store.state.showElementModal" @close="$store.commit('SET_ELEMENTMODAL', false)" width="70%" title="管理要素明细">
      <m-table :layout="tableLayout" :model="tableData"/>
    </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="showImgModal" title="图片">
      <img v-if="showImgModal" style="width: 100%;" :src="require(`@/assets/images/${curImg}`)" />
    </m-modal>
    <iframe v-if="complete" style="display:none;" src="http://211.136.105.193/elev/#/?name=南码头" frameborder="0"/>
  </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 {mapActions} from 'vuex'
export default {
  name: 'Main',
  components: {
    EmergencyCommand,
    Operation,
    Repair,
    Discovery,
    Supervision,
    Handle,
    StreetMenu,
    BottomTabs,
    ManageIssue,
    MapMenu,
    Emergency1,
    ImgContainer,
    Application,
    GovernAnalysis,
  },
  data() {
    return {
      curTitle: '南码头',
      emergencyMode: false,
      showModeMenu: false,
      complete: false,
      showEleMap: false,
      curTab: 0,
      curImg: '',
      showImgModal: false,
      images: ['c1.png', 'c2.png', 'c3.png', 'c4.png', 'c5.png', 'c6.png'],
      tableLayout: [
        {
          title: '类别',
          key: 'type',
          width: 2,
        },
        {
          title: '名称',
          key: 'name',
          width: 4,
        },
        {
          title: '要素描述',
          key: 'des',
          width: 6,
        },
        {
          title: '自治处置(一级响应)',
          key: 'level1',
          width: 3,
          tooltip: `启动条件：发现直接启动。
处置时限：48小时。`
        },
        {
          title: '联合处置(二级响应)',
          key: 'level2',
          width: 3,
          tooltip: `启动条件：一级响应时限内未能处置完毕的,由一级响应部门通过微平台推送启动。
处置时限：7天。`
        },
        {
          title: '协同处置(三级响应)',
          key: 'level3',
          width: 3,
          tooltip: `启动条件：二级响应时限内未能处置完毕的，由二级响应部门通过城运平台推送启动。
处置时限：30天。`
        },
        {
          title: '智能化发现方式',
          key: 'discover',
          width: 3,
        },
      ],
      tableData: [],
      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'},
      ],
    }
  },
  methods: {
    mapComplete() {
      const {data} = require('../../static/mock.json')
      this.tableData = data
      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)
      setTimeout(() => {
        this.complete = true
        this.initNanmatouData()
        this.getCheckCommunityList({isPublish: 1, someday: '20200316'})
        this.getCheckCommunityList()
        this.getCheckedPeopleList()
      }, 3000)
    },
    handleMapClick({layername, data}) {
      const {X, Y} = data[0]
      const {map} = this.$refs
      switch (layername) {
      case 'community': // 当点击图层为小区时
        map.removeGifPoint('selected-point') // 先移除已点击的点
        map.focus(X, Y, 8)
        map.addGifPoint({name: 'selected-point', key: 'COMMUNITYID', labelKey: 'COMMUNITYNAME', data: data[0], icon: data[0].icon || 'blue.png'})
        break
      case 'em': // 当点击图层为小区时
        map.removeGifPoint('selected-point') // 先移除已点击的点
        map.focus(X, Y, 8)
        map.addGifPoint({name: 'selected-point', key: 'COMMUNITYID', labelKey: 'COMMUNITYNAME', data: data[0], icon: data[0].icon || 'user4.png'})
        break
      default:
        break
      }
    },
    handleFullView() {
      this.complete = !this.complete
      if (this.emergencyMode) {
        this.emergencyMode = !this.emergencyMode
      }
    },
    changeMode(name) {
      this.complete = false
      this.emergencyMode = true
    },
    handleSelect(data) {
      console.log(data)
    },
    clickCommunity(data){
      console.log(data)
    },
    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')
      if (index == 0) {
        this.$refs.map.focus(9000, -2000, 2)
        this.initData()
      } else {
        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
    },
    ...mapActions([
      'initData',
      'initNanmatouData',
      'getCheckCommunityList',
      'getCheckedPeopleList'
    ])
  },
  watch: {
    '$store.state.supervisionCommunityList': {
      handler(cur) {
        this.$refs.map.removePoint('community')
        this.$refs.map.addPoint({name: 'community', key: 'COMMUNITYID', data: cur, icon: 'blue.png'})
      }
    },
    emergencyMode(cur) {
      const {map} = this.$refs
      map.removeGifPoint('selected-point')
      if (cur) {
        map.removePoint('nanmatou')
        const {features} = require('../../static/nanmatou.json')
        map.drawStreet('nanmatou', features[0].geometry.rings[0], 'orange')
        map.removePoint('community')
        this.$refs.map.addGifPoint({name: 'community', key: 'COMMUNITYID', data: this.$store.state.supervisionCommunityList, 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'})
        map.focus(4039.44281, -4712.403381, 6)
      } else {
        map.removePoint('nanmatou')
        map.removePoint('em')
        const {features} = require('../../static/nanmatou.json')
        map.drawStreet('nanmatou', features[0].geometry.rings[0])
        map.removeGifPoint('community')
        map.addPoint({name: 'community', key: 'COMMUNITYID', data: this.$store.state.supervisionCommunityList, icon: 'blue.png'})
        map.focus(4039.44281, -4712.403381, 5.5)
      }
    }
  },
}
</script>

<style lang="stylus">
.analysis-wrapper
  width 100%
  height 100%
  overflow hidden
  .ivu-carousel
    height 100%
    overflow hidden
      img
        height 100%
        width 100%
</style>
<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
.analysis-wrapper
  width 100%
  height 100%
  overflow hidden
  img
    width 100%
    height 80%
</style>
