<template>
  <m-grid
    :template="[
      'title title title',
      'box1 . box5',
      'box2 . box5',
      'box8 . box3',
      'box8 . box4',
      'box8 . box10',
      'box6 box7 box9',
    ]"
    columns="1fr 2fr 1fr"
    rows="3rem 1fr 1.5fr 1fr 1fr 1.3fr 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')">浦东新区物业微平台({{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 />
    </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 />
    </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="box10" title="辅助应用" mode="4">
      <Application @elevator="showEleMap = true"/>
    </m-card>
    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box6" title="治理分析" mode="4">
      <GovernAnalysis @select="(name) => {this.showAnalysisDetail = true; this.analysisTitle = name;}" v-if="complete"/>
    </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="80%" title="管理要素明细">
      <IssueDetail />
    </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>
    <m-modal v-model="showAnalysisDetail" title="治理分析">
      <div class="analysis-modal">
        <div v-if="analysisTitle == '物业服务满意度得分较低项目'" class="content">
          <div class="title">物业服务满意度得分较低项目</div>
          <div><p>定期公布维修资金使用项目</p><p>76.02</p></div>
          <div><p>定期公布公共收益项目</p><p>76.82</p></div>
          <div><p>对违法搭建、群租问题定期巡视、发现</p><p>77.61</p></div>
          <div><p>投诉及时回复</p><p>79.59</p></div>
          <div><p>提供便民服务或特约服务</p><p>79.81</p></div>
          <div><p>建筑垃圾有制定堆放点</p><p>80.34</p></div>
        </div>
        <div v-else-if="analysisTitle == '物业服务企业整体满意度倒数企业'" class="content">
          <div class="title">物业服务企业整体满意度倒数企业</div>
          <div><p>上海豫园旅游商城物业管理有限公司</p><p>67.18</p></div>
          <div><p>上海华夏物业有限公司</p><p>69.74</p></div>
          <div><p>上海振南物业有限公司</p><p>75.29</p></div>
          <div><p>上海霞悦物业管理有限公司</p><p>77.71</p></div>
          <div><p>上海东方明珠物产管理有限公司</p><p>78.27</p></div>
          <div><p>上海富宁物业管理有限公司</p><p>79.51</p></div>
        </div>
        <div v-else-if="analysisTitle == '南码头街道业委会运作情况'" class="chart-wrapper">
          <p class="title">南码头街道业委会运作情况</p>
          <m-chart :config="operationConfig" :data="operationData" />
        </div>
        <div v-else-if="analysisTitle == '南码头街道12345诉求数量全市排名'" class="card">
          <p class="title">南码头街道12345诉求数量全市排名</p>
          <div class="inner">
            <div v-for="(item, i) in list" :key="i">
              <p>{{item.title}}</p>
              <p>
                <b><m-count style="color:#00f2ff;font-size:1.2rem;" :value="item.count" :decimal="0"/></b>
                <span v-if="item.unit">{{item.unit}}</span>
                <i v-if="item.info">{{item.info}}</i>
              </p>
            </div>
          </div>
        </div>
        <div v-else-if="analysisTitle == '南码头街道综合管理诉求二级指标占比'" class="chart-wrapper">
          <p class="title">南码头街道综合管理诉求二级指标占比</p>
          <m-chart :config="manageConfig" :data="manageData" />
        </div>
      </div>
    </m-modal>
  </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 IssueDetail from './components/issue-detail'

import {mapActions} from 'vuex'
export default {
  name: 'Main',
  components: {
    EmergencyCommand,
    Operation,
    Repair,
    Discovery,
    Supervision,
    Handle,
    StreetMenu,
    BottomTabs,
    ManageIssue,
    MapMenu,
    Emergency1,
    ImgContainer,
    Application,
    GovernAnalysis,
    IssueDetail,
  },
  data() {
    return {
      curTitle: '南码头',
      emergencyMode: false,
      showModeMenu: false,
      complete: false,
      showEleMap: false,
      curImg: '',
      showImgModal: false,
      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'},
      ],
      showAnalysisDetail: false,
      analysisTitle: null,
      list: [
        {
          title: '2019诉求量',
          count: 1582,
          unit: '件',
        },
        {
          title: '数量变化',
          count: 115,
          unit: '%',
        },
        {
          title: '全市排名',
          count: 41,
          info: '较去年+51',
        },
        {
          title: '2019诉求密度',
          count: 46,
          unit: '件',
        },
        {
          title: '密度变化',
          count: 112,
          unit: '%',
        },
        {
          title: '全市排名',
          count: 17,
          info: '较去年+70',
        },
      ],
      operationConfig: {
        colors: [['#a45cd1', '#3e29b1'], ['#00f2fe', '#007eff']],
        legend: {
          align: 'right',
        },
        shape: [
          {key: 'nanmatou', name: '南码头', type: 'bar', barWidth: '30%'},
          {key: 'pudong', name: '浦东总体', type: 'bar', barWidth: '30%'},
        ],
        xAxis: {
          key: 'name',
        },
      },
      operationData: [
        {name: '规范', pudong: 24.87, nanmatou: 31.38},
        {name: '正常', pudong: 45.93, nanmatou: 36.49},
        {name: '还可以', pudong: 25.87, nanmatou: 26.83},
        {name: '不正常', pudong: 1.06, nanmatou: 0},
        {name: '不了解', pudong: 2.27, nanmatou: 5.29},
      ],
      manageConfig: {
        legend: {
          align: 'right',
          orient: 'vertical',
        },
        shape: [
          {key: 'value', type: 'pie', center: ['30%', '40%'], radius: [20, 110], roseType: 'area',},
        ],
      },
      manageData: [
        {name: '公共秩序、环境维护', value: 36.17},
        {name: '非物业类', value: 34.57},
        {name: '公用设施养护', value: 8.88},
        {name: '物业服务规范', value: 7.04},
        {name: '业委会、业主大会', value: 5.14},
        {name: '自用部位维修', value: 4.89},
        {name: '物业使用规范', value: 2.09},
        {name: '维修资金管理', value: 1.21},
        // {name: '其他', value: 47.9},
      ],
    }
  },
  methods: {
    mapComplete() {
      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
    },
    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" 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

$title()
  margin 1rem 0
  font-size 1.2rem
  text-align center
.analysis-modal
  .chart-wrapper
    width 100%
    height 40vh
    .title
      $title()
  .content
    width 100%
    height 96%
    div
      display flex
      align-items center
      justify-content space-between
      padding .5rem 1rem
      background rgba(0,0,0,0.3)
      margin-bottom 1rem
      &.title
        $title()
        justify-content center
        background none
      >p
        &:last-child
          color $edgeColor
          // font-weight bold
  .card
    .title
      $title()
      margin-bottom 1rem
    .inner
      display flex
      flex-wrap wrap
      >div
        width 33%
        text-align center
        margin-top 2rem
        >p
          color #8fb6fb
          span
            color #fff
          i
            color red
</style>
