<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <div class="leftbar w-6" :class="indentleft" ref="left">
        <div class="forthis">
          <div class="i-list-con h-78">
            <div class="d-l-con-icon">
              <div class="icon-con  m-btm-no icon-animal-con" :class="animalcount"  @click="getInit()">
                <!--   -->
                <!--<div class="icon icon-dot"></div>-->
                <div class="icon-text animal-text">
                  <h6>9</h6>
                  <h5>总数</h5>
                </div>
              </div>
            </div>
            <div class="d-l-con-icon">
              <div class="icon-con icon-animal-con" :class="{on:iconCurrentIndex1==item.type}"  v-for="(item,index) in animalDwfb"  @click="selectForestAnimalListByType(item.type)">
                <div class="iconfont icon icon-normal icon-animal">
                  <img :src="item.src">
                </div>
                <div class="icon-text icon-animal-text">
                  <h5>{{item.name}}</h5>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 地图 -->
      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'animalMap'"
                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>
      <!--      <button @click="showEventInfo1" style="position: absolute; right: 50%;top: 45%;z-index: 1000;">弹层事件演示用按钮-->
      <!--      </button>-->
      <!-- 右侧 -->
      <div class="rightbar" :class="indentright" ref="right">
        <div class="forthis">
          <div class="this-title">
            <span>事件分布</span>
            <!-- <span>23</span> -->
          </div>
          <div class="i-list-con h-73">
            <div class="d-l-con-icon">
              <div class="h-19 overflow-y w100">
                <div class="d-l-con" v-for="(item,index) in animalSjfb">
                  <div class="d-l-l-text">
                    <i class="i-small"></i>
                    <h4>{{item.deptName}}</h4>
                  </div>
                  <div class="d-l-l-count">{{item.count}}</div>
                </div>
              </div>
            </div>
            <div class="d-l-con">
              <div id="animal-chart" style="width: 100%;height:26.2vh;"></div>
            </div>
            <div class="d-l-con d-evnet-list-con"  :class="{on:listCurrentIndex1==index}"   v-for="(item,index) in animalSjlb" @click="dropLocation(item.latitude,item.longitude,index)">
              <img src="@/assets/images/visual/img-sample.png" class="event-list-img animal-img">
              <div class="event-list-text">
                <h3>{{item.eventTitle}}</h3>
                <h4><span>摄像头</span><span>新上报</span><span>{{item.reportTime}}</span>
                </h4>
              </div>
            </div>

          </div>

        </div>

      </div>
      <vBottomMenu ref="bottomMenu"></vBottomMenu>
      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">
        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img
          src="@/assets/images/mascot.png"/>
        </div>
      </el-tooltip>

    </div>
    <eventLocation ref="eventLocation"></eventLocation>
    <TVWall ref="TVWall"></TVWall>
  </div>
</template>

<script>
  import {
    getInit,selectForestAnimalListByType
  } from '@/api/animal'

  import supermap from '@/components/supermap' //超图
  import vheader from '@/components/v-header.vue' //一体化共用头部
  import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
  import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
  import TVWall from '@/components/TVWall.vue' //电视墙弹窗

  let echarts = require('echarts')
  export default {
    components: {
      supermap,
      vheader,
      vBottomMenu,
      eventLocation,
      TVWall,
    },
    data() {
      return {
		animalcount:'',
		iconCurrentIndex1:'',
		listCurrentIndex1:'',
        //左右缩进
        indentStyle: '',
        indentleft: '',
        indentright: '',
        indentText: '收起左右栏',
        indentdisabled: false,

        //虚拟数据
        animalDwfb: [{
          name: '虎',
          src: require('../assets/images/dwbh/hu-1.png'),
          type:'forest_animal_hu'
        }, {
          name: '豹',
          src: require('../assets/images/dwbh/bao-1.png'),
          type:'forest_animal_bao'
        }, {
          name: '蛇',
          src: require('../assets/images/dwbh/she-1.png'),
          type:'forest_animal_she'
        }, {
          name: '鹰',
          src: require('../assets/images/dwbh/ying-1.png'),
          type:'forest_animal_ying'
        }, {
          name: '兔',
          src: require('../assets/images/dwbh/tuzi-1.png'),
          type:'forest_animal_tu'
        }, {
          name: '狐狸',
          src: require('../assets/images/dwbh/huli-1.png'),
          type:'forest_animal_huli'
        }, {
          name: '狗熊',
          src: require('../assets/images/dwbh/gouxiong-1.png'),
          type:'forest_animal_gouxiong'
        }, {
          name: '野鸡',
          src: require('../assets/images/dwbh/yeji-1.png'),
          type:'forest_animal_yeji'
        }, {
          name: '狍子',
          src: require('../assets/images/dwbh/paozi-1.png'),
          type:'forest_animal_paozi'
        }],
        animalSjfb: [],
        animalSjlb: [],
        markersList:[],//点位列表
      }
    },
    created() {
      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
      window.showDialog=this.showDialog
      window.choseLayerSwitching=this.choseLayerSwitching
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    },
    mounted() {
      this.getInit()
    },
    methods: {
      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
      showDialog(click) {
        if (click == 'eventLocation') {
          this.$refs.eventLocation.showEventLocation()
          this.$refs.supermap.isEditableLayers = false
          this.$refs.bottomMenu.showChild = false
        } else if (click == 'editableLayers') {
          this.$refs.bottomMenu.showChild = false
          if (!this.$refs.supermap.isEditableLayers) {
            this.$refs.supermap.isEditableLayers = true
          } else {
            this.$refs.supermap.isEditableLayers = false
          }
        } else if (click == 'layerSwitching') {
          this.$refs.supermap.isEditableLayers = false
          if (!this.$refs.bottomMenu.showChild) {
            this.$refs.bottomMenu.showChild = true
          } else {
            this.$refs.bottomMenu.showChild = false
          }
        } else if (click == 'TVWall') {
          this.$refs.TVWall.showTVWall()
          this.$refs.supermap.isEditableLayers = false
          this.$refs.bottomMenu.showChild = false
        }
      },
      //选择图层
      choseLayerSwitching(url) {
        this.$refs.supermap.layerSwitching(url, true);
      },
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
      dropLocation(lat,lng,index) {
		this.listCurrentIndex1 = index
        this.$refs.supermap.dropLocation(lat,lng)
      },
      //初始化
      getInit() {
		this.iconCurrentIndex1 = ''
		this.animalcount = 'on'
        let that = this
        //获取左侧菜单列表
        getInit().then(res => {
          this.animalSjfb = res.data.visuForestAnimalBOList
          this.animalSjlb = res.data.visuForestVgdEventBOList

          that.markersList = [];
          if (res.data.visuForestVgdEventBOList != null && res.data.visuForestVgdEventBOList.length > 0) {
            for (let i = 0; i < res.data.visuForestVgdEventBOList.length; i++) {
              let markersMap = {
                lng: 124.59,
                lat: 43.02,
                icon: 'marker',
                bindPopupHtml: '',
                click: '',
                parameter: '',
                keepBindPopup: false,
                isAggregation: false
              }
              if (res.data.visuForestVgdEventBOList.length > 50) {
                markersMap.isAggregation = true
              }
              markersMap.lng = res.data.visuForestVgdEventBOList[i].longitude
              markersMap.lat = res.data.visuForestVgdEventBOList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' + res.data.visuForestVgdEventBOList[i].longitude + ',' + res.data.visuForestVgdEventBOList[i]
                  .latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件名称：' + res.data.visuForestVgdEventBOList[i].eventTitle + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件时间：' + res.data.visuForestVgdEventBOList[i].reportTime + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '</div>';
              that.markersList.push(markersMap)
            }
            setTimeout(() => {
              that.$refs.supermap.clearM(false)
              that.$refs.supermap.clearM(true)
              that.$refs.supermap.setMarkers(that.markersList)
            }, 1000)
          }else{
            setTimeout(() => {
              that.$refs.supermap.clearM(false)
              that.$refs.supermap.clearM(true)
            }, 1000)
          }
        })
      },

      selectForestAnimalListByType(type){
		this.iconCurrentIndex1 = type
		this.animalcount = ''
        let that = this
        //获取左侧菜单列表
        selectForestAnimalListByType(type).then(res => {
          console.log(res)
          this.animalSjfb = res.data.visuForestAnimalBOList
          this.animalSjlb = res.data.visuForestVgdEventBOList
          that.markersList = [];
          if (res.data.visuForestVgdEventBOList != null && res.data.visuForestVgdEventBOList.length > 0) {
            for (let i = 0; i < res.data.visuForestVgdEventBOList.length; i++) {
              let markersMap = {
                lng: 124.59,
                lat: 43.02,
                icon: 'marker',
                bindPopupHtml: '',
                click: '',
                parameter: '',
                keepBindPopup: false,
                isAggregation: false
              }
              if (res.data.visuForestVgdEventBOList.length > 50) {
                markersMap.isAggregation = true
              }
              markersMap.lng = res.data.visuForestVgdEventBOList[i].longitude
              markersMap.lat = res.data.visuForestVgdEventBOList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' + res.data.visuForestVgdEventBOList[i].longitude + ',' + res.data.visuForestVgdEventBOList[i]
                  .latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件名称：' + res.data.visuForestVgdEventBOList[i].eventTitle + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件时间：' + res.data.visuForestVgdEventBOList[i].reportTime + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '</div>';
              that.markersList.push(markersMap)
            }
            setTimeout(() => {
              that.$refs.supermap.clearM(false)
              that.$refs.supermap.clearM(true)
              that.$refs.supermap.setMarkers(that.markersList)
            }, 1000)
          }else{
            setTimeout(() => {
              that.$refs.supermap.clearM(false)
              that.$refs.supermap.clearM(true)
            }, 1000)
          }
        })
      },

      //事件chart
      eventChart() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('animal-chart'))
        myChart.setOption({
          color: ['#2EACFF', '#FFA61C', '#2EC054', '#8C64D7'],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          toolbox: {
            show: true
          },
          series: [{
            name: '事件分类',
            type: 'pie',
            roseType: true,
            radius: [30, 70],
            label: {
              show: true,
              formatter: '{b}\n{c} '
            },
            data: this.eventChartData
          }]
        })

      },
      //吉祥物收起左右框
      indent() {
        let list = document.getElementsByClassName('el-tooltip__popper')
        list[list.length - 1].style.display = 'none'
        if (this.indentStyle == '') {
          this.indentStyle = 'indent-style'
          this.indentleft = 'indent-left'
          this.indentright = 'indent-right'
          this.indentText = '展开左右栏'
        } else if (this.indentText == '展开左右栏') {
          this.indentStyle = ''
          this.indentleft = ''
          this.indentright = ''
          this.indentText = '收起左右栏'
        }
      }
    }

  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '@/assets/styles/base.scss';
  //动物保护
  .icon-animal-con {
    width: 100%;
    display: block !important;
  }

  .icon-animal {
    display: block;
    margin: 2px auto;
    background: none !important;
  }

  .icon-animal-text {
    display: block !important;
    text-align: center !important;
    padding: 0.5rem 0.5rem 0rem 0.5rem;
  }

  .animal-text {
    background: #f5ad1b;
    border: 0.2px solid rgba(19, 64, 64, 0.7);
    height: 3.2rem;
    width: 4rem;
    text-align: center;
    margin: 0px auto;
    border-radius: 0.5rem;
    color: #fff !important;
  }

  .animal-text h6 {
    color: #fff !important;
  }

  .w100 {
    width: 100% !important;
  }

  .animal-img {
    height: 3rem !important;
  }

  .w-6 {
    width: 6rem !important;
  }

</style>
