<template>
  <div>
    <div class="pubTitle">
      <div class="text">街面巡组</div>
    </div>
    <div style="padding-top: 8px; overflow: hidden">
      <div style="float: left">
        <el-checkbox label="1" v-for="(item, index) in checkList" :key="item.value" v-model="item.checked"
          @change="onChangeXfzt(index)">
          <span class="dian online" v-if="item.value == 0"></span>
          <span class="dian busy" v-if="item.value == 1"></span>
          <span class="dian" v-if="item.value == 2"></span>
          {{ item.label }}
        </el-checkbox>
      </div>
      <div style="float: right">
        <button class="dp-default small">全部呼叫</button>
      </div>
    </div>
    <ul class="groupList" v-loading="loading">
      <li v-for="item in xzList.list" :key="item.id" @click="handelClick(item)">
        <div class="top">
          <div class="top-cnt">
            <span class="dian online" title="巡逻中" v-if="item.xfzt == 0"></span>
            <span class="dian busy" title="处警中" v-if="item.xfzt == 1"></span>
            <span class="dian" title="离线" v-if="item.xfzt == 2"></span>
            <span class="name">{{
              item.jzMc ? item.jzMc : item.fzrXm + "巡组"
            }}</span><br />
            <span class="other">民警：{{ item.mjsl }}人，辅警{{ item.fjsl }}人，联系电话：{{
              item.fzrLxdh
            }}</span><br />
            <span>巡逻时长：{{
              item.xfsc != "" && item.xfsc > 0
                ? (item.xfsc / 3600).toFixed(2)
                : 0
            }}
              h <br />巡逻里程：{{
                item.xflc ? (item.xflc / 1000).toFixed(2) : 0
              }}
              m
            </span>
          </div>
        </div>
        <div class="address" style="display: flex; justify-content: space-between">
          <span>
            <img src="@/assets/images/situationPresentation/dingwei.png" />
            <span>{{ item.dqwz }}</span>
          </span>
          <span>
            <img style="width: 20px" src="@/assets/images/situationPresentation/light-gray.png" />
          </span>
        </div>
      </li>
      <el-empty description="没有数据" :image-size="0.1" v-if="!loading && xzList.list.length <= 0" />
    </ul>
  </div>
</template>

<script setup>
import { getSelectDeckList } from "@/api/dpApi/home.js";
import emitter from "@/utils/eventBus.js";
import openWebSocket from "@/utils/webSocket.js";
import { ref, reactive, onMounted, defineEmits } from "vue";
//状态数据
const checkList = reactive([
  {
    value: 0,
    label: "巡逻中",
    checked: true
  },
  {
    value: 1,
    label: "处警中",
    checked: true
  },
  {
    value: 2,
    label: "离线",
    checked: true
  }
]);
let xzList = reactive({
  list: []
}); //巡组数据
const loading = ref(true); //警组加载
const pageSize = ref(500);
const pageCurrent = ref(1);
const totalPage = ref(0);
const status = ref([]); //巡组状态
const jd = ref(104.14637342);
onMounted(() => {
  checkList.forEach((item) => {
    if (item.checked === true) {
      status.value.push(item.value);
    }
  });
  // 查询巡逻中数据
  _ggetSelectDeckList("0,1,2");
  scroll();
  getWebSocketData();
});

// 获取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 "03":
            if (typeof status.value == "string") { status.value = status.value.split(","); }
            status.value.forEach((item, index) => {
              if (item == dataInfo.xfzt) {
                xzList.list.unshift(JSON.parse(e.data).data);
                addPointMaker(dataInfo); //撒点
              }
            });
            break;
          case "04":
            xzList.list.forEach((value, index) => {
              if (value.id == dataInfo.id) {
                delPointMaker(dataInfo); //清除原来的撒点
                xzList.list.splice(index, 1);
                xzList.list.unshift(dataInfo);
                addPointMaker(dataInfo); //撒点
                emitter.emit("setMapCenter", {
                  location: [dataInfo.jd, dataInfo.wd],
                  zoomLevel: '10'
                });
              }
            });
            break;
          case "05":
            xzList.list.forEach((value, index) => {
              if (value.id == dataInfo.id) {
                delPointMaker(dataInfo); //清除原来的撒点
                xzList.list.splice(index, 1);
                addPointMaker(dataInfo); //撒点
              }
            });
            break;
        }
      }
    };
  });
}

const addPointMaker = (data) => {
  emitter.emit("addPointTakeTittle", {
    coords: [data],
    icon: require(`@/assets/mapIcon/specialPolice.png`),
    flag: "rx",
    undel: true
  });
};
const delPointMaker = (data) => {
  emitter.emit("deletePointAreaPolice", { flag: "rx", id: data.id });
};

//选择巡防状态
function onChangeXfzt(e) {
  let xfztList = [];
  checkList.forEach((item) => {
    if (item.checked === true) {
      xfztList.push(item.value);
    }
  });
  status.value = xfztList.join(",");
  pageCurrent.value = 1;
  _ggetSelectDeckList(status.value);
  scroll();
}

//查看警组信息
function handelClick(item) {
  emitter.emit("closeAllDialog");
  emitter.emit("showJzInfo", item);
  emitter.emit("closeVideo");
  if (item.jd && item.wd) {
    emitter.emit("setMapCenter", {
      location: [item.jd, item.wd],
      zoomLevel: 14
    });
  }
}

//巡组列表
function _ggetSelectDeckList(xfzt) {
  let data = {
    xfzt,
    pageSize: pageSize.value,
    pageCurrent: pageCurrent.value
  };
  getSelectDeckList(data)
    .then((res) => {
      loading.value = false;
      if (res.records.length > 0) {
        let newArry = [];
        for (let i = 0; i < res.records.length; i++) {
          if (res.records[i].pbfj != null) {
            res.records[i].pbfj = JSON.parse(res.records[i].pbfj);
          }
          if (res.records[i].pbmj != null) {
            res.records[i].pbmj = JSON.parse(res.records[i].pbmj);
          }
          xzList.list = res.records;
          if (res.records[i].jd && res.records[i].wd) {
          } else {
            res.records[i].queryAddress = "没有经纬度";
          }
        }

        let sdList = xzList.list.filter((v) => {
          return v.jd && v.wd;
        });
        emitter.emit("addPointTakeTittle", {
          coords: sdList,
          icon: require(`@/assets/mapIcon/police-car-bx.png`),
          flag: "rx"
        });
        emitter.emit("setMapCenter", {
          location: [sdList[0].jd, sdList[0].wd],
          zoomLevel: '10'
        });
        // 结尾
        totalPage.value = res.records.length;
      } else if (res.records.length === 0) {
        xzList.list = res.records;
        emitter.emit("deletePointArea", "cx");
        emitter.emit("deletePointArea", "rx");
      }
    })
    .catch(() => {
      loading.value = false;
    });
}
//触底加载
function scroll() {
  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) {
      //滚动条滚到最底部
      if (totalPage.value < pageSize.value) return;
      pageCurrent.value++;
      _ggetSelectDeckList(status.value);
    }
  };
}

</script>

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

//加载时 取消背景
::v-deep .el-loading-mask {
  background-color: transparent !important;
}

::v-deep .el-checkbox {
  height: 24px;
  font-size: 12px;
}

::v-deep .el-checkbox__label {
  font-size: 12px;
}
</style>
