<!--
 * @Author: your name
 * @Date: 2023-11-15 15:05:40
 * @LastEditTime: 2024-06-26 09:24:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \my_web_new\src\views\lz\home\layout\streetGroup.vue
-->
<template>
  <div class="boxContent">
    <div class="box-title">街面巡组</div>
    <div class="searchInfo-xf">
      <el-popover placement="left" width="300px" :append-to-body="false" :visible="visible" trigger="click">
        <template #reference>
          <Search size="20" @click="visible = !visible" />
        </template>
        <template #default>
          <el-form :model="dataForm" :inline="true">
            <el-form-item label="关键字" label-width="68px">
              <el-input v-model="dataForm.keyword" placeholder="请输入关键字" clearable />
            </el-form-item>
            <el-form-item label="所属部门" label-width="68px">
              <MOSTY.Department width="176px" placeholder="请输入所属部门" clearable v-model="dataForm.ssbmdm" />
            </el-form-item>
            <el-form-item label="负责人" label-width="68px">
              <el-input v-model="dataForm.fzrXm" placeholder="请输入负责人" clearable />
            </el-form-item>
            <el-form-item label="警组" label-width="68px">
              <el-input v-model="dataForm.jzMc" placeholder="请输入警组" clearable />
            </el-form-item>
            <div style="text-align: center;">
              <el-button type="success" @click="handleFilter">查询</el-button>
              <el-button type="info" @click="reset"> 重置 </el-button>
            </div>
          </el-form>
        </template>
      </el-popover>
    </div>
    <div class="boxInfo">
      <div class="checkBox">
        <CheckBox :data="checkData" @changeData="changeData"></CheckBox>
      </div>
      <ul class="groupList" v-loading="loading">
        <li :class="item.isChecked ? 'active' : ''" v-for="item in xzList.list" :key="item.id" @click="handelClick(item)">
          <div class="leftInfo">
            <div class="top-cnt">
              <div class="top-cnt-title">
                <img :src="item.lx == '02' ? JJ : item.lx == '03' ? PCSMJ : TJ" />
                <span>{{ item.jzMc ? item.jzMc : item.fzrXm + "巡组" }}</span>
              </div>
              <div class="text">
                负责人：{{ item.fzrXm }} {{ item.fzrLxdh }}
              </div>
            </div>
            <div class="address">
              <img src="@/assets/images/situationPresentation/dingwei.png" />
              <span class="tools"><el-tooltip :content="item.dqwz" placement="top">{{ item.dqwz }}</el-tooltip></span>
            </div>
          </div>
          <div class="sxt"><img src="@/assets/my/sxt.png" /></div>
          <div class="xlStatus" :class="item.xfzt == 1 ? 'lineing' : item.xfzt == 2 ? 'unline' : 'line'">
            {{ item.xfzt == 1 ? '处警中' : item.xfzt == 2 ? '离线' : '巡逻中' }}
          </div>
        </li>
        <el-empty description="没有数据" :image-size="0.1" v-if="!loading && xzList.list.length <= 0" />
      </ul>
    </div>
  </div>
</template>

<script setup>

import * as MOSTY from "@/components/MyComponents/index";
import emitter from "@/utils/eventBus.js";
import CheckBox from "@/components/checkBox/index";
import { getSelectDeckList } from "@/api/dpApi/home.js";
import openWebSocket from "@/utils/webSocket.js";
import { useStore } from "vuex";
import { ref, reactive, onMounted, defineEmits, onBeforeUnmount } from "vue";
const checkData = reactive({
  list: ["巡逻中", "离线"],
  hasChoose: ["巡逻中", "便衣"]
});
const TJ = require(`@/assets/mapIcon/specialPolice.png`);
const JJ = require(`@/assets/mapIcon/trafficPolice.png`);
const PCSMJ = require(`@/assets/mapIcon/peoplePolice.png`);
const store = useStore();
const loading = ref(false); //警组加载
let xzList = reactive({
  list: []
}); //巡组数据
const pageSize = ref(500);
const pageCurrent = ref(1);
const totalPage = ref(0);
const status = ref([0, 1, 2]); //巡组状态
const jd = ref(104.14637342);
const dataForm = ref({})
const visible = ref(false)
const isTootChange = ref(false)
let timer;
onMounted(() => {
  _ggetSelectDeckList("0,1,2");// 查询巡逻中数据
  getWebSocketData();//websoket
  handelscroll()//滚动加载
  emitter.on("showGroupPoint", val => {
    isTootChange.value = true
    _ggetSelectDeckList("0,1,2");// 查询巡逻中数据
  })
});

onBeforeUnmount(() => {
  openWebSocket.close()
  emitter.off("showGroupPoint")
})
// 获取WebSocket数据
function getWebSocketData() {
  let dws = openWebSocket.getInstance();
  dws.connect((res) => {
    // 接收发送消息
    dws.ws.onmessage = (e) => {
      let dataInfo = JSON.parse(e.data).data;
      if (e && e.data) {
        let newsDate = JSON.parse(e.data);
        switch (newsDate.type) {
          //一键报警
          case "01":
            let { jd, wd } = newsDate.data;
            emitter.emit("addPointArea", { coords: [{ jd, wd }], icon: require("@/assets/point/sos.png"), flag: "sosPoint" });
            emitter.emit("SsCircle", JSON.parse(e.data).data);
            break;
          //一键报警处置完成
          case "02":
            emitter.emit("clearCircle", JSON.parse(e.data).data);
            let ids = document.getElementById(JSON.parse(e.data).data);
            ids.parentElement.removeChild(ids);
            break;
          // 新增报备
          case "03":
            if (typeof status.value == "string") { status.value = status.value.split(","); }
            status.value.forEach((item, index) => {
              if (item == dataInfo.xfzt && isShowGroupPoint) {
                xzList.list.unshift(JSON.parse(e.data).data);
                addPointMaker([dataInfo]); //撒点
              }
            });
            break;
          //报备位置更新
          case "04":
            xzList.list.forEach((value, index) => {
              if (value.id == dataInfo.id && isShowGroupPoint) {
                delPointMaker(dataInfo); //清除原来的撒点
                xzList.list.splice(index, 1);
                if (dataInfo.xfzt != 2) {
                  xzList.list.unshift(dataInfo);
                  addPointMaker([dataInfo]); //撒点
                }
              }
            });
            break;
          // 结束报备
          case "05":
            xzList.list.forEach((value, index) => {
              if (value.id == dataInfo.id && isShowGroupPoint) {
                delPointMaker(dataInfo); //清除原来的撒点
                xzList.list.splice(index, 1);
              }
            });
            break;
          case "06": //警情
            emitter.emit("socketJQ", dataInfo);
            break;
        }
      }
    };
  });
}


function handleFilter() {
  changeData(checkData.hasChoose)
  visible.value = false
}
function reset() {
  dataForm.value = {}
  visible.value = false
  handleFilter()
}

//选择巡防状态 
function changeData(val) {
  pageCurrent.value = 1;
  checkData.hasChoose = val;
  isTootChange.value = false;
  let scrollTargetBox = document.querySelector(".groupList");
  scrollTargetBox.scrollTop = 0
  if (val.length == 0) {
    emitter.emit("deletePointZBAll"); ////清除装备-人员
    status.value = ''
    xzList.list = []
  } else {
    let arr = []
    val.forEach(item => {
      if (item == '巡逻中') arr.push(0)
      if (item == '离线') arr.push(2)
    })
    status.value = arr.join(',')
    _ggetSelectDeckList(status.value);
  }
}
//巡组列表
function _ggetSelectDeckList(staus) {
  if (!isTootChange.value) loading.value = true;
  let data = {
    xfzt: staus,
    pageSize: pageSize.value,
    pageCurrent: pageCurrent.value,
    fzrXm: dataForm.value.fzrXm,
    jzMc: dataForm.value.jzMc,
    ssbmdm: dataForm.value.ssbmdm,
    keyword: dataForm.value.keyword,
  };
  getSelectDeckList(data).then((res) => {
    emitter.emit("deletePointZBAll"); //清除装备-人员 
    loading.value = false;
    let arr = res.records ? res.records : [];
    xzList.list = pageCurrent.value == 1 ? arr : xzList.list.concat(arr);
    let icon = require(`@/assets/mapIcon/police-car-bx.png`)
    let brrSd = xzList.list.filter((v) => { return v.jd && v.wd; });
    if (isShowGroupPoint) {
      addPointMaker(brrSd) //撒点
      emitter.emit("setMapCenter", { location: [brrSd[0].jd, brrSd[0].wd], zoomLevel: 10 });
    }
  }).catch(() => { loading.value = false; });
}


// 删除点位 
const delPointMaker = (data) => {
  emitter.emit("deletePointAreaOne", { flag: "rx", id: data.id });
};
// 撒点
const addPointMaker = (data) => {
  let pramas = { coords: data, isBounds: true, showTitle: true, flag: "rx" }
  emitter.emit("addPointArea", pramas);
};
//查看警组信息
function handelClick(item) {
  emitter.emit("deletePointArea", "xfq");
  emitter.emit("deletePointArea", "route");
  emitter.emit("deletePointArea", "kfdArea");
  emitter.emit("deletePointArea", "kfd");
  xzList.list.forEach(v => { if (v.id != item.id) v.isChecked = false })
  item.isChecked = !item.isChecked
  emitter.emit("showJzInfo", item);
  if (item.jd && item.wd) {
    store.commit("user/setActiveId", item.id);
    emitter.emit("setMapCenter", { location: [item.jd, item.wd], zoomLevel: 12 });
  }
}
//触底加载
function handelscroll() {
  let scrollTargetBox = document.querySelector(".groupList");
  scrollTargetBox.onscroll = (e) => {
    var scrollHeight = scrollTargetBox.scrollHeight; //251
    var scrollTop = scrollTargetBox.scrollTop; //0-18
    var clientHeight = scrollTargetBox.clientHeight; //233
    if (scrollHeight - clientHeight == scrollTop) {
      isTootChange.value = false;
      //滚动条滚到最底部
      if (totalPage.value < pageSize.value) return;
      pageCurrent.value++;
      _ggetSelectDeckList(status.value);
    }
  };
}

</script>
<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";

::v-deep .el-checkbox__label {
  color: #fff;
}

::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
  color: yellow;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #b2be0d;
  border-color: #b2be0d;
}

::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #b2be0d;
  border-color: #b2be0d;
}

.boxContent {
  position: relative;

  // z-index:99;
  .searchInfo-xf {
    position: absolute;
    top: 32px;
    right: 20px;

    ::v-deep .icon {
      width: 20px;
      height: 20px;
    }

    ::v-deep .el-popper.is-light {
      background: #0a1d43;
      border: 1px solid #4565a4;
    }

    ::v-deep .el-popper.is-light .el-form-item__label {
      color: #fff;
    }

    ::v-deep .el-popper.is-light .el-popper__arrow::before {
      border: 1px solid #4565a4;
      background: #0a1d43;
    }
  }
}

ul.groupList {
  height: calc(100% - 67px);
  overflow-y: auto;
  margin-top: 8px;

  li {
    position: relative;
    display: flex;
    margin-top: 8px;
    padding-bottom: 3px;
    border: 1px solid #0d5897;
    box-shadow: inset 0 0 10px #0d5897;
    border-radius: 2px;

    &:hover {
      box-shadow: inset 0px 0px 15px #0474c3;
    }

    .leftInfo {
      flex: 1;

      .top-cnt {
        padding: 0 12px;
        padding-top: 8px;
        line-height: 22px;
        padding-bottom: 6px;

        .top-cnt-title {
          width: 80%;
          font-size: 14px;

          img {
            vertical-align: bottom;
            margin-right: 4px;
            width: 15px;
          }
        }

        .text {
          color: #00bfff;
          line-height: 33px;
        }

        .bz {
          color: #fff;
        }
      }

      .address {
        margin: 0 14px;
        border-top: 1px solid #162f55;
        height: 30px;
        line-height: 30px;
        color: #6486ae;
        display: flex;
        align-items: center;

        img {
          margin-right: 6px;
          vertical-align: text-top;
        }

        .tools {
          display: inline-block;
          max-width: 270px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .sxt {
      position: relative;
      width: 30px;
      margin-left: 10px;

      img {
        position: absolute;
        bottom: 20px;
        right: 10px;
      }
    }
  }

  li.active {
    border: 1px solid #108fe7;
    box-shadow: inset 0 0 10px #108fe7;
  }
}

::v-deep .el-loading-mask {
  background: rgba(0, 0, 0, 0.3);
}

::v-deep .el-checkbox {
  margin-right: 11px;
}
</style>