<template>
  <div class="dialogBox">
    <!-- v-if="show" -->
    <div class="title">
      <span class="mc">推荐警力</span>
      <span class="close" @click="closeDialog">×</span>
    </div>
    <ul class="groupList">
      <li class="groupList-item" v-for="item in xzList" :key="item.id">
        <div class="top">
          <div @click="handelClick">
            <span class="dian" title="离线" v-if="item.xfzt == 3"></span>
            <span class="dian online" title="巡逻中" v-if="item.xfzt == 0"></span>
            <span class="dian busy" title="处警中" v-if="item.xfzt == 1"></span>
            <span class="name">{{ item.jzMc ? item.jzMc : item.fzrXm +'巡组'}}</span> <br />
            <span>负责人：{{ item.fzrXm }}({{ item.fzrLxdh }})</span><br />
          </div>
        </div>
        <div class="address">
          <div class="distance">
            <img src="@/assets/images/situationPresentation/dingwei.png" />
            <span>距离：{{ item.distance || 0 }}km</span>
          </div>
          <div class="numbPopljgh" @click="clickXfzl(item)">
            <span>下发指令</span>
          </div>
        </div>
      </li>
      <el-empty
        description="没有数据"
        :image-size="0.1"
        v-if="xzList.length <= 0"
      />
    </ul>
  </div>
</template>

<script setup>
import { qcckGet } from "@/api/qcckApi.js";
import emitter from "@/utils/eventBus.js";
import { ElMessage } from "element-plus";
import { selectDeckList } from "@/api/dpApi/zzzh.js";
import { ref, getCurrentInstance, watch } from "vue";
const { proxy } = getCurrentInstance();
const props = defineProps({
  data: {
    type: Object,
    default: {}
  }
});
const show = ref(false); //显示组件
const xzList = ref([]); //巡组列表
const pageSize = ref(10);
const pageCurrent = ref(1);
const type = ref("");
const dataObj = ref({});
watch(
  () => props.data,
  (res) => {
    type.value = res.type;
    dataObj.value = res.data ? res.data : res;
    _getSelectDeckList(dataObj.value);
  },
  {
    immediate: true
  }
);

//获取巡组信息,
function _getSelectDeckList(val) {
  let data = {
    pageSize: pageSize.value,
    pageCurrent: pageCurrent.value,
    jd: val.jd,
    wd: val.wd,
    radius: 3000
  };
  selectDeckList(data).then((res) => {
    xzList.value = res.records || [];
    if (res.records.length > 0) {
      show.value = true;
      xzList.value.forEach((item, index) => {
        let km = item.distance ? item.distance : 0;
        item.distance = (km / 1000).toFixed(2);
        let qd = `${val.jd},${val.wd}`;
        let zd = `${item.jd},${item.wd}`;
        if (val.jd && val.wd && item.jd && item.wd){
          getRouteLine(qd, zd, { jd: item.jd, wd: item.wd });
        }
      });
    } else {
      ElMessage({ message: "暂无巡组信息", type: "warning" });
    }
  });
}
// 获取路径
function getRouteLine(qd, zd, obj) {
  qcckGet({ qd, zd }, "/mosty-base/other/getLjgh").then((res) => {
    emitter.emit("drawLine", { coord: res[0].points.coordinates, flag: "route" });
    let km = res[0].distance ? res[0].distance : 0;
    res[0].distance = (km / 1000).toFixed(2);
    let prams = { jd: obj.jd, wd: obj.wd, distance: res[0].distance };
    emitter.emit("showSquire", prams);
  });
}
// 关闭弹窗
function closeDialog() {
  emitter.emit("showZbxz", false);
  emitter.emit("clearLine");
  emitter.emit("clearmakerSqure");
  emitter.emit("deletePointArea", "xzlxIcon");
  emitter.emit("drawLineAnimation", "route");
}
//点击下发指令
function clickXfzl(item) {
  proxy.$confirm("确定要要下发指令", "警告", { type: "warning" }).then(() => {
    let prams = { jqid: dataObj.value.id, bbids: item.id };
    if (type.value == "jq") {
      qcckGet(prams, "/mosty-yjzl/tbZl/andJqZl").then((res) => {
        proxy.$message({ type: "success", message: "下发成功" });
      });
    }
    if (type.value == "yj") {
      qcckGet(prams, "/mosty-yjzl/tbZl/andYjZl").then((res) => {
        proxy.$message({ type: "success", message: "下发成功" });
      });
    }
  });
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/largeScreen.scss";
@import "@/assets/css/homeScreen.scss";
.dialogBox {
  padding: 0 0 10px 0;
  box-sizing: border-box;
  .title {
    border-bottom: 1px solid #275288;
    margin-bottom: 6px;
    .mc {
      margin-left: 10px;
    }
  }
  .groupList {
    height: calc(100vh - 580px);
    padding: 10px 20px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
    .groupList-item {
      padding: 10px;
      box-sizing: border-box;
      line-height: 20px;
      font-size: 14px;
      background: #052955;
      margin-top: 4px;
      box-shadow: inset 0 0 10px 10px #104675;
      .address {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .distance {
          img {
            margin-right: 4px;
          }
        }
        .numbPopljgh {
          padding: 1px 10px;
          box-sizing: border-box;
          background: rgba(5, 35, 66, 0.5);
          border: 1px solid #00fcff;
          border-radius: 5px;
          font-size: 12px;
          color: #fff;
          font-weight: 700;
        }
      }
    }
  }
}
</style>
