<!--植树造林-->
<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <div class="leftbar" :class="indentleft" ref="left">
        <div class="forthis">
          <div class="this-title">
            <el-date-picker v-model="pickYear" @change="getInit()" type="year" placeholder="选择年">
            </el-date-picker>
          </div>
          <div class="i-list-con h-19">
            <div class="d-l-con" :class="{on:listCurrentIndex1 == item.id}" v-for="(item,index) in afforestationList"
                 @click="getAfforestationArea(item.id)">
              <div class="d-l-l-text">
                <i class="i-small"></i>
                <h4>{{item.plantingQuantity}}</h4>
              </div>
            </div>
          </div>
        </div>
        <div class="forthis">
          <div class="i-list-con h-51">
            <div class="d-l-con" :class="{on:listCurrentIndex2 == item.points}"
                 v-for="(item,index) in AfforestationAreaList" @click="setGraphicsList(item.points)">
              <div class="d-l-l-text">
                <i class="i-small"></i>
                <h4>区域{{index+1}}</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 地图 -->
      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'disasterMap'"
                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>
      <!--底部 -->
      <vBottomMenu ref="bottomMenu"></vBottomMenu>

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

<script>
  import {
    getAfforestation, getAfforestationArea
  } from '@/api/afforestation'
  /** ----------------------------------摄像头预览开始------------------------------------- */
  import {
    getDahuaVideoServer
  } from '@/api/dahua/dahua'
  import DHWs from '@/dahua/lib/DHWs'

  /** ----------------------------------摄像头预览结束------------------------------------- */
  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 {
    dicts: ['event_source'],
    components: {
      supermap,
      vheader,
      vBottomMenu,
      eventLocation,
      TVWall,
    },
    created() {
      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
      window.showDialog = this.showDialog
      window.choseLayerSwitching = this.choseLayerSwitching
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    },
    mounted() {
      this.getInit()
    },
    data() {
      return {
        listCurrentIndex1: '',
        listCurrentIndex2: '',
        pickYear: new Date(), //选择年份
        afforestationList: [],
        AfforestationAreaList: [],
        graphicsList: [],//地图区域
        //左右缩进
        indentStyle: '',
        indentleft: '',
        indentright: '',
        indentText: '收起左右栏',
        indentdisabled: false

      }
    },

    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)
      },
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */

      getInit() {
        this.listCurrentIndex1=''
        this.listCurrentIndex2=''
        let that = this
        this.afforestationList = []
        this.AfforestationAreaList = []
        //获取左侧菜单列表
        getAfforestation(this.pickYear.getYear() + 1900).then(res => {
          this.afforestationList = res.data
          setTimeout(() => {
            this.$refs.supermap.clearG()
          }, 1000)
        })
      },
      getAfforestationArea(afforestationId) {
        this.listCurrentIndex1 = afforestationId
        let that = this
        //获取左侧菜单列表
        getAfforestationArea(afforestationId).then(res => {
          this.AfforestationAreaList = res.data
        })
      },
      setGraphicsList(points) {
        this.listCurrentIndex2 = points
        this.graphicsList = []
        if (points != null && points != '') {
          this.graphicsList = JSON.parse(points)
          this.$refs.supermap.clearG()
          this.$refs.supermap.setGraphicsList(this.graphicsList, 'red')
        } else {
          this.$refs.supermap.clearG()
        }
      },

      //吉祥物收起左右框
      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 = '收起左右栏'
        }
      },
      dropLocation(lat, lng) {
        this.$refs.supermap.dropLocation(lat, lng)
      },
      /** ----------------------------------摄像头预览开始------------------------------------- */
      alertLogin: function() {
        this.$modal.msg('登录中....')
      },
      alertLoginSuccess: function() {
        this.$modal.msgSuccess('登录成功！')
      },
      alertLoginFailed: function() {
        this.$modal.msgError('登陆失败！')
      },
      alertReinstall: function() {
        this.$modal.msgWarning('请重新安装客户端')
      },
      /** 预览按钮操作 */
      preview(channelCode) {
        getDahuaVideoServer().then(newResponse => {
          this.ws.detectConnectQt().then(res => {
            if (res) { // 连接客户端成功
              this.alertLogin()
              this.ws.login({
                loginIp: newResponse.loginIp,
                loginPort: newResponse.loginPort,
                userName: newResponse.userName,
                userPwd: newResponse.userPwd,
                token: '',
                https: 1
              })
              this.ws.on('loginState', (res) => {
                this.isLogin = res
                console.log('---res-----', res)
                if (res) {
                  this.alertLoginSuccess()
                  this.activePanel = 'key2'
                  this.realTimeVideoDialog(channelCode)
                } else {
                  this.alertLoginFailed()
                }
              })
            } else { // 连接客户端失败
              this.alertReinstall()
            }
          })
        })
      },
      realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
        if (!this.isLogin) {
          this.$Message.info('正在登陆客户端，请稍等......')
          return false
        }
        this.ws.openVideo(cameraParams)
      }
      /** ----------------------------------摄像头预览结束------------------------------------- */
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/styles/base.scss';

  .el-table__header {
    width: auto !important;
  }

  .d-dialog-con {
    position: absolute;
    left: -19rem;
    top: 0;
  }
</style>
