<template>
  <div id="deck">
    <my-map @pointSearchRes="(params)=>handlePointSearchRes(params)"/>
    <div class="header">
      <div class="h-left">
        <img src="../../assets/imgs/deck/btn-home.png" alt="" class="hl-home button-pic" @click="handleToMainPage()">
      </div>
      <div class="h-center">
        <span class="hc-btn" :class="{'highlight': subPanelShow==='znfx'}" @click="handleShowSubPanel('znfx')">智能分析</span>
        <span class="hc-title">崇明数字农业智能管控系统·驾驶舱</span>
        <span class="hc-btn" :class="{'highlight': subPanelShow==='zhcj'}" @click="handleShowSubPanel('zhcj')">智慧场景</span>
      </div>
      <div class="h-right">
        <div class="hr-clock">
          <span>{{ nowTime }}</span>
          <span>{{ nowDate }}</span>
        </div>
        <img @click="handleToBusinessSys" class="button-pic" src="../../assets/imgs/home/btn-jump.png" alt="">
      </div>
    </div>
    <ul class="menu" v-show="!subPanelShow && !multiScreenMode">
      <li v-for="item in menuList" :key="item.name" @click="handleChangePage(item)">
        <img :src="currentMenu===item.name? item.imgOn: item.img" alt="" :class="{ 'highlight': currentMenu===item.name }">
        <span>{{ item.name }}</span>
      </li>
    </ul>
    <div class="map-layers" v-if="currentMenu&&currentMenu!=='总体概览'" v-show="!multiScreenMode">
      <div class="ml-all">
        <span class="box-title1">全部图层</span>
        <el-tree

          :data="data_currentLayer"
          :props="{ children: 'children', label: 'name', disabled: getDisabled }"
          node-key="id"
          @check="handleCheck"
          class="tree-all-layers"
          show-checkbox
          ref="allLayers"
        >
        </el-tree>
      </div>
      <div class="ml-current" v-show="listChecked.length>0">
        <div style="position: relative;">
          <span class="box-title1">当前图层</span>
          <i class="cl-empty" @click="handleEmptyLayers"></i>
        </div>
        <ul>
          <li v-for="item in listChecked" :key="item.id">
            <span>{{ item.name }}</span>
            <div>
              <i class="btn" :class="item.isHide?'btn-dqtc-hide':'btn-dqtc-show'" @click="handleLayerVisible(item)"></i>
              <i class="btn btn-dqtc-close" @click="handleLayerDelete(item)"></i>
              <el-popover
                placement="right"
                trigger="hover"
                popper-class="opacity-slider"
              >
                <el-slider v-model="item.opacity" :min="1" @change="val => handleLayerOpacity(val,item)"></el-slider>
                <i slot="reference" class="btn btn-dqtc-opacity"></i>
              </el-popover>
            </div>
          </li>
        </ul>
      </div>
      <div class="ml-legend" v-show="listChecked.find(i=>i.id==='nydxz')">
        <span class="box-title1">图例</span>
        <ul>
          <li v-for="item in data_legend" :key="item.name">
            <i :style="'background:'+ item.color+';'"></i>
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>
    <ul class="tools" :class="{'has-right': $store.state.hasRightPanel&&!multiScreenMode}">
      <li v-for="item in toolList" :key="item.name" @click="handleClickTool(item)">
        <img :src="item.isOn? item.imgOn: item.img" alt="">
      </li>
    </ul>
    <div class="point-search" v-if="pointSearchShow" v-show="!multiScreenMode" :class="{'has-right': $store.state.hasRightPanel}">
      <span class="box-title1">详细信息</span>
      <i class="box-close" @click="handleClosePointSearch"></i>
      <ul class="ps-list">
        <li v-for="(value, key) in pointSearchData" :key="key">
          <span>{{ key }}</span>
          <span :title="value">{{ value }}</span>
        </li>
      </ul>
    </div>
    <div class="juanlian my-abs-model" v-show="!multiScreenMode" v-if="toolList.find(i => i.name ==='卷帘').isOn">
      <el-form :model="jldbForm" label-width="6em">
        <el-form-item prop="left" label="左侧">
          <el-select popper-class="my-prop-s" v-model="jldbForm.left">
            <el-option  v-for="item in judbArr" :key="item.id" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item  prop="left" label="右侧">
          <el-select popper-class="my-prop-s" v-model="jldbForm.right">
            <el-option v-for="item in judbArr" :key="item.id" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="left" label="" class="btn-form">
          <el-button @click="juanliandb">开始对比</el-button>
        </el-form-item>
      </el-form>
      <div class="close" @click="closeJl">x</div>
    </div>
    <base-map-area v-show="!multiScreenMode" :class="{'has-right': $store.state.hasRightPanel}" @changeBaseMap="(name)=>handleChangeBaseMap(name)"/>

    <el-form v-if="multiScreenMode" class="multi-screen">
      <el-form-item v-for="(item,index) in 4" :key="item" :class="['split-select', 'split-select-'+item]">
        <el-select v-model="hkyxForm[index]" @change="multiScreenLayerChange(index)" placeholder="请选择" class="select-default" popper-class="select-default-popper">
          <el-option v-for="item2 in hkyxArr" :key="item2.title" :label="item2.name" :value="item2.title"/>
        </el-select>
      </el-form-item>
    </el-form>

    <div v-show="!multiScreenMode">
      <page-znfx v-if="subPanelShow==='znfx'"/>
      <page-zhcj v-if="subPanelShow==='zhcj'"/>
      <page-ztgl v-if="currentMenu==='总体概览'"/>
      <page-nyxz v-if="currentMenu==='农业现状'&&layerStaShow_nydxz" :pointSearchShow="pointSearchShow"/>
    </div>

    <div class="juanlian my-abs-model" style="padding: 10px 10px 10px 10px;" v-show="!multiScreenMode" v-if="toolList.find(i => i.name ==='快速定位').isOn">
        <span class="box-title1">快速定位</span>
      <el-form label-width="6em">
        <el-form-item prop="selectTown">
          <el-select v-model="townVal" popper-class="my-prop-s alight-box" style="right: 30px" clearable>
            <el-option v-for="item in townArr" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { useNow, useDateFormat } from '@vueuse/core'
import PageZtgl from './pages/Page_ztgl.vue'
import PageNyxz from './pages/Page_nyxz.vue'
import PageZnfx from './pages/Page_znfx.vue'
import PageZhcj from './pages/Page_zhcj.vue'
import MyMap from '../map/Map.vue'
import BaseMapArea from '../map/BaseMapArea.vue'
import { allLayerInfo, formatLayers } from '@/utils/data/all-layer-info'
import {
  pointSearch_nydxz,
  landTypeMap,
  zhutiTypeMap,
  pointSearch_gbznt,
  pointSearch_nymd, pointSearch_cwzs, pointSearch_zjd, pointSearch_dsxm
} from '@/utils/data/fieldsMapper'
import {addMapL, gldbMap, addPolygons, layerControl, emptyAllLayers, locateCM} from "@/utils/map/AddLayer";
import {nextTick} from "vue";
import { myBridge } from "@/utils/map/map";
import { GetDsxmLocation, GetDsxmInfo } from '@/services/others'
import { XZArr } from '@/utils/data/select-data'


export default {
  name: 'deckPage',
  components: { PageZtgl, PageNyxz, MyMap, BaseMapArea, PageZnfx, PageZhcj },
  data() {
    return {

      nowTime: useDateFormat(useNow(), 'HH:mm'),
      nowDate: useDateFormat(useNow(), 'YYYY年M月D日'),
      menuList: [
        { name: '总体概览', img: require('@/assets/imgs/deck/menu-ztgl.png'), imgOn: require('@/assets/imgs/deck/menu-ztgl-h.png'), hasRight: true },
        { name: '农业规划', img: require('@/assets/imgs/deck/menu-nygh.png'), imgOn: require('@/assets/imgs/deck/menu-nygh-h.png'), hasRight: false },
        { name: '农业现状', img: require('@/assets/imgs/deck/menu-nyxz.png'), imgOn: require('@/assets/imgs/deck/menu-nyxz-h.png'), hasRight: false },
        { name: '绿色发展', img: require('@/assets/imgs/deck/menu-lsfz.png'), imgOn: require('@/assets/imgs/deck/menu-lsfz-h.png'), hasRight: false },
        { name: '土地审批', img: require('@/assets/imgs/deck/menu-tdsp.png'), imgOn: require('@/assets/imgs/deck/menu-tdsp-h.png'), hasRight: false },
        { name: '农房管理', img: require('@/assets/imgs/deck/menu-nfgl.png'), imgOn: require('@/assets/imgs/deck/menu-nfgl-h.png'), hasRight: false },
        { name: '动物防疫', img: require('@/assets/imgs/deck/menu-dwfy.png'), imgOn: require('@/assets/imgs/deck/menu-dwfy-h.png'), hasRight: false },
        { name: '智慧物联', img: require('@/assets/imgs/deck/menu-zhwl.png'), imgOn: require('@/assets/imgs/deck/menu-zhwl-h.png'), hasRight: false },
        { name: '基础地理', img: require('@/assets/imgs/deck/menu-jcdl.png'), imgOn: require('@/assets/imgs/deck/menu-jcdl-h.png'), hasRight: false },
      ],
      currentMenu: '总体概览',
      toolList: [
        { name: '全景', isOn: false, img: require('@/assets/imgs/deck/tool-full.png'), imgOn: require('@/assets/imgs/deck/tool-full-h.png') },
        { name: '测距', isOn: false, img: require('@/assets/imgs/deck/tool-distance.png'), imgOn: require('@/assets/imgs/deck/tool-distance-h.png') },
        { name: '测面', isOn: false, img: require('@/assets/imgs/deck/tool-area.png'), imgOn: require('@/assets/imgs/deck/tool-area-h.png') },
        { name: '搜索', isOn: false, img: require('@/assets/imgs/deck/tool-search.png'), imgOn: require('@/assets/imgs/deck/tool-search-h.png') },
        { name: '打印', isOn: false, img: require('@/assets/imgs/deck/tool-print.png'), imgOn: require('@/assets/imgs/deck/tool-print-h.png') },
        { name: '清空', isOn: false, img: require('@/assets/imgs/deck/tool-empty.png'), imgOn: require('@/assets/imgs/deck/tool-empty-h.png') },
        { name: '卷帘', isOn: false, img: require('@/assets/imgs/deck/guanlian.png'), imgOn: require('@/assets/imgs/deck/guanlian-active.png') },
        { name: '行政区划', isOn: false, img: require('@/assets/imgs/deck/xqqh.png'), imgOn: require('@/assets/imgs/deck/xzqh-active.png') },
        { name: '多窗对比', isOn: false, img: require('@/assets/imgs/deck/tool-multi.png'), imgOn: require('@/assets/imgs/deck/tool-multi-h.png') },
        { name: '快速定位', isOn: false, img: require('@/assets/imgs/deck/tool-orien.png'), imgOn: require('@/assets/imgs/deck/tool-orien-h.png') },
      ],
      data_allLayers: formatLayers(allLayerInfo),
      listChecked: [],
      data_legend: [
        { name: '粮田', color: '#D97E00' },
        { name: '果园', color: '#969600' },
        { name: '菜田', color: '#D5848B' },
        { name: '经作田', color: '#980220' },
        { name: '养殖(畜牧)', color: '#E8B707' },
        { name: '养殖(水产)', color: '#6697FE' },
      ],
      pointSearchShow: false,
      pointSearchData: {},
      subPanelShow: false,
      quickOrientation: false,
      jldbForm:{},
      layerStaShow_nydxz: false,
      multiScreenMode: false,
      hkyxForm: ["","","",""],
      hkyxArr: [],
      townVal: "",
      townArr: XZArr,
      dsxm_isAdd: false,
    }
  },
  mounted() {
    // console.log(this.data_allLayers)
  },
  computed: {
    data_currentLayer() {
      return this.data_allLayers.filter(i=> i.name===this.currentMenu)[0].children
    },
    judbArr() {
      return this.data_allLayers.find(i => i.name==='基础地理').children.find(j => j.name==='航空影像').children
    }
  },
  watch: {
    listChecked(val) {
      this.rightShowByLayer(val, '农用地现状', '农业现状', 'layerStaShow_nydxz')
    },
    townVal(val) {
      // console.log(val);
      this.townLine(val)
    }
  },

  methods: {
    // 根据选中的图层控制右侧面板显隐
    rightShowByLayer(checked, LayerName, menuName, layerStaShow) {
      let menuIndex = this.menuList.findIndex(i=>i.name===menuName)
      let has_layer = false
      checked.forEach(i => {
        if(i.name===LayerName) {
          if(this.currentMenu===menuName) {
            this.$store.commit('changeHasRight', true)
            this[layerStaShow] = true
          }
          this.menuList[menuIndex].hasRight = true
          has_layer = true
          return
        }
      })
      if(!has_layer) {
        if(this.currentMenu===menuName) {
          this.$store.commit('changeHasRight', false)
          this[layerStaShow] = false
        }
        this.menuList[menuIndex].hasRight = false
      }
    },
    handleChangePage(item) {
      if(this.currentMenu===item.name) {
        this.currentMenu = ''
        this.$store.commit('changeHasRight', false)
      } else {
        this.currentMenu = item.name
        this.$store.commit('changeHasRight', item.hasRight)
        this.$nextTick(() => {
          if(this.$refs.allLayers) {
            this.$refs.allLayers.setCheckedNodes([...this.listChecked])
          }
        })
      }
    },

    handleClickTool(item) {
      item.isOn = !item.isOn
      switch(item.name) {
        case '全景':
          locateCM()
          setTimeout(() => {
            item.isOn = false
          }, 200);
          break
        case '测距':
          MyMap.methods.calcuLine(item.isOn)
          break
        case '测面':
          MyMap.methods.calcuGon(item.isOn)
          break
        case '打印':
          window.print()
          setTimeout(() => {
            item.isOn = false
          }, 200);
          break
        case '搜索':
          this.pointSearchShow = true
          setTimeout(() => {
            item.isOn = false
          }, 200);
          break
        case '清空':
          MyMap.methods.clearMap()
          this.pointSearchShow = false
          this.toolList[1].isOn = false
          this.toolList[2].isOn = false
          this.toolList[9].isOn = false
          setTimeout(() => {
            item.isOn = false
          }, 200);
          break
        case '卷帘':
          if (!item.isOn){
            gldbMap(false,this.jldbForm.left,this.jldbForm.right)
            let findObjLeft = this.judbArr.find(i => i.id === this.jldbForm.left)
            let findObjRight = this.judbArr.find(i => i.id === this.jldbForm.right)
            if (findObjLeft){
              addMapL(findObjLeft.id,findObjLeft.url,false,'tile')
            }
            if (findObjRight){
              addMapL(findObjRight.id,findObjRight.url,false,'tile')
            }
          }
          break
        case '行政区划':
          if (item.isOn){
            let isOnHasZjx  =this.listChecked.find(i =>i.id === 'zjx')
            if (!isOnHasZjx){
              addMapL('zjx','http://10.108.3.5/ags_feature_svc/xzqh/FeatureServer/0',true)
              this.listChecked.push({
                name: '镇界线',
                id: 'zjx',
                title: 'zjx',
                layer: 3,
                opacity:100,
                url: 'http://10.108.3.5/ags_feature_svc/xzqh/FeatureServer/0',
              })
            }
            let isOnHasCjx  =this.listChecked.find(i =>i.id === 'cjx')
            if (!isOnHasCjx){
              addMapL('cjx','http://10.108.3.5/ags_feature_svc/xzqh/FeatureServer/1',true)
              this.listChecked.push({
                name: '村界线',
                layer: 3,
                opacity:100,
                id: 'cjx',
                title: 'cjx',
                url: 'http://10.108.3.5/ags_feature_svc/xzqh/FeatureServer/1',
              },)
            }

          }else {
            let isOnHasZjx  =this.listChecked.findIndex(i =>i.id === 'zjx')
            if (isOnHasZjx !== -1){
              addMapL('zjx','http://10.108.3.5/ags_feature_svc/xzqh/FeatureServer/0',false)
              this.listChecked.splice(isOnHasZjx,1)
            }
            let isOnHasCjx  =this.listChecked.findIndex(i =>i.id === 'cjx')
            if (isOnHasCjx !== -1){
              this.listChecked.splice(isOnHasCjx,1)
              addMapL('cjx','http://10.108.3.5/ags_feature_svc/xzqh/FeatureServer/1',false)
            }
          }
          console.log('adsjasdja','行政区划')
         nextTick(() => {
           this.$refs.allLayers.setChecked('xzqj',item.isOn,item.isOn)
         })
          break
        case '多窗对比':
          if(item.isOn) {
            this.multiScreenMode = true
            MyMap.methods.changeSplitScreen(true)
            if(this.hkyxArr.length === 0) {
              this.hkyxArr = this.data_allLayers[7].children[2].children
            }
          } else {
            this.multiScreenMode = false
            MyMap.methods.changeSplitScreen(false)
            this.hkyxForm = ["","","",""]
          }
          break
        case '快速定位':{
          if(!item.isOn){
            MyMap.methods.clearMap()
          }
          // this.quickOrientation = true
        }
      }
    },
    handleChangeLayer(params) {
      if(!params.layer.url) { return }
      if(params.layer.url==='dynamicLayer') {  // 处理需要查询接口动态渲染的图层
        switch (params.layer.id) {
          case 'dsxm': {    // 都市项目图层
            if(!this.dsxm_isAdd) {   //首次添加图层
              GetDsxmLocation().then(res => {
                if(res?.data.length>0) {
                  let geos = []
                  res.data.forEach(row => {
                    geos.push({ id: row.dsxmId, rings: JSON.parse(row.geojson).coordinates, attributes:{'dsxmId':row.dsxmId} })
                  })
                  this.dsxm_isAdd = true
                  addPolygons(geos, false, 'dsxm')
                }
              })
            } else {    //控制显隐和透明度
              layerControl('dsxm', params.visible, params.opacity)
            }
            break
          }
        }
      } else {
        MyMap.methods.addLayer(params.layer, params.visible, params.opacity)
      }
    },
    handleChangeBaseMap(name) {
      MyMap.methods.changeBaseMap(name)
    },
    getDisabled(data) {
      return !data.url && !(((data.children) || []).find(i => i.url))
    },
    handleCheck(node, checked) {
      let currentLeaf = this.$refs.allLayers.getCheckedNodes(true, false)
      if(checked.checkedKeys.indexOf(node.id)!==-1) {
        // 选中时的操作
        currentLeaf = currentLeaf.filter(i => {
          return this.listChecked.indexOf(i) === -1
        })
        currentLeaf.forEach(node => {
          this.$set(node, 'isHide', false)
          this.$set(node, 'opacity', 100)
          this.handleChangeLayer({layer: node, visible: true, opacity: 1})
        })
        this.listChecked.push(...currentLeaf)
      } else {
        // 取消选中时的操作
        if(node.children) {
          node.children.forEach(cnode => {
            this.listChecked.forEach((i,index) => {
              if(i.name===cnode.name) {
                this.handleChangeLayer({layer: i, visible: false, opacity: 1})
                this.listChecked.splice(index, 1)
              }
            })
          })
        } else {
          this.listChecked.forEach((i,index) => {
            if(i.name===node.name) {
              this.handleChangeLayer({layer: i, visible: false, opacity: 1})
              this.listChecked.splice(index, 1)
            }
          })
        }

      }
    },
    handleEmptyLayers() {
      this.listChecked = []
      this.$refs.allLayers.setCheckedNodes([])
      emptyAllLayers()
      this.dsxm_isAdd = false
      MyMap.methods.clearMap()
      this.pointSearchShow = false
    },
    handleLayerDelete(item) {
      this.handleChangeLayer({layer: item, visible: false, opacity: 1})
      this.listChecked.forEach((i, index) => {
        if (i.id === item.id) {
          this.listChecked.splice(index, 1)
        }
      })
      this.$refs.allLayers.setChecked(item, false, false)
    },
    handleLayerVisible(item) {
      if(item.isHide) {
        this.$set(item, 'isHide', false)
        this.handleChangeLayer({layer: item, visible: true, opacity: (item.opacity/100).toFixed(2)})
      } else {
        this.$set(item, 'isHide', true)
        this.handleChangeLayer({layer: item, visible: false, opacity: (item.opacity/100).toFixed(2)})
      }
    },
    handleLayerOpacity(val,item) {
      this.handleChangeLayer({layer: item, visible: !item.isHide, opacity: (val/100).toFixed(2)})
    },
    handleClosePointSearch() {
      this.pointSearchShow = false
    },
    handlePointSearchRes(params) {
      if(!params) {
        this.pointSearchShow = false
        return
      }
      let temp = {}
      for(let key in params.data) {
        if (params.title === 'nydxz'){
          let titleMapped = pointSearch_nydxz.find(i => new RegExp(`^${key}$`,'i').test(i.en))?.cn
          let title = params.title==="nydxz"? titleMapped: titleMapped||key
          if(title && params.data[key]) {
            if(title==='地块类型') {
              temp[title] = landTypeMap.get(params.data[key]) || params.data[key]
            } else if(title==='主体类型') {
              temp[title] = zhutiTypeMap.get(params.data[key]) || params.data[key]
            } else if(title==='面积') {
              temp[title] = params.data[key].toFixed(2) + "亩"
              // temp[title] = params.data[key]
            } else {
              temp[title] = params.data[key]
            }
          }
        }
        else if (params.title === 'gbzntxz'){
          let titleMapped = pointSearch_gbznt.find(i => new RegExp(`^${key}$`,'i').test(i.en))?.cn
          let title = params.title==="gbzntxz"? titleMapped: titleMapped||key
          if(title && params.data[key]) {
            temp[title] = params.data[key]
          }
        }
        else if (params.title === 'cwzs'){
          let titleMapped = pointSearch_cwzs.find(i => new RegExp(`^${key}$`,'i').test(i.en))?.cn
          let title = params.title==="cwzs"? titleMapped: titleMapped||key
          if(title && params.data[key]) {
            temp[title] = params.data[key]
          }
        }
        else if (params.title === 'nymd'){
          let titleMapped = pointSearch_nymd.find(i => new RegExp(`^${key}$`,'i').test(i.en))?.cn
          let title = params.title==="nymd"? titleMapped: titleMapped||key
          if(title && params.data[key]) {
            temp[title] = params.data[key]
          }
        }
        else if (params.title === 'nczjd'){
          let titleMapped = pointSearch_zjd.find(i => new RegExp(`^${key}$`,'i').test(i.en))?.cn
          let title = params.title==="nczjd"? titleMapped: titleMapped||key
          if(title && params.data[key]) {
            if(title==='面积') {
              temp[title] = params.data[key].toFixed(2) + "平方米"
              // temp[title] = params.data[key]
            }else {
              temp[title] = params.data[key]
            }
          }
        }
        else if(params.title === 'dsxm') {
          GetDsxmInfo(params.data[key]).then(res => {
            for(let resKey in res.data) {
              const titleCN = pointSearch_dsxm.find(i => i.en===resKey)?.cn
              if(titleCN)  {
                if(resKey==='xmztz') {
                  temp[titleCN] = res.data[resKey] + ' 万元'
                } else {
                  temp[titleCN] = res.data[resKey]
                }
              }
            }
          })
        }
        else{
          let title = key
          if(title && params.data[key]) {
            temp[title] = params.data[key]
          }
        }
      }
      this.pointSearchData = temp
      this.pointSearchShow = true
    },
    handleShowSubPanel(type) {
      if(type===this.subPanelShow) {
        this.subPanelShow = false
      } else {
        this.currentMenu = ''
        this.subPanelShow = type
      }
    },
    handleToMainPage() {
      this.subPanelShow = false
      this.handleChangePage(this.menuList[0])
    },
    handleToBusinessSys() {
      location.href = '/cmnw_xmsb/'
    },
    juanliandb(){
      let findObjLeft = this.judbArr.find(i => i.id === this.jldbForm.left)
      let findObjRight = this.judbArr.find(i => i.id === this.jldbForm.right)
      this.judbArr.forEach(it => {
        if (it.id !== this.jldbForm.left && it.id !== this.jldbForm.right ){
          addMapL(it.id,it.url,false,'tile')
        }
      })
      addMapL(findObjLeft.id,findObjLeft.url,true,'tile')
      addMapL(findObjRight.id,findObjRight.url,true,'tile')
      gldbMap(true,this.jldbForm.left,this.jldbForm.right)
    },
    closeJl(){
      let findJl = this.toolList.find(i => i.name === '卷帘')
      this.handleClickTool(findJl)
    },
    multiScreenLayerChange(index) {
      const currentLayer = this.hkyxArr.find(i => i.title===this.hkyxForm[index])
      MyMap.methods.addLayer(currentLayer,true,1,"map"+index)
    },
    townLine(name) {
      let action = {
        ActionName: "LayerQuery_Get",
        Parameters: {
          queryUrl: "http://10.108.3.5/ags_feature_svc/xzqh/FeatureServer/2/query",
          queryParams: "&outFields=*&returnGeometry=true",
          where: "name='"+name+"'",
          is_draw: true,
          is_clear: true,
          is_goto: true
        }
      };
      myBridge.bridgeContent.Invoke(action)
    }
  }
}
</script>

<style lang="scss" scoped>
#deck {
  .juanlian{
    .btn-form{
      text-align: center;
    }
    .el-button{
      margin-left: auto;
      height: 80px;
    }
    :deep{
      .el-select{
        width: 100%;
      }
      .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
        background: transparent;
      }
    }
    padding-right: 50px;
    padding-top: 100px;
    .close{
      color: #fff;
      position: absolute;
      top: 20px;
      right: 20px;

    }
    .el-button{
      color: #fff;
      border: 1px solid #008C75;
      background: transparent;
    }
    :deep{
      .el-input__icon{
        line-height: unset;
      }
      .el-form-item__label{
        color: #fff;
        line-height: 80px;

      }
      .el-input {
        //.input{
        //  display: flex;
        //  align-items: center;
        //}
        height: 80px;
        line-height: 80px;


        background: transparent;
        .el-input__inner {
          color: #fff !important;
          height: 100%;

          background: transparent;

          border: 1px solid #008C75;
        }
      }
    }
    z-index: 2;
    position: absolute;
    top: 185px;
    right:1060px;
    width: 700px;
  }
  position: relative;
  width: 100%;
  height: 100%;
  user-select: none;
  z-index: 1;

  .header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 189px;
    box-sizing: border-box;
    padding-bottom: 30px;
    background: url('../../assets/imgs/deck/bg-header.png') no-repeat;
    background-size: cover;
    background-position: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;

    .h-left {
      margin: 0 295px 0 50px;
      .hl-home {
        width: 50px;
        height: 50px;
      }
    }

    .h-center {
      display: flex;
      align-items: center;
      .hc-btn {
        font-size: 38px;
        font-weight: bold;
        font-style: italic;
        color: #02ACAB;
        cursor: pointer;
        &.highlight {
          color: #ffe566;
        }
        &:hover {
          transform: scale(1.1);
        }
      }
      .hc-title {
        margin: 0 300px;
        font-size: 80px;
        font-family: YSBTH;
        color: #fff;
        text-shadow: 2px 3px 0px rgba(17,20,22,0.22);
      }
    }

    .h-right {
      margin-right: 50px;
      display: flex;
      align-items: center;
      .hr-clock {
        span {
          display: block;
          text-align: right;
          font-size: 36px;
          font-family: YSBTH;
          color: #00CCCC;
          line-height: 40px;
        }
      }
      &>img {
        width: 45px;
        height: 45px;
        margin-left: 30px;
        cursor: pointer;
      }
    }
  }

  .menu {
    position: absolute;
    top: 185px;
    bottom: 30px;
    left: 30px;
    height: auto;
    width: 180px;
    padding: 40px 0;
    border: 1px solid #7FFFEA;
    background: rgba(0,58,64,0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    z-index: 3;
    &>li {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 107px;
        height: 106px;
        padding: 16px 15.5px;
        margin-bottom: 8px;
        &.highlight {
          width: 138px;
          height: 138px;
          padding: 0;
        }
      }
      span {
        font-size: 32px;
        font-family: YSBTH;
        color: #FFFFFF;
        line-height: 32px;
        opacity: 0.9;
      }
    }
  }

  .map-layers {
    position: absolute;
    top: 185px;
    left: 240px;
    bottom: 30px;
    z-index:3;
    .ml-all {
      position: absolute;
      left: 0;
      top: 0;
      width: 660px;
      height: 100%;
      border: 1px solid #7FFFEA;
      background: rgba(0,58,64,0.8);
      box-sizing: border-box;
      padding: 40px 20px 40px 40px;
      ::v-deep .tree-all-layers {
        flex: 1;
        overflow: auto;
        background-color: transparent;
        color: #fff;
        padding-right: 20px;
        .el-tree-node.is-current>.el-tree-node__content {
          background-color: transparent !important;
        }
        .el-tree-node__content {
          display: block;
          height: 70px;
          background: transparent !important;
          &:hover {
            background-color: transparent;
          }
          .el-tree-node__label {
            font-size: 28px;
            font-weight: bold;
            color: #FFFFFF;
          }
          &>.el-tree-node__expand-icon {
            font-size: 28px;
          }
          &>.el-checkbox {
            font-size: 26px;
            &.is-disabled {
              opacity: 0.5;
              &+.el-tree-node__label {
                opacity: 0.5;
              }
            }
            .el-checkbox__input {
              .el-checkbox__inner {
                width: 26px;
                height: 26px;
              }
              &.is-checked>.el-checkbox__inner::after {
                height: 19px;
                width: 9px;
                top: -3px;
                left: 6px;
              }
              &.is-indeterminate>.el-checkbox__inner::before {
                transform: scale(.7);
                top: 10px;
              }
            }

          }
        }
      }
    }
    .ml-current {
      position: absolute;
      top: 0;
      left: 690px;
      width: 660px;
      height: 600px;
      border: 1px solid #7FFFEA;
      background: rgba(0,58,64,0.8);
      box-sizing: border-box;
      padding: 50px 20px 50px 40px;
      display: flex;
      flex-direction: column;

      .cl-empty {
        position: absolute;
        right: 10px;
        top: 0;
        display: block;
        width: 32px;
        height: 32px;
        cursor: pointer;
        padding: 5px;
        background: url('@/assets/imgs/deck/page_nygh/btn-delete.png');
        background-size: cover;
      }

      &>ul {
        flex: 1;
        overflow-y: auto;
        padding-right: 15px;
        &>li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          &>span {
            font-size: 28px;
            color: #FFFFFF;
          }
          &>div {
            .btn {
              display: inline-block;
              width: 32px;
              height: 32px;
              cursor: pointer;
              padding: 5px;
              margin-left: 10px;
            }
            .btn-dqtc-show {
              background: url('@/assets/imgs/deck/page_nygh/btn-visible.png');
              background-size: cover;
            }
            .btn-dqtc-hide {
              background: url('@/assets/imgs/deck/page_nygh/btn-invisible.png');
              background-size: cover;
            }
            .btn-dqtc-close {
              background: url('@/assets/imgs/deck/page_nygh/btn-close.png');
              background-size: cover;
            }
            .btn-dqtc-opacity {
              background: url('@/assets/imgs/deck/page_nygh/btn-opacity.png');
              background-size: cover;
            }
          }
        }
      }
    }

    .ml-legend {
      position: absolute;
      bottom: 0;
      left: 690px;
      // min-width: 400px;
      width: max-content;
      border: 1px solid #7FFFEA;
      background: rgba(0,58,64,0.8);
      box-sizing: border-box;
      padding: 40px;
      display: flex;
      flex-direction: column;
      .box-title1 {
        margin-bottom: 30px;
      }
      &>ul {
        &>li {
          display: flex;
          align-items: center;
          &:not(:last-child) {
            margin-bottom: 20px;
          }
          i {
            display: block;
            margin-right: 20px;
            width: 24px;
            height: 24px;
          }
          span {
            font-size: 28px;
            color: #FFFFFF;
          }
        }
      }
    }
  }

  .tools {
    position: absolute;
    top: 189px;
    right: 30px;
    display: flex;
    flex-direction: column;
    z-index: 3;
    &>li {
      margin-bottom: 10px;
      cursor: pointer;
      img {
        width: 100px;
        height: 100px;
      }
    }
    &.has-right {
      right: 870px;
    }
  }

  .point-search {
    position: absolute;
    top: 185px;
    right: 160px;
    width: 700px;
    // max-width: 18vw;
    // height: 590px;
    display: flex;
    flex-direction: column;
    border: 1px solid #7FFFEA;
    background: rgba(0,58,64,0.8);
    box-sizing: border-box;
    padding: 45px 15px 40px 40px;
    z-index: 3;
    &.has-right {
      right: 1010px;
    }
    .box-title1 {
      margin-bottom: 35px;
    }
    .ps-list {
      flex: 1;
      overflow-y: auto;
      padding-right: 15px;
      &>li {
        height: 72px;
        background-color: rgba(255,255,255,0.1);
        display: flex;
        align-items: center;
        padding: 0 25px;
        &>span:first-child {
          display: block;
          width: 170px;
          margin-right: 50px;
          font-size: 28px;
          color: rgba(255, 255, 255, 0.7);
          text-align-last:justify;
          text-align:justify;
          text-justify:distribute-all-lines;
        }
        &>span:last-child {
          display: block;
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 28px;
          line-height: 30px;
          color: #FFFFFF;
        }
        &:not(:last-child) {
          margin-bottom: 18px;
        }
      }
    }
  }

  .multi-screen {
    .split-select {
      position: absolute;
      z-index: 99;
    }
    .split-select-1 {
      top: 180px;
      left: 1%;
    }
    .split-select-2 {
      top: 180px;
      left: 51%;
    }
    .split-select-3 {
      top: calc(50% + 25px);
      left: 1%;
    }
    .split-select-4 {
      top: calc(50% + 25px);
      left: 51%;
    }
  }

}
</style>
