<template>
  <m-grid
    :template="[
      'title title title',
      'box1 . box9',
      'box2 . box9',
      'box2 . box5',
      'box8 . box10',
      'box3 box7 box6',
      'box4 box7 box6',
    ]"
    columns="1fr 2fr 1.1fr"
    rows="3rem 1fr 0.2fr 1.8fr 1.4fr 1fr 1fr"
    gap="0"
    style="padding: 0"
    :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-bg.png')" size="2.4rem">{{curTitle}}智慧物业管理微平台</m-title>
    </m-animate>
    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box1" title="指挥体系" mode="4" :icon="require('@/assets/images/icon1.png')" btn="map-icon">
      <EmergencyCommand />
    </m-card>
    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box2" title="基础数据" mode="4" :icon="require('@/assets/images/icon2.png')">
      <Operation @select="handleSelect" />
    </m-card>
    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box3" title="投诉报修" mode="4" :icon="require('@/assets/images/icon3.png')">
      <Repair />
    </m-card>
    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box8" title="管理要素" mode="4" :icon="require('@/assets/images/icon3.png')" btn="zj">
      <Govern />
    </m-card>
    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box4" title="督查提醒" mode="4" :icon="require('@/assets/images/icon5.png')">
      <Supervision  @clickCommunity="clickCommunity"/>
    </m-card>
    <m-card v-show="complete" area="box9" title="视频" mode="4" :icon="require('@/assets/images/icon4.png')">
      <div style="display:flex;">
        <img style="display:inline-block;width:50%;height:100%;" src="@/assets/images/entry1.jpeg" />
        <img style="display:inline-block;width:50%;height:100%;" src="@/assets/images/gate1.jpeg" />
      </div>
    </m-card>
    <m-card v-show="complete" area="box5" title="智能发现" mode="4" :icon="require('@/assets/images/icon4.png')">
      <Discovery />
    </m-card>
    <m-card v-show="complete" area="box10" title="辅助应用" mode="4" :icon="require('@/assets/images/icon6.png')">
      <div class="ele-wrapper">
        <div @click="showEleMap = true">
          <p>电梯加装地图</p>
          <img src="@/assets/images/ele-map.png"/>
        </div>
        <div>
          <p>电子房态图</p>
          <img src="@/assets/images/house.jpeg"/>
        </div>
        <div>
          <p>更多</p>
          <div>+</div>
        </div>
      </div>
    </m-card>
    <m-card v-show="complete" area="box6" title="治理分析" mode="4" :icon="require('@/assets/images/icon6.png')">
      <div class="analysis-wrapper">
        <Carousel v-if="complete" autoplay v-model="curTab" loop :autoplay-speed="5000">
          <CarouselItem v-for="img in images" :key="img">
            <img @click="handleViewImg(img)" :src="require(`@/assets/images/${img}`)" />
          </CarouselItem>
        </Carousel>
      </div>
    </m-card>
    <m-card v-show="complete" enter="fadeInUp" leave="fadeOutDown" area="box7" title="联勤联动动态流程" mode="4" :icon="require('@/assets/images/icon6.png')">
      <Handle/>
    </m-card>
    <StreetMenu @select="handleStreetSelect"/>
    <!-- <BottomTabs @click="showModal = true"/> -->
    <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 Govern from './components/govern'

import {mapActions} from 'vuex'
export default {
  name: 'Main',
  components: {
    EmergencyCommand,
    Operation,
    Repair,
    Discovery,
    Supervision,
    Handle,
    StreetMenu,
    BottomTabs,
    Govern,
  },
  data() {
    return {
      curTitle: '南码头',
      complete: false,
      showEleMap: false,
      curTab: 0,
      curImg: '',
      showImgModal: false,
      images: ['chart1.jpeg', 'chart2.png', 'chart3.png', 'chart4.png'],
      tableLayout: [
        {
          title: '类别',
          key: 'type',
          width: 2,
        },
        {
          title: '名称',
          key: 'name',
          width: 3,
        },
        {
          title: '要素描述',
          key: 'des',
          width: 8,
        },
        {
          title: '自治处置(一级)',
          key: 'self',
          width: 4,
        },
        {
          title: '协同处置(二级、三级)',
          key: 'associate',
          width: 4,
        },
        {
          title: '智能化发现方式',
          key: 'smart',
          width: 3,
        },
      ],
      tableData: [],
    }
  },
  methods: {
    mapComplete() {
      const {data} = require('../../static/mock.json')
      this.tableData = data
      this.$refs.map.drawStreet('nanmatou')
      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}) {
      switch (layername) {
      case 'community': // 当点击图层为小区时
        const {X, Y} = data[0]
        const {map} = this.$refs
        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
      default:
        break
      }
    },
    handleSelect(data) {
      console.log(data)
    },
    clickCommunity(data){
      console.log(data)
    },
    handleStreetSelect(index, name) {
      this.curTitle = name.replace('街道', '')
      this.$refs.map.removePoint('nanmatou')
      if (index == 0) {
        this.$refs.map.focus(9000, -2000, 2)
        this.initData()
      } else {
        this.$refs.map.drawStreet('nanmatou')
        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'})
      }
    },
  },
}
</script>

<style lang="stylus">
  .analysis-wrapper
    .ivu-carousel
      height 100%
      overflow hidden
        img
          height 100%
          width 100%
</style>
<style lang="stylus" scoped>
.analysis-wrapper
  width 100%
  height 100%
  img
    width 100%
    height 100%
.ele-wrapper
  display flex
  justify-content space-around
  >div
    flex 1
    cursor pointer
    &:hover
      color $edgeColor
    > img
      margin-top 0.5rem
      width 95%
      height 80%
    > div
      // width 100%
      margin-top 0.5rem
      height 80%
      display flex
      align-items center
      justify-content center
      font-size 3rem
      color $color-blue
      border 0.1rem solid @color
      &:hover
        color $edgeColor
        border-color @color
</style>
