<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">
        <div v-if="list.length < 1" class="mt-2 fc-w">暂无数据</div>
        <div class="news" v-for="(item, index) in list" :key="index">
          <div class="news-container">
            <div class="title flex jc-sb">
              <div class="title-title">
                {{ item.sourceTypeName }}上报了一条火情线索
              </div>
              <div class="fc-w">编号：{{ item.clueNo }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let BASE_URL = process.env.VUE_APP_BASE_API;
import axios from "axios";
export default {
  name: "toolbox",
  props: ["globalmap", "checkList", "checkNumber", "mergeSuccessRandom"],
  data() {
    return {
      list: [],
      listParams: {
        areaname: localStorage.getItem("areaName"),
      },
    };
  },
  watch: {
    mergeSuccessRandom: function (e) {
      this.getList();
    },
  },
  created() {
    this.getList();
  },
  mounted() {
    window.addEventListener("onmessageWS", this.getSocketData);
  },
  methods: {
    getList() {
      axios({
        method: "get",
        url: BASE_URL + "/FireManagement/LoadFireClueInfoByState",
        params: this.listParams,
        headers: {
          "X-Token": localStorage.getItem("X-Token"),
        },
      }).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.data;
          this.list.forEach((item, index) => {
            this.list[index].check = false;
          });
        }
      });
    },

    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%;
}

.box-title {
  width: 100%;
  height: 17%;
  padding-left: 35px;
  font-size: 18px;
  color: #fff;
  padding-top: 4px;
  text-align: left;
  display: flex;
  align-items: center;
}
.title-title {
  width: 200px;
  height: 40px;
  overflow: hidden;
  float: left;
}
.box-container {
  width: calc(100% - 20px);
  margin: 0px 15px;
  height: 80%;
  overflow-y: auto;
}
.news {
  width: calc(100% - 10px);
  line-height: 18px;
  padding: 0 15px;
  text-align: left;
  color: #ccc;
  background: rgba(0, 0, 0, 0.5);
  margin: 6px 0px;
  border: 1px dashed #999;
}
.news::after {
  content: "";
  clear: both;
  display: block;
  height: 0px;
  overflow: hidden;
}
.news-container {
  width: 100%;
}
.news .title {
  line-height: 46px;
  height: 46px;
  overflow: hidden;
  color: #e48f19;
  position: relative;
}

::-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>
