<template>
  <div id="centerDiv" class="mapcontainer">
    <!-- 头部 -->
    <div class="el-header">
      <div class="app-name">{{ appName }}</div>

      <div class="header-info" style="z-index: 9999999999999999">
        <!-- 时间中心 -->
        <div class="time-info">
          <div class="time-time-info" style="margin-right: 15px">
            {{ time }}
          </div>
          <div class="time-time-info" style="margin-right: 15px">
            {{ date }}
          </div>
          <div class="time-time-info" style="margin-right: 15px">
            星期{{ workday }}
          </div>
        </div>

        <!-- 天气中心 -->
        <div class="weather-info">
          <div class="weater">{{ weater }}</div>
          <div class="temperature">{{ temperature }}</div>
        </div>

        <div class="newworkstate">
          网络状态：<span :style="{
            color: newworkstate == '网络正常' ? '#67C23A' : '#E6A23C',
          }">{{ newworkstate }}</span>
        </div>

        <!-- 退出按钮 -->
        <div class="logout-button" style="position: relative; z-index: 999999999999" @click="logout()"></div>
      </div>
    </div>
    <search v-if="finishLoadMap" />
    <!-- 快捷按钮 -->
    <div class="shortcut-button" id="shortcutbutton">
      <!-- <div class="quick-button" v-if="appTools['toolsbox']" @click="toolsShow = !toolsShow">常用工具</div> -->

      <!-- <div class="quick-button" v-if="appTools['uavbox']" @click="uavShow = !uavShow">视频巡航</div> -->

      <!-- <div class="quick-button" v-if="appTools['routebox']" @click="routeShow = !routeShow">路线规划</div> -->

      <!-- <div class="quick-button" v-if="appTools['monitorbox']" @click="monitorShow = !monitorShow">视频监控</div> -->

      <!-- <div class="quick-button" v-if="appTools['griderbox']" @click="griderShow = !griderShow">网格管理</div> -->

      <!-- <div class="quick-button" v-if="appTools['reportbox']" @click=" reportlistShow = !reportlistShow">线索上报</div>

          <div class="quick-button" @click="socketBoxVisible = !socketBoxVisible">现场人员</div> -->
    </div>

    <!-- 地图 -->
    <Map style="width: 100%; height: 100vh" :url="configUrl" :widgetUrl="widgetUrl" @onload="onMapload" />

    <!-- 图上测量 -->
    <div class="tools-boxs" v-if="toolsShow && appTools['toolsbox'] && finishLoadMap">
      <toolbox @historyShow="showHistoryLabel" @drawLable="drawLable"></toolbox>
    </div>

    <!-- 线索合并 -->
    <div class="merage-box" v-if="mergeboxShow && finishLoadMap" v-drag>
      <mergebox @wuzi="wuzi" @changeCurrentInfo="changeCurrentInfo" @clsoe="mergeboxShow = false" @success="mergeSuccess"
        :checkList="checkList" :checkNumber="checkNumber"></mergebox>
    </div>

    <!-- 工具箱 -->
    <div class="tools">
      <!-- 火情调度 -->
      <div class="situation" v-if="reportSituationShow">
        <div class="situation-info">
          <p>
            <span>火情描述：{{ currentInfo.describe }}</span>
          </p>
          <p>
            <span>上报人员：{{ currentInfo.reportPerson }}</span>
            <span style="float: right">上报时间：{{ currentInfo.reportTime }}</span>
          </p>
          <p>
            <span>预估火点：{{ currentInfo.address }} </span>
            <span>
              <el-button type="primary" size="mini" icon="el-icon-location-information"></el-button>
            </span>
          </p>
        </div>
        <div class="situation-tab-container">
          <div class="situation-tab" :style="{
            'border-bottom': active == 1 ? '3px solid #01D6D5' : '0px',
          }" @click="active = 1">
            火情动态
          </div>
          <div class="situation-tab" :style="{
            'border-bottom': active == 2 ? '3px solid #01D6D5' : '0px',
          }" @click="active = 2">
            任务下发
          </div>
          <div class="situation-tab" :style="{
            'border-bottom': active == 3 ? '3px solid #01D6D5' : '0px',
          }" @click="active = 3">
            附近水源
          </div>
          <div class="situation-tab" :style="{
            'border-bottom': active == 4 ? '3px solid #01D6D5' : '0px',
          }" @click="active = 4">
            物资调度
          </div>
        </div>
        <!-- 火情动态 -->
        <trendsbox v-show="active == 1"></trendsbox>

        <!-- 任务下发 -->
        <taskbox v-show="active == 2"></taskbox>
        <!--  -->
      </div>
    </div>
    <!-- 人员 -->
    <div class="personnel-container" v-drag v-if="personVisible && finishLoadMap">
      <personnel :fireData="currentInfo" @close="personVisible = false" @videoCall="videoCall">
      </personnel>
    </div>
    <!-- 物资 -->
    <div class="goods-container" v-if="goodsVisible" v-drag>
      <goodsbox :endLngLat="endLngLat" :firePopup='firePopupClosed' :visible='goodsVisible' @close="goodsVisible = false">
      </goodsbox>
    </div>
    <!-- 水源 -->
    <div class="water-container" v-if="waterVisible" v-drag>
      <waterbox
        :waterCenter="waterCenter"
        :firePopup = "firePopupClosed"
        @close="waterVisible = false"
      ></waterbox>
    </div>

    <!-- 网格化管理 -->
    <!-- <div class="grid-container" v-show="appTools['griderbox'] && griderShow">
      <gridbox></gridbox>
    </div> -->

    <div class="bottom-tools-container" style="display: none" v-if="finishLoadMap">
      <!-- 最优路线规划 -->
      <div class="route" v-show="routeShow && appTools['routebox']">
        <routebox></routebox>
      </div>

      <!-- 监控列表 -->
      <div class="monitor" v-if="monitorShow && appTools['monitorbox']">
        <monitorbox @showLCmonitorbox="showLCmonitorbox"></monitorbox>
      </div>

      <div class="monitor" v-if="videoCallShow">
        <div class="close-button" @click="videoCallShow = false">
          <i class="el-icon el-icon-close"></i>
        </div>
        <videocall @endVideoCall="endVideoCall"></videocall>
      </div>

      <div class="monitor" v-if="LCmonitorboxShow">
        <div class="close-button" @click="LCmonitorboxShow = false">
          <i class="el-icon el-icon-close"></i>
        </div>
        <LCmonitorbox v-if="LCmonitorboxShow" :deviceId="deviceId" :channelId="channelId"></LCmonitorbox>
      </div>
    </div>
    <!-- 右键点击设置 -->
    <div v-if="setVisibleShow">
      <rightclicksetting :type="rightType" :clickdata="setDatas" @close="rightType = 0"></rightclicksetting>
    </div>
    <!-- socket -->
    <div class="socket-container" v-if="socketBoxVisible && finishLoadMap">
      <socketDiaBox @close="socketBoxVisible = false" @videoCall="videoCall"></socketDiaBox>
    </div>
    <!-- 数据图层 -->
    <div class="layercontainer flex column jc-c ai-c" id="layercontainer" v-if="false">
      <div class="layerplugbox" v-if="layerPlugVisible">
        <layerPlugInUnit></layerPlugInUnit>
      </div>
      <div class="layerControlBtn flex ai-c jc-c cursor" @click="layerPlugVisible = !layerPlugVisible">
        <img style="width: 18px; height: 18px" src="/img/layercontrol.png" />
      </div>
    </div>
    <!-- 右侧弹窗 -->
    <div class="rightdiabox flex column jc-sb" v-if="rightDiaVisible && finishLoadMap">
      <div class="rightbox1">
        <rightEchartsData></rightEchartsData>
      </div>
      <div class="rightbox2" v-if="finishLoadMap">
        <!-- <fireClues></fireClues> -->
        <reportlist @close="reportlistShow = false" :mergeSuccessRandom="mergeSuccessRandom" @wuzi="wuzi"
          @shuiyuan="shuiyuan" @getTaskListSocket="getTaskList" @getlistSocket="reportlistShow = true"
          @jiankong="jiankong" @renyuan="renyuan" @merge="mergeboxShow = true" @changeCurrentInfo="changeCurrentInfo"
          :checkList="checkList" :checkNumber="checkNumber"></reportlist>
      </div>

      <div class="rightbox1" v-if="finishLoadMap">
        <uavbox></uavbox>
      </div>
    </div>
    <!-- 呼叫中心 -->
    <div class="callCenterBox" v-if="callCenterVisible && finishLoadMap">
      <callCenter @callUser="callUser" @getOnlineUser="onlineUserBoxShow = true"></callCenter>
    </div>
    <!-- 展开收起两边弹窗 -->
    <!-- <div class="diatoggleBtn" id="diatoggleBtn" @click="diaToggle"></div> -->

    <!-- 火情上报 -->
    <!-- <div class="report" v-if="appTools['reportbox']">
          <reportbox @getAllReportList="getAllReportList"></reportbox>
        </div> -->
    <!-- 任务下发 -->
    <div class="task" v-if="taskDeliveryShow && finishLoadMap" v-drag>
      <taskDelivery @closeTask="closeTask" :lng="tasklng" :lat="tasklat"></taskDelivery>
    </div>
    <!-- 脚部 -->
    <div class="footer" id="footer">
      <div class="base-layer-change-button" @click="addTileLayer('vec_d')">
        电子地图
      </div>
      <div class="base-layer-change-button" :style="{ 'margin-right': '40px' }" @click="addTileLayer('img_d')">
        卫星地图
      </div>
    </div>

    <!-- 呼叫中心 -->
    <div class="one-button-container" v-drag v-if="oneButtonCallShow">
      <div class="close-button" style="margin-right: 8px; z-index: 9999" @click="oneButtonCallShow = false">
        <i class="el-icon el-icon-close"></i>
      </div>
      <onebuttoncall></onebuttoncall>
    </div>
    <!-- 视频监控 -->
    <div style="
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0px;
        left: 0px;
        background: rgba(0, 0, 0, 0.6);
        z-index: 99999;
      " v-if="HKmonitorboxShow">
      <div class="close-button" style="
          position: absolute;
          top: calc(50% - 170px);
          left: calc(50% + 200px);
          transform: translate(-50%, -50%);
          z-index: 9999999999999999999;
        " @click="HKmonitorboxShow = false">
        <i class="el-icon el-icon-close"></i>
      </div>
      <HKmonitorbox v-if="HKmonitorboxShow" :deviceId="deviceId" :channelId="channelId"></HKmonitorbox>
    </div>

    <!-- 在线人员 -->
    <div class="online-user-container" v-drag v-if="onlineUserBoxShow">
      <div class="close-button" style="margin-right: 8px; z-index: 9999" @click="onlineUserBoxShow = false">
        <i class="el-icon el-icon-close"></i>
      </div>
      <Onlineuserbox></Onlineuserbox>
    </div>
  </div>
</template>

<script>
// 请求接口获取全部路由和工具箱信息
import { getModules } from "@/api/modules.js";

import AppConfigInfo from "../../../public/config/app.json";
import widgetJson from "../../../public/config/widget.json";
import feixianConfigJson from "../../../public/config/feixianConfig.json";
import { clearRouterFunc } from './lib/routePath'

import $ from "jquery";
import Map from "@/components/mars3d/Map.vue";
// import widgetdiv from '@/components/Widget/index.vue'
import Uavbox from "./widget/uavbox.vue";
import toolbox from "./widget/toolbox.vue";
import monitorbox from "./widget/monitorbox.vue";
import routebox from "./widget/routebox.vue";
import waterbox from "./widget/waterbox.vue";
// import reportbox from './widget/reportbox.vue'
import reportlist from "./widget/reportlist.vue";
import goodsbox from "./widget/goodsbox.vue";
import trendsbox from "./widget/trendsbox.vue";
import taskbox from "./widget/taskbox.vue";
// import gridbox from './widget/gridbox.vue';
import LCmonitorbox from "./widget/LCmonitorbox.vue";
import HKmonitorbox from "./widget/HKmonitorbox.vue";
import videocall from "./widget/videocallbox.vue";
import personnel from "./widget/personnel.vue";
import taskDelivery from "./widget/taskDelivery.vue";
import axios from "axios";
import jQuery from "jquery";
import mergebox from "./widget/mergebox.vue";
import rightclicksetting from "./widget/rightclick.vue";
import socketDiaBox from "./widget/socketdiabox.vue";
import layerPlugInUnit from "./widget/layerplug.vue";
import callCenter from "./widget/callcenter.vue";
// import fireClues from './widget/fireclues.vue';
import rightEchartsData from "./widget/rightechartsdata.vue";
import search from "./widget/search.vue";
import drag from "../../utils/draged";
import Onebuttoncall from "./widget/onebuttoncall.vue";
import Onlineuserbox from "./widget/onlineuserbox.vue";
import { getMethodCommon, postMethodCommon } from '../../api/common';
let BASE_URL = process.env.VUE_APP_BASE_API;
const areaName = localStorage.getItem("areaName");
export default {
  name: "home",
  components: {
    Map,
    // widgetdiv,
    Uavbox,
    toolbox,
    monitorbox,
    routebox,
    waterbox,
    // reportbox,
    goodsbox,
    reportlist,
    trendsbox,
    taskbox,
    // gridbox,
    LCmonitorbox,
    HKmonitorbox,
    mergebox,
    personnel,
    videocall,
    rightclicksetting,
    socketDiaBox,
    taskDelivery,
    layerPlugInUnit,
    callCenter,
    // fireClues,
    rightEchartsData,
    search,
    Onebuttoncall,
    Onlineuserbox,
  },

  data() {
    return {
      endLngLat: null,
      appName: null,
      appTools: null,
      toolsShow: true,
      routeShow: true,
      uavShow: true,
      monitorShow: true,
      griderShow: false,
      reportSituationShow: false,
      reportlistShow: false,
      waterCenter: null,
      date: null,
      time: null,
      workday: null,
      weater: null,
      temperature: null,
      newworkstate: null, //网络状态
      // configUrl: "config/config.json",
      configUrl: `config/${areaName}Config.json`,
      widgetUrl: "config/widget.json",
      tileLayer: null,
      active: 1,
      personVisible: false,
      goodsVisible: false,
      waterVisible: false,
      currentInfo: {},
      LCmonitorboxShow: false,
      HKmonitorboxShow: false,
      onlineUserBoxShow: false,
      deviceId: null,
      channelId: null,
      checkList: [],
      checkNumber: [],
      mergeboxShow: false,
      mergeSuccessRandom: 1,
      rightType: 0,
      setDatas: {},
      setVisibleShow: false,
      videoCallShow: false,
      socketBoxVisible: false,
      taskDeliveryShow: false,
      tasklng: "",
      tasklat: "",
      friePointLayer: null,
      layerPlugVisible: true,
      rightDiaVisible: true,
      callCenterVisible: true,
      oneButtonCallShow: false,
      finishLoadMap: false, // 地图加载完成
      firePopupClosed: false,
      taskGraphicLayer:null,
      taskList:[],
    };
  },

  mounted() { 

  
  },

  created() {
    let _this = this;
    window.AppConfig = AppConfigInfo[areaName];
    window.delTaskPoint  = this.delTaskPoint;
    this.appName = AppConfig.appname;
    this.appTools = AppConfig.tools;

    // 每秒更新日期时间
    setInterval(function () {
      _this.handlerTime();
    }, 1000);

    // 获取天气
    this.getWeater();

    // 获取网络状态
    this.getNetWorkState();

    //脱敏
    window.hiddenReadData = function (e) {
      e.innerHTML = e
        .getAttribute("data-phone")
        .replace(/(\d{3})\d*(\d{4})/, "$1****$2");
    };
    window.showReadData = function (e) {
      e.innerHTML = e.getAttribute("data-phone");
    };

    window.lookMonitorByMonitorLayer = this.lookMonitorByMonitorLayer;

    // 视频通话
    window.videoCall = this.videoCall;

    window.shuiyuan = this.shuiyuan;

    window.delFirePoint = this.delFirePoint;
  },
  watch: {
    waterVisible: {
      handler(newVal, oldVal) {
        if (!newVal) {
          clearRouterFunc()
        }
      },
      immediate: true
    },
    goodsVisible:{
      handler(newVal, oldVal) {
        if (!newVal) {
          clearRouterFunc()
        }
      },
      immediate: true
    }
  },
  methods: {
    showHistoryLabel(){
      this.rightType = 4;
      this.setVisibleShow = true;
    },
    drawLable(val) {
      this.setDatas = {
        title: "",
        lng: val.lng,
        lat: val.lat,
        iconUrl: null,
        remark: "",
      };
      switch (val.type) {
        case 1:
          this.setDatas.iconUrl = "火点";
          break;
        case 2:
          this.setDatas.iconUrl = "集合点";
          break;
        case 3:
          this.setDatas.iconUrl = "消防车";
          break;
        default:
          break;
      }
      this.rightType = 3;
      this.setVisibleShow = true;
    },
    getTaskList() { 
      getMethodCommon("/FireManagement/LoadAllTask",{
            pageIndex:1,
            pageSize:999,
          }).then(res=>{
            if(res.code == 200){
            this.taskList = res.data;
            this.drawTaskPoint();
          }
      })
    },
    // 绘制任务点图标
    drawTaskPoint(){
      if(this.taskGraphicLayer){
        this.taskGraphicLayer.clear();
      }else{
        this.taskGraphicLayer = new this.mars3d.layer.GraphicLayer();
        window.globalmap.addLayer(this.taskGraphicLayer);
      }
      this.taskList.forEach((item,index)=>{
        let graphic = new mars3d.graphic.BillboardEntity({
          position: [parseFloat(item.lng),parseFloat(item.lat)],
          style: {
            image: "/img/marktask.png",
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            clampToGround:true,
            scale:0.4,
            label: {
              text: "任务点",
              font_size: 14,
              color: "#ffffff",
              pixelOffsetY: 10,
              distanceDisplayCondition: true,
              distanceDisplayCondition_far: 500000,
              distanceDisplayCondition_near: 0
            }
          },
          "popup": `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
              <div class="marsTiltPanel-wrap">
                  <div class="area">
                      <div class="arrow-lt"></div>
                      <div class="b-t"></div>
                      <div class="b-r"></div>
                      <div class="b-b"></div>
                      <div class="b-l"></div>
                      <div class="arrow-rb"></div>
                      <div class="label-wrap">
                          <div class="title">任务信息</div>
                          <div class="label-content">
                              <div class="data-li">
                                  <div class="data-label">任务内容：${item.content? item.content:'暂无任务内容'}</div>
                              </div>
                               <div class="data-li">
                                  <div class="data-label">任务地点：</div>
                                  <div class="data-value"><span id="lablYeWei"  class="label-num">${item.lng},${item.lat}</span><span class="label-unit"></span>
                                  </div>
                              </div>
                              <div class="data-li">
                                  <div class="data-label">任务创建时间：</div>
                                  <div class="data-value"><span id="lablYeWei"  class="label-num">${item.taskTime}</span><span class="label-unit"></span>
                                  </div>
                              </div>
                              <div class="data-li">
                                    <div class="data-value">
                                        <span id="lablCSFM2" onclick="delTaskPoint(${item.id})"  class="label-tag data-value-status-3" title="删除任务点">删除任务点</span>
                                    </div>
                                </div>
                          </div>
                      </div>
                  </div>
                  <div class="b-t-l"></div>
                  <div class="b-b-r"></div>
              </div>
              <div class="arrow" ></div>
          </div>`,
          "popupOptions":{
            "offsetY":-30,
            "template":"{content}",
            "horizontalOrigin":"Cesium.HorizontalOrigin.LEFT",
            "verticalOrigin":"Cesium.VerticalOrigin.CENTER"
          },
          attr: { remark: "火点"}
        })  
        this.taskGraphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
      })
    },
    delTaskPoint(id){
      postMethodCommon("/FireManagement/DeleteFireTask",[id]).then(res=>{
          if(res.code==200){
            this.$message({
              type:"success",
              message:"删除成功"
            })
            this.getTaskList();
          }
      })
    },
    
    // 一件呼叫
    callUser() {
      this.oneButtonCallShow = true;
    },
    diaToggle() {
      if (this.callCenterVisible) {
        document.getElementById("diatoggleBtn").style.right = "25px";
        document.getElementById("layercontainer").style.left = "500px";
        document.getElementById("shortcutbutton").style.right = "25px";
        document.getElementById("footer").style.right = "25px";
        document.getElementById("toolBarRightTogg").style.right = "25px !important";
        document.getElementsByClassName("cesium-viewer-toolbar")[0].style.right = "25px !important";
        // widgetJson.openAtStart[1].css.right = "25px";
        // feixianConfigJson.map3d.control.compass.left = "25px";
      } else {
        document.getElementById("diatoggleBtn").style.right = "462px";
        document.getElementById("layercontainer").style.left = "25px";
        document.getElementById("shortcutbutton").style.right = "500px";
        document.getElementById("footer").style.right = "460px";
        document.getElementById("toolBarRightTogg").style.right = "500px !important";
        // widgetJson.openAtStart[1].css.right = "500px";
        // feixianConfigJson.map3d.control.compass.left = "500px";
      }

      // this.mars3d.widget.destroy();
      // this.mars3d.widget.init(window.globalmap, widgetJson, "/");
      // window.globalmap.options = feixianConfigJson.map3d;

      this.callCenterVisible = !this.callCenterVisible;
      this.rightDiaVisible = !this.rightDiaVisible;
      this.toolsShow = !this.toolsShow;
    },
    // 视频通话
    videoCall(phone) {
      localStorage.setItem("callerName", phone);
      this.videoCallShow = true;
    },
    endVideoCall() {
      localStorage.setItem("callerName", "");
      this.videoCallShow = false;
    },
    closeTask() {
      this.getTaskList();
      this.taskDeliveryShow = false;
    },
    mergeSuccess() {
      this.mergeboxShow = false;

      this.$message({
        type: "success",
        message: "合并成功！",
      });
      this.checkList = [];
      this.checkNumber = [];
      this.mergeSuccessRandom = Math.random();
      this.getFirePointList();
    },
    // 获取火点列表 地图展示
    getFirePointList() {
      axios({
        method: "get",
        url: BASE_URL + "/FireManagement/GetFireInfo",
        params: {
          id: 0,
        },
        headers: {
          "X-Token": localStorage.getItem("X-Token"),
        },
      }).then((res) => {
        if (res.data.code == 200) {
          this.drawFirePoint(res.data.data);
        }
      });
    },
    drawFirePoint(data) {
      if (this.friePointLayer == null) {
        this.friePointLayer = new this.mars3d.layer.GraphicLayer({ id: 999 });
        window.globalmap.addLayer(this.friePointLayer);
      } else {
        this.friePointLayer.clear();
      }
      data.forEach((item, index) => {
        let graphic = new mars3d.graphic.BillboardEntity({
          position: [parseFloat(item.lng), parseFloat(item.lat)],
          style: {
            image: "/img/markfire.png",
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            clampToGround: true,
            scale: 0.5,
            label: {
              text: "火点",
              font_size: 14,
              color: "#ffffff",
              pixelOffsetY: 10,
              distanceDisplayCondition: true,
              distanceDisplayCondition_far: 500000,
              distanceDisplayCondition_near: 0,
            },
          },
          popup: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
              <div class="marsTiltPanel-wrap">
                  <div class="area">
                      <div class="arrow-lt"></div>
                      <div class="b-t"></div>
                      <div class="b-r"></div>
                      <div class="b-b"></div>
                      <div class="b-l"></div>
                      <div class="arrow-rb"></div>
                      <div class="label-wrap">
                          <div class="title">火点信息</div>
                          <div class="label-content">
                              <div class="data-li">
                                  <div class="data-label">火点地址：${item.address}</div>
                              </div>
                              <div class="data-li">
                                  <div class="data-label">上报时间：</div>
                                  <div class="data-value"><span id="lablYeWei"  class="label-num">${item.createTime}</span><span class="label-unit"></span>
                                  </div>
                              </div>
                              <div class="data-li">
                                  <div class="data-value">
                                      <span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" >附近人员</span>
                                      <span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])"  class="label-tag data-value-status-2" >附近水源</span>
                                      <span id="lablCSFM2" onclick="wuzi([${item.lng},${item.lat}])"  class="label-tag data-value-status-2" >周边物资</span>
                                      <span id="lablCSFM2" onclick="delFirePoint(${item.id})"  class="label-tag data-value-status-3" title="删除火点">删除火点</span>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="b-t-l"></div>
                  <div class="b-b-r"></div>
              </div>
              <div class="arrow" ></div>
          </div>`,
          popupOptions: {
            offsetY: -30,
            template: "{content}",
            horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
            verticalOrigin: "Cesium.VerticalOrigin.CENTER",
          },
          attr: { remark: "火点" },
        });
        this.friePointLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
      });
    },
    // 乐橙监控
    showLCmonitorbox(e) {
      this.channelId = e.channelId;
      this.deviceId = e.deviceId;
      this.LCmonitorboxShow = true;
    },
    changeCurrentInfo(item) {
      this.currentInfo = item;
      // this.reportSituationShow = true;
    },
    getAllReportList() {
      this.reportlistShow = !this.reportlistShow;
    },
    // 退出登录
    logout() {
      // localStorage.setItem("X-Token", "");
      // window.location.reload();
      this.$router.push({ path: "/index" });
    },
    // 物资
    wuzi(item) {
      this.endLngLat = item;
      this.goodsVisible = true;
    },
    // 监控
    jiankong(e) {
      // this.deviceId = "8L0995DPAG5DF32";
      this.deviceId = e;
      this.channelId = "0";
      this.HKmonitorboxShow = true;
    },
    renyuan(item) {
      this.currentInfo.lng = item[0];
      this.currentInfo.lat = item[1];
      this.personVisible = !this.personVisible;
    },
    // 水源
    shuiyuan(item) {
      this.waterCenter = item;
      this.waterVisible = !this.waterVisible;
    },
    // 删除火点
    delFirePoint(id) {
      axios({
        method: "post",
        url: BASE_URL + "/FireManagement/DeleteFireInfo?id=" + id,
        headers: {
          "X-Token": localStorage.getItem("X-Token"),
        },
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功",
          });
          this.getFirePointList();
        }
      });
    },
    // 地图构造完成回调
    onMapload(map) {
      let _self = this;
      window.globalmap = map;
      this.finishLoadMap = true;
      map.on(this.mars3d.EventType.click, this.onMapClick);
      map.on(this.mars3d.EventType.clickTileGraphic, this.onMapClick);
      // 创建entity图层
      _self.graphicLayer = new this.mars3d.layer.GraphicLayer({
        pid: 88,
      });
      //监听pop弹窗
      _self.handlerlistenPopup(map);
      map.addLayer(_self.graphicLayer);
      // 灭火专班
      let graphic = new mars3d.graphic.BillboardEntity({
        position:
          localStorage.getItem("areaName") == "feixian"
            ? [118.031537, 35.43147, 246]
            : [117.838645, 35.503401, 248.7],
        style: {
          image:
            "/img/miehuozhuanban-" + localStorage.getItem("areaName") + ".png",
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          clampToGround: true,
          scale: 0.7,
          label: {
            text: "森林防灭火指挥中心",
            font_size: 14,
            color: "#ffffff",
            pixelOffsetY: 10,
            distanceDisplayCondition: true,
            distanceDisplayCondition_far: 500000,
            distanceDisplayCondition_near: 0,
          },
        },
        attr: { remark: "森林防灭火指挥中心" },
      });

      _self.graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)

      _self.bindShowTilesParts();
      const mapContextmenuItems = [
        {
          text: "设为火点",
          show: function (e) {
            return Cesium.defined(e.cartesian);
          },
          callback: (e) => {
            const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
            let url =
              "https://restapi.amap.com/v3/geocode/regeo?key=" +
              AppConfigInfo.gaodeApi +
              "&location=" +
              mpt._lng +
              "," +
              mpt._lat +
              "&extensions=base";
            axios({
              method: "get",
              url: url,
            })
              .then((res) => {
                let name = res.data.regeocode.formatted_address;
                this.setDatas = {
                  address: name,
                  lng: mpt._lng,
                  lat: mpt._lat,
                  describe: "",
                  areaname: localStorage.getItem("areaName"),
                  sourceType: 5,
                };
                this.rightType = 1;
              })
              .catch((err) => {
                console.log("ee", err);
              });

            this.setVisibleShow = true;
          },
        },
        {
          text: "设为任务点",
          show: function (e) {
            return Cesium.defined(e.cartesian)
          },
          callback: (e) => {
            const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
            this.tasklng = mpt._lng
            this.tasklat = mpt._lat
            this.taskDeliveryShow = true
          }
        },
        {
          text: "查找周边",
          show: function (e) {
            return Cesium.defined(e.cartesian);
          },
          children: [
            {
              text: "人员",
              callback: (e) => {
                const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
                console.log("aaa", mpt);
                this.currentInfo = {
                  lng: mpt._lng,
                  lat: mpt._lat,
                };
                this.personVisible = true;
                this.goodsVisible = false;
                this.waterVisible = false;
              },
            },
            {
              text: "物资",
              callback: (e) => {
                const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
                this.endLngLat = [mpt._lng, mpt._lat];
                this.goodsVisible = true;
                this.waterVisible = false;
                this.personVisible = false;

              },
            },
            {
              text: "水源",
              callback: (e) => {
                const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
                this.waterCenter = [mpt._lng, mpt._lat];
                this.waterVisible = true;
                this.goodsVisible = false;
                this.personVisible = false;
                clearRouterFunc()
              },
            },
          ],
        },
        {
          text: "添加标注",
          // show: function (e) {
          //   return Cesium.defined(e.cartesian)
          // },
          children: [
            {
              text: "火点",
              callback: (e) => {
                const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
                this.setDatas = {
                  title: "",
                  lng: mpt._lng,
                  lat: mpt._lat,
                  iconUrl: "火点",
                  remark: "",
                };
                this.rightType = 3;
                this.setVisibleShow = true;
              },
            },
            {
              text: "集合点",
              callback: (e) => {
                const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
                this.setDatas = {
                  title: "",
                  lng: mpt._lng,
                  lat: mpt._lat,
                  iconUrl: "集合点",
                  remark: "",
                };
                this.rightType = 3;
                this.setVisibleShow = true;
              },
            },
            {
              text: "消防车",
              callback: (e) => {
                const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
                this.setDatas = {
                  title: "",
                  lng: mpt._lng,
                  lat: mpt._lat,
                  iconUrl: "消防车",
                  remark: "",
                };
                this.rightType = 3;
                this.setVisibleShow = true;
              },
            },
            // {
            //   text: "箭头",
            //   callback: (e) => {
            //     const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
            //     this.setDatas = {
            //       title: '',
            //       lng: mpt._lng,
            //       lat: mpt._lat,
            //       iconUrl:'箭头',
            //       remark: ''
            //     }
            //     this.rightType = 3
            //     this.setVisibleShow = true
            //   }
            // }
          ],
        },
      ];
      map.bindContextMenu(mapContextmenuItems);

      // 查询火点
      _self.getFirePointList();
      // 查询任务点
      _self.getTaskList();
    },
    //监听点击图层事件
    handlerlistenPopup(map) {
      let _this = this
      map.on(mars3d.EventType.popupOpen, function (event) {
        if (event.graphic && event.graphic.options && event.graphic.options.attr.remark == "火点") {
          _this.firePopupClosed = false;
        }
      });
      map.on(mars3d.EventType.popupClose, function (event) {
        if (event.graphic && event.graphic.options && event.graphic.options.attr.remark == "火点") {
          _this.firePopupClosed = true;
        }
      })
    },
    onMapClick(e) { },
    // 当前日期时间
    handlerTime() {
      let date = new Date();
      this.time =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
        ":" +
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":" +
        (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
      this.date =
        date.getFullYear() +
        "-" +
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) +
        "-" +
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
      let workdays = ["日", "一", "二", "三", "四", "五", "六"];
      this.workday = workdays[date.getDay()];
    },
    // 当前天气
    getWeater() {
      let _this = this;
      jQuery.ajax({
        url: "https://api.asilu.com/weather/",
        type: "GET",
        dataType: "jsonp",
        data: {
          city: AppConfig.area,
          key: "adfdb863ddb1101bb6b40c0700d6203b",
        },
        success: function (res) {
          _this.weater = res.weather[0].weather;
          _this.temperature = res.weather[0].temp;
        },
      });
    },
    // 获取网络状态
    getNetWorkState() {
      if (window.navigator.onLine) {
        this.newworkstate = "网络正常";
      } else {
        this.newworkstate = "网络断开";
      }
      let _this = this;
      window.addEventListener("online", function (e) {
        _this.newworkstate = "网络正常";
      });
      window.addEventListener("offline", function (e) {
        _this.newworkstate = "网络断开";
        _this.$message({
          type: "error",
          message: "网络已断开！",
        });
      });
    },
    // 添加天地图
    addTileLayer(layer) {
      this.removeTileLayer();
      this.tileLayer = new mars3d.layer.TdtLayer({
        name: "天地图影像注记",
        layer: layer,
        key: ["b6585bc41ee16251dbe6b1af64f375d9"],
        zIndex: 1,
      });
      window.globalmap.addLayer(this.tileLayer);
    },
    // 移除底图
    removeTileLayer() {
      if (this.tileLayer) {
        this.tileLayer.remove(true);
        window.globalmap.removeLayer(this.tileLayer, true);
        this.tileLayer = null;
      }
    },
    // 邦定地图点击事件
    bindShowTilesParts() {
      let _this = this;
      window.globalmap.on(mars3d.EventType.clickGraphic, function (event) {
        _this.loadUserList(event);
      });
    },
    // 点击事件获取人员
    loadUserList(event) {
      console.log("event222", event);
      let layerName = event.layer.options.name;
      // 如果是监控图层
      if (layerName == "视频监控") {
        console.log("event.graphic.options.attr", event.graphic.options.attr);
        this.deviceId = event.graphic.options.attr["cameraindexcode"];
        this.channelId = event.graphic.options.attr["channelno"];
        this.HKmonitorboxShow = true;
        return;
      }
      if (
        layerName == "视频监控(86处)" ||
        layerName == "林区监控" ||
        layerName == "语音卡口"
      ) {
        console.log("event:::", event);
        // this.getMonitorList(event.graphic.options.position[0],event.graphic.options.position[1]);
        this.getMonitorList(
          event.graphic.options.attr.lng,
          event.graphic.options.attr.lat
        );
        return;
      }
      // 其他图层
      let queryName = event.graphic.options.attr["name2"];
      let url = null;
      switch (layerName) {
        case "检查点":
          url = "/FirePrevention/LoadjianchadianUser";
          break;
        case "检查站(87处)":
          url = "/FirePrevention/LoadpyjianchadianUser";
          break;
        case "瞭望台":
          url = "/FirePrevention/Loadliaowangtaiuser";
          break;
        case "护林点":
          url = "/FirePrevention/LoadhulindianUser";
          break;
        case "防火驿站":
          url = "/FirePrevention/Loadfanghuoyizhanuser";
          break;
        case "向导":
          url = "/FirePrevention/Loadxiangdaouser";
          break;
      }
      if (url) {
        // 查询人员列表
        this.loadUserListApi(url, queryName);
      }
    },
    // 获取监控
    getMonitorList(lng, lat) {
      axios({
        method: "get",
        params: {
          lng: lng,
          lat: lat,
        },
        url: BASE_URL + "/Camera/GetCameraInfoByPoint",
      }).then((res) => {
        if (res.data.code == 200) {
          res.data.data.forEach((item, index) => {
            $(".popup-container").append(
              "<div onclick='lookMonitorByMonitorLayer(" +
              item.type +
              ',"' +
              item.num +
              '",' +
              item.road +
              ");' class='monitor-btn' data-channelId='" +
              item.type +
              "' data-deviceId=" +
              item.id +
              " style='padding:4px 8px;text-align:center;font-size:14px;border-radius:2px;background:#108eff;color:#fff;margin:6px 0px;cursor:pointer;'><img src='/img/monitor-video.png' width='24px' style='position:relative;top:-2px;left:-4px;'/>" +
              item.name +
              "</div>"
            );
          });
        }
      });
    },
    // 获取人员
    loadUserListApi(url, queryName) {
      axios({
        method: "get",
        params: {
          area: queryName,
        },
        url: BASE_URL + url,
      }).then((data) => {
        if (data.data.code == 200) {
          data.data.data.forEach((item, index) => {
            $(".popup-container").append(
              `<div class='popup-item'>
                ${item.username}&nbsp;&nbsp; 
                <span data-phone='${item.phone
              }' onmouseenter='showReadData(this);' onmouseleave='hiddenReadData(this);'>
                  ${item.phone.replace(/(\d{3})\d*(\d{4})/, "$1****$2")}
                </span>
                &nbsp;&nbsp;${item.area}&nbsp;&nbsp;${item.usertype}
               </div>
              `
            );
          });
        }
      });
    },
    // 监控信息
    lookMonitorByMonitorLayer(type, id, road) {
      if (type == 1) {
        //乐橙
        this.channelId = road;
        this.deviceId = id;
        this.LCmonitorboxShow = true;
      } else if (type == 2) {
        //海康
        this.channelId = road;
        this.deviceId = id;
        this.HKmonitorboxShow = true;
      }
    },
  },
  destroyed() {
    // 隐藏图层按钮
    let opt = {
      "name": "图层",
      "icon": "fa fa-tasks",
      "widget": "widgets/manageLayers/widget.js",
      "uri": "widgets/manageLayers/widget.js"
    }
    window.mars3d.widget.disable(opt);
  },

};
</script>

<style scoped>
.mapcontainer{
  width:100vw;
  height:100vh;
  overflow: hidden;
}
.el-header {
  width: 100%;
  height: 90px;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 999;
  background-image: url("/img/header.png");
  background-size: 100% 80px;
}

.app-name {
  min-width: 200px;
  height: 80px;
  color: #fff;
  line-height: 70px;
  margin-left: 80px;
  font-size: 30px;
  font-weight: 600;
  background-image: linear-gradient(180deg, #b8ffff, #ddffff);
  -webkit-background-clip: text;
  color: transparent;
}

.header-info {
  min-width: 660px;
  height: 30px;
  position: absolute;
  top: 30px;
  right: 0px;
}

.weather-info {
  width: 140px;
  height: 25px;
  line-height: 24px;
  color: #fff;
  float: left;
  text-align: center;
  padding: 0px 10px;
  position: relative;
}

.weather-info::after {
  content: "";
  width: 2px;
  height: 14px;
  top: 6px;
  background: #b8ffff;
  position: absolute;
  right: 0px;
}

.weather-info .weater {
  font-size: 14px;
  float: left;
}

.time-info {
  width: 220px;
  height: 25px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  float: left;
  margin: 0px 10px;
  margin-right: 10px;
  position: relative;
}

.time-info::after {
  content: "";
  width: 2px;
  height: 14px;
  top: 6px;
  background: #b8ffff;
  position: absolute;
  right: 0px;
}

.time-info .time-time-info {
  font-size: 14px;
  float: left;
}

.newworkstate {
  float: left;
  height: 25px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  padding: 0px 10px;
}

.logout-button {
  width: 95px;
  height: 25px;
  background-image: url(/img/logout-bg.png);
  background-size: 95px 25px;
  float: right;
  cursor: pointer;
  float: left;
  position: relative;
  top: 0px;
  left: 20px;
  cursor: pointer;
  z-index: 999999999999999999999999999;
}

/* 快捷按钮 */
.shortcut-button {
  width: 140px;
  min-height: 140px;
  position: absolute;
  top: 210px;
  right: 500px;
  z-index: 9999;
}

.shortcut-button .quick-button {
  width: 140px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background-image: url(/img/tool-button-bg.png);
  background-size: 140px 40px;
  margin-bottom: 20px;
  cursor: pointer;
}

.tools {
  min-width: 250px;
  height: 10px;
  position: absolute;
  top: 130px;
  left: 25px;
}

.task {
  width: 480px;
  height: calc(100vh - 750px);
  position: absolute;
  right: 450px;
  top: 300px;
}

.tools-box {
  width: 250px;
  height: 100%;
  float: left;
  margin-right: 15px;
}

.tools-boxs {
  width: 420px;
  height: calc(100% - 640px);
  position: absolute;
  bottom: 50px;
  left: 25px;
}

.huoqing-box {
  width: 480px;
  height: 360px;
  position: absolute;
  top: 130px;
  left: 25px;
  z-index: 99;
}

.merage-box {
  width: 480px;
  height: 360px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}

.grid-container {
  width: 1200px;
  padding-top: 100px;
  height: 560px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-image: url(/img/wg-bg.png);
  background-size: 100% 100%;
  transform: translate(-50%, -50%);
  z-index: 2000;
}

.personnel-container {
  width: 525px;
  height: 735px;
  position: absolute;
  top: 50%;
  left: 20px;
  background-image: url(/img/person.png);
  background-size: 100% 100%;
  transform: translate(0, -50%);
  z-index: 2000;
}

.goods-container {
  width: 603px;
  height: 457px;
  position: absolute;
  top: 50%;
  left: 20px;
  background-image: url(/img/goods.png);
  background-size: 100% 100%;
  transform: translate(0, 0);
  z-index: 2000;
}

.water-container{
  width: 603px;
  height: 457px;
  position: absolute;
  top: 100px;
  left: 20px;
  background-image: url(/img/goods.png);
  background-size: 100% 100%;
  transform: translate(0, 0);
  z-index: 2000;
}

.socket-container {
  width: 500px;
  height: 457px;
  position: absolute;
  top: 50%;
  left: 20px;
  background-image: url(/img/goods.png);
  background-size: 100% 100%;
  transform: translate(0, -50%);
  z-index: 2000;
}

.bottom-tools-container {
  min-width: 200px;
  height: 200px;
  position: absolute;
  bottom: 60px;
  left: 25px;
  z-index: 1999;
}

.uav {
  width: 250px;
  height: 200px;
  float: left;
  margin-right: 15px;
}

/* 监控 */
.monitor {
  width: 340px;
  height: 200px;
  float: left;
  margin-right: 15px;
  position: relative;
}

.close-button {
  position: absolute;
  right: 20px;
  top: 14px;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
  width: 20px;
  height: 20px;
  background: #0abfb5cc;
  line-height: 20px;
  text-align: center;
}

/* 火情调度 */
.situation {
  width: 480px;
  height: 100%;
  float: left;
  margin-right: 15px;
  background-image: url(/img/tool-bg.png);
  background-size: 100% 100%;
  padding: 15px 15px 0px 15px;
}

.situation-info {
  color: #eee;
  line-height: 18px;
  padding: 10px 10px 0px 10px;
}

.situation-tab-container {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #2f5d55;
  margin: 0px auto;
}

.situation-tab {
  width: 70px;
  font-size: 12px;
  height: 50px;
  line-height: 50px;
  color: #0abfb5;
  float: left;
  cursor: pointer;
  text-align: center;
}

/* 最有路线 */
.route {
  width: 325px;
  height: 200px;
  float: left;
  margin-right: 15px;
}

/* 附近水源地 */
.water {
  width: 325px;
  height: 455px;
  position: absolute;
  left: 400px;
  top: 200px;
}

/* 火情上报 */
.report {
  position: absolute;
  width: 340px;
  height: 140px;
  bottom: 100px;
  right: 70px;
}

.footer {
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0px;
  right: 460px;
  background-size: 1920px 50px;
  background-position: 1920px 0px;
  z-index: 99999;
}

.footer .base-layer-change-button {
  float: right;
  width: 150px;
  height: 40px;
  background-image: url(/img/base-layer-button-bg.png);
  background-size: 150px 40px;
  text-align: center;
  line-height: 40px;
  position: relative;
  top: -40px;
  right: 0px;
  font-size: 16px;
  cursor: pointer;
  color: #ffffff;
}

.layercontainer {
  position: absolute;
  z-index: 9;
  left: 460px;
  bottom: 50px;
  width: 56px;
  display: none;
}

.layerplugbox {
  width: 100%;
  margin-bottom: 20px;
}

.layerControlBtn {
  width: 56px;
  height: 56px;
  border-radius: 56px;
  background: linear-gradient(180deg, #062020 0%, #041515 100%);
}

.callCenterBox {
  position: fixed;
  left: 25px;
  top: 110px;
  z-index: 9;
  width: 421px;
  height: 462px;
  background-image: url(/img/callcenter.png);
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 15px;
}

.rightdiabox {
  width: 420px;
  height: calc(100% - 135px);
  position: absolute;
  right: 25px;
  bottom: 50px;
  z-index: 9;
}

.rightbox1 {
  height: 32%;
  background-image: url(/img/commonbg1.png);
  background-size: 100% 100%;
}

.rightbox2 {
  height: 33%;
  background-image: url(/img/commonbg1.png);
  background-size: 100% 100%;
}

.diatoggleBtn {
  width: 32px;
  height: 32px;
  background-image: url(/img/togglebg.png);
  background-size: 100% 100%;
  position: absolute;
  right: 462px;
  bottom: 115px;
  z-index: 9;
  cursor: pointer;
}

.one-button-container {
  width: 1000px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

.online-user-container {
  width: 800px;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999999999;
}
</style>
