<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 0.8fr 1.2fr 0.5fr 1fr 1fr 1.5fr"
    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="模型">
      <ManageIssue v-if="complete"/>
    </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">
      <VideoWrapper @select="showVideo"/>
    </m-card>
    <m-card v-show="complete" area="box5" title="智能发现" mode="4">
      <Discovery @select="(data) => {this.handleDetail = data;this.showHandleDetail = true;}"/>
    </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" @select="(data) => {this.handleDetail = data;this.showHandleDetail = true;}"/>
    </m-card>
    <MapMenu :full="complete" @full="handleFullView" @switch="handleSwitchIcon" @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="85%" 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="analysisTitle">
      <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-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-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>
    <m-modal v-model="showHandleDetail" title="联勤联动动态流程" width="60%">
      <m-form :label-width="8" title="流程信息" :model="handleDetail" :layout="handleDetailLayout"/>
      <div style="width:90%;margin:1rem auto;">
        <m-step
          :steps="[{name:'推送',},{name:'接收',},{name:'处置',},{name:'完成'}]"
          :current="[handleDetail.current || 3, false]"
          :msg="[handleDetail.create_time || '', handleDetail.check_time || '', handleDetail.receive_time || '', handleDetail.done_time || '']"
        />
      </div>
    </m-modal>
    <m-modal v-model="$store.state.processModal" @close="$store.commit('SET_PROCESSMODAL', false)" title="联勤联动处置模型" width="80%">
      <img style="width:100%;height:100%;" src="@/assets/images/process-model.png"/>
    </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 VideoWrapper from './components/video-wrapper'

import {mapActions} from 'vuex'
export default {
  name: 'Main',
  components: {
    EmergencyCommand,
    Operation,
    Repair,
    Discovery,
    Supervision,
    Handle,
    StreetMenu,
    BottomTabs,
    ManageIssue,
    MapMenu,
    Emergency1,
    ImgContainer,
    Application,
    GovernAnalysis,
    IssueDetail,
    VideoWrapper,
  },
  data() {
    return {
      timer: null,
      openIcon: true,
      curTitle: '南码头',
      emergencyMode: false,
      showModeMenu: false,
      complete: false,
      showEleMap: false,
      curImg: '',
      showImgModal: false,
      showHandleDetail: false,
      handleDetail: {},
      handleDetailLayout: [
        {
          communityName: {
            label: '小区名称',
            width: 8,
          },
          communityAddr: {
            label: '小区地址',
            width: 16,
          },
        },
        {
          types: {
            label: '协同事项',
            width: 8,
            format: val => (val && this.$com.getSensorScene(val)) || this.handleDetail.matter
          },
          cspName: {
            label: '响应部门',
            width: 16,
          },
        },
        {
          check_type: {
            label: '发现方式',
            width: 8,
            format: val => val || '智能发现'
          },
          device_name: {
            label: '设备地点',
            width: 16,
          },
        },
        {
          done_photo: {
            label: '照片',
            width: 12,
            type: 'img',
          },
        }
      ],
      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: 18,
          info: '较去年+5',
        },
        {
          title: '2019投诉密度',
          count: 46,
          unit: '件',
        },
        {
          title: '密度变化',
          count: 112,
          unit: '%',
        },
        {
          title: '全区排名',
          count: 10,
          info: '较去年+6',
        },
      ],
      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},
      ],
      curVideo: null,
      videoModal: false,
      eventData: [],
      eventLayout: [
        {
          sensorType: {
            label: '传感器类型',
            width: 7,
          },
          sensorNo: {
            label: '传感器编号',
            width: 6,
          },
          _scene: {
            label: '场景类型',
            width: 6,
          },
          _status: {
            label: '状态',
            width: 5,
          },
        }
      ],
      showEventModal: false,
    }
  },
  beforeDestroy() {
    this.$store.commit('SET_CURSCENE', null)
    clearInterval(this.timer)
    this.timer = null
  },
  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, 6)
      this.initNanmatouData()
      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
      }
    },
    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
    },
    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')
      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
    },
    showVideo(name) {
      this.curVideo = name
      this.videoModal = true
    },
    handleSwitchIcon() {
      this.openIcon = !this.openIcon
      this.addSensorPoints()
    },
    addSensorPoints() {
      const {map} = this.$refs
      map.removePoint('sensor')
      map.removeGifPoint('sensor')
      if (this.openIcon) {
        this.setSensorList()
      }
    },
    addPoints() {
      this.addSensorPoints()
      this.setDiscoverInfo()
      this.setHandleList()
      const result = [     // 报修投诉
        {
          title:'报修数量',
          img:'repair.png',
          num: 0,
          allNum: 129,
        },
        {
          title:'投诉数量',
          img:'complaint.png',
          num: 0,
          allNum: 33,
        },
      ]
      this.$store.commit('SET_REPAIRLIST', result)
      // 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)
      // })
    },
    ...mapActions([
      'initNanmatouData',
      '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'})
      }
    },
    emergencyMode(cur) {
      const {map} = this.$refs
      map.focus(4039.44281, -4712.403381, 6)
      map.removeGifPoint('selected-point')
      map.removePoint('em')
      map.removeGifPoint('community')
      if (cur) {
        const mock = [
          {COMMUNITYNAME: '（补）教师大楼', TASKID:'（补）教师大楼', COMMUNITYID: '（补）教师大楼', icon: 'icon2.png', X: 4039.44281, Y: -4712.403381},
          {COMMUNITYNAME: '（补）临沂二村', TASKID:'（补）临沂二村', COMMUNITYID: '（补）临沂二村', icon: 'icon2.png', X: 3706.690186, Y: -4234.159912},
          {COMMUNITYNAME: '（补）金田公寓', TASKID:'（补）金田公寓', COMMUNITYID: '（补）金田公寓', icon: 'icon1.png', X: 3391.523438, Y: -3836.112488},
          {COMMUNITYNAME: '（补）临沂五村', TASKID:'（补）临沂五村', COMMUNITYID: '（补）临沂五村', icon: 'icon3.png', X: 3779.35022, Y: -4665.97998},
          {COMMUNITYNAME: '（补）华南名苑', TASKID:'（补）华南名苑', COMMUNITYID: '（补）华南名苑', icon: 'icon2.png', X: 3094.474182, Y: -4879.984985},
          {COMMUNITYNAME: '（补）明丰佳园', TASKID:'（补）明丰佳园', COMMUNITYID: '（补）明丰佳园', icon: 'icon2.png', X: 4574.670227, Y: -4217.309998},
        ]
        this.$refs.map.addGifPoint({name: 'community', key: 'COMMUNITYID', data: mock, 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'})
      }
    }
  },
}
</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>
