<template>
  <div class="box">
    <div class="box-title">火情线索</div>
    <!-- <div class="close-button" @click="close">
          <i class='el-icon el-icon-close'></i>
      </div> -->
    <div class="box-container">
      <div class="draw" v-show="active == 1">
          <div style="width:100%;padding-top:20px;text-align:center;" v-if="list.length<=0">
              <img src="/img/homeimg/empty.png" alt="">
          </div>
        <div class="news" v-for="(item, index) in list" :key="index">
          <div
            class="checkbox-container"
            @click="checkNews(index)"
            :key="checkRandom"
          >
            <i class="el-icon el-icon-check" v-show="item.check"></i>
          </div>
          <div class="news-container">
            <div class="title">
              <div class="title-title">
                {{ item.reportPerson }}上报了一条火情线索
              </div>
              <div
                class="daohang"
                style="
                  height: 24px;
                  text-align: center;
                  line-height: 24px;
                  border-radius: 0px;
                  float: right;
                  color: #fff;
                  position: relative;
                  top: 8px;
                  cursor: pointer;
                "
              >
                编号：{{ item.clueNo }}
              </div>
            </div>
            <p class="desc">
              <span class="time"
                >上报时间：<span style="color: #aaa">{{
                  item.reportTime
                }}</span></span
              >
              <!-- &nbsp;&nbsp;&nbsp;
              <span class="time"
                >上报人员：<span style="color: #aaa">{{
                  item.reportPerson
                }}</span></span
              > -->
            </p>
            <p class="desc">
              <span
                >火情描述：<span style="color: #aaa">{{
                  item.describe
                }}</span></span
              >
              <el-button
                type="warning"
                size="mini"
                style="float: right; position: relative; top: -12px"
                @click="toPosition(item)"
                >位置</el-button
              >
            </p>
          </div>
        </div>
      </div>
    </div>
    <div style="text-align: right; margin: 0px 28px">
      <el-button type="primary" size="mini" @click="merage">线索合并</el-button>
      <el-button type="warning" size="mini" @click="deal"
        >标为误报线索</el-button
      >
    </div>
  </div>
</template>

<script>
let BASE_URL = process.env.VUE_APP_BASE_API;
import { postMethodCommon, getMethodCommon } from "../../../api/common";
import { isJson } from "../../../utils/index";
export default {
  name: "toolbox",
  props: ["checkList", "checkNumber", "mergeSuccessRandom"],
  data() {
    return {
      active: 1,
      list: [],
      listParams: {
        areaname: localStorage.getItem("areaName"),
      },
      graphicLayer: null,
      graphicPoint: null,
      graphicWinodw: null,
      checkRandom: 1111,
    };
  },
  watch: {
    mergeSuccessRandom: function (e) {
      this.checkList = [];
      this.checkNumber = [];
      this.getList();
    },
  },
  created() {
    
    window.wuzi = this.wuzi;
    window.shuiyuan = this.shuiyuan;
    window.jiankong = this.jiankong;
    window.renyuan = this.renyuan;
  },
  mounted() {
    this.getList();
    window.addEventListener("onmessageWS", this.getSocketData);
  },
  methods: {
    deal() {
      let params = this.checkNumber.map((e) => e.id);
      postMethodCommon("/FireManagement/BatchUpdatFireStatue", params).then(
        (res) => {
          this.$message({
            type: "success",
            message: "设置成功",
          });
          this.getList();
        }
      );
    },
    merage() {
      this.$emit("merge");
    },
    close() {
      if (this.graphicLayer) {
        this.graphicLayer.clear();
      }
      this.$emit("close");
    },
    jiankong(e) {
      this.$emit("jiankong", e);
    },
    shuiyuan(e) {
      this.$emit("shuiyuan", e);
    },
    wuzi(e) {
      this.$emit("wuzi", e);
    },
    renyuan(e) {
      this.$emit("renyuan", e);
    },
    getInfo(active) {
      this.listQuery.state = active;
      this.active = active;
      this.getList();
    },
    checkNews(index) {
      this.list[index].check = !this.list[index].check;
      this.getCheckList(this.list[index].check, this.list[index].clueNo);
      this.getCheckNumber(this.list[index].check, this.list[index]);
      this.checkRandom = Math.random() * 100000000;
      console.log(this.list);
    },
    getCheckList(type, id) {
      if (type) {
        let idx = this.checkList.lastIndexOf(id);
        if (idx == -1) {
          this.checkList.push(id);
        } else {
        }
      } else {
        let idx = this.checkList.lastIndexOf(id);
        this.checkList.splice(idx, 1);
      }
    },
    getCheckNumber(type, options) {
      let idx = null;
      if (type) {
        let obj = this.checkNumber.find((item, index) => {
          return options.id == item.id;
        });

        if (!obj) {
          this.checkNumber.push(options);
        } else {
        }
      } else {
        this.checkNumber.forEach((item, index) => {
          if (item.id == options.id) {
            idx = index;
          }
        });
        this.checkNumber.splice(idx, 1);
      }

      console.log("checknumber", this.checkNumber);
    },

    getList() {
      getMethodCommon(
        "/FireManagement/LoadFireClueInfoByState",
        this.listParams
      ).then((res) => {
        this.list = res.data;
        this.list.forEach((item, index) => {
          this.list[index].check = false;
        });
        if (this.list.length == 0) {
          if (this.graphicLayer) {
            this.graphicLayer.clear();
          }
        } else {
          if (window.globalmap) {
            this.drawPoint();
          }
        }
      });
    },
    drawPoint() {
      console.log(this.list);
      let _self = this;
      if (!_self.graphicLayer) {
        _self.graphicLayer = new this.mars3d.layer.GraphicLayer({
          pid: 88,
        });
        window.globalmap.addLayer(_self.graphicLayer);
      }
      _self.graphicLayer.clear();
      _self.list.forEach((item, index) => {
        let jiankongDisplay = item.sourceTypeName == "摄像机" ? "" : "none";

        let graphicPoint = new mars3d.graphic.DivLightPoint({
          position: [parseFloat(item.lng), parseFloat(item.lat)],
          style: {
            color: "#f33349",
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
              0,
              200000
            ), // 按视距距离显示
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          },
          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">${item.address}</div>
                                <div class="label-content">
                                    <div class="data-li">
                                        <div class="data-label">火情描述：${item.describe}</div>
                                    </div>
                                    <div class="data-li">
                                        <div class="data-label">上报时间：</div>
                                        <div class="data-value"><span id="lablYeWei"  class="label-num">${item.reportTime}</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="lablCSFM3" onclick="wuzi([${item.lng},${item.lat}])"  class="label-tag data-value-status-2" >周边物资</span>
                                            <span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" 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: 0,
            template: "{content}",
            horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
            verticalOrigin: "Cesium.VerticalOrigin.CENTER",
          },
        });
        _self.graphicLayer.addGraphic(graphicPoint);

        
        let graphicWinodw = new mars3d.graphic.DivGraphic({
          position: [parseFloat(item.lng), parseFloat(item.lat)],
          style: {
            html: `<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">${item.address}</div>
                                <div class="label-content">
                                    <div class="data-li">
                                        <div class="data-label">火情描述：${item.describe}</div>
                                    </div>
                                    <div class="data-li">
                                        <div class="data-label">上报时间：</div>
                                        <div class="data-value"><span id="lablYeWei"  class="label-num">${item.reportTime}</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="lablCSFM3" onclick="wuzi([${item.lng},${item.lat}])"  class="label-tag data-value-status-2" >周边物资</span>
                                            <span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" 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>`,
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
              0,
              200000
            ), // 按视距距离显示
            scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
            clampToGround: true,
          },
          pointerEvents: true, // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
        });
        // _self.graphicLayer.addGraphic(graphicWinodw);
      });
    },
    toPosition(item) {
      let lngLat = [item.lng,item.lat]
      window.globalmap.flyToPoint(lngLat,{radius:2000,"pitch":-90});
    },
    getSocketData(res) {
      let _this = this;
      if (!isJson(res.detail.data)) return;
      let obj = JSON.parse(res.detail.data);
      if (obj.Module) {
        if (obj.Module == "火情信息") {
          _this.getList();
          _this.$emit("getlistSocket");
        }
      }
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}

.box-title {
  width: 100%;
  height: 55px;
  line-height: 55px;
  text-indent: 28px;
  overflow: hidden;
  color: #eee;
  text-align: left;
  font-size: 18px;
}
.title-title {
  width: 200px;
  height: 40px;
  overflow: hidden;
  float: left;
}
.tab-container {
  width: 210px;
  height: 60px;
  border-bottom: 1px solid #2f5d55;
  padding-top: 10px;
  margin: 0px auto;
}
.tab-button {
  width: 70px;
  font-size: 12px;
  height: 50px;
  line-height: 50px;
  color: #0abfb5;
  float: left;
  cursor: pointer;
}

.box-container {
  width: calc(100% - 20px);
  margin: 0px 15px;
  margin-bottom: 10px;
  height: calc(100% - 120px);
  overflow-y: auto;
}
.news {
  width: calc(100% - 10px);
  line-height: 18px;
  padding: 6px 15px 10px 15px;
  text-align: left;
  color: #ccc;
  background: #082929;
  margin: 6px 0px;
}
.news::after {
  content: "";
  clear: both;
  display: block;
  height: 0px;
  overflow: hidden;
}
.checkbox-container {
  width: 18px;
  height: 18px;
  position: relative;
  top: 12px;
  margin-right: 10px;
  float: left;
  background: rgba(2, 0, 77, 0.4);
  box-shadow: inset 0px 0px 34px 0px #a15e01;
  border: 1px solid #f18b00;
  cursor: pointer;
}
.news-container {
  width: calc(100% - 50px);
  float: left;
}
.news .title {
  line-height: 40px;
  height: 40px;
  overflow: hidden;
  color: #e48f19;
  margin-bottom: 12px;
  position: relative;
}

.news .title::after {
  content: "";
  width: 100%;
  height: 0px;
  border: 0.5px solid;
  position: absolute;
  bottom: 0px;
  left: 0px;
  border-image: linear-gradient(
      90deg,
      rgba(241, 139, 0, 1),
      rgba(86, 254, 254, 0),
      rgba(86, 254, 254, 0)
    )
    1 1;
}

.news .desc {
  font-size: 12px;
  color: #fff;
  margin-bottom: 6px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0;
}

::-webkit-scrollbar {
  height: 10px;
  width: 10px;
  background: transparent;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  padding-top: 100px;
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
    inset -1px -1px 0 rgba(0, 0, 0, 0.07);
  background-color: #797979;
  min-height: 28px;
  border-radius: 4px;
  background-clip: padding-box;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0;
}

::-webkit-scrollbar-thumb:hover {
  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-thumb:active {
  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
  background-color: rgba(0, 0, 0, 0.5);
}
.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;
}
</style>
