<template>
  <div class="dialogBox" v-if="show">
    <div class="title">
      <span class="mc">巡组列表</span>
      <span class="close" @click="show = false">×</span>
    </div>
    <div class="search">
      <el-input v-model="keyWord" clearable placeholder="请输入部门或者负责人姓名">
        <template #append>
          <el-button icon="Search" @click="_ggetSelectDeckList('0,1,2')"></el-button>
        </template>
      </el-input>
    </div>
    <ul class="groupList noScollLine" v-loading="loading">
      <li v-for="item in xzList.list" :key="item.id" @click="item.isChecked = !item.isChecked" :class="item.isChecked?'isChecked':''">
        <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 }}人</span ><br />
            <span class="other">联系电话：{{ item.fzrLxdh }}</span ><br />
            <span>巡逻时长：{{ item.xfsc ? item.xfsc : 0 }} h<br />巡逻里程：{{ item.xflc ? item.xflc : 0  }}km</span>
          </div>
          <div class="imgBtn">
            <img src="@/assets/images/situationPresentation/shipin.png" />
            <img src="@/assets/images/situationPresentation/tel.png" />
          </div>
        </div>
        <div class="address">
          <img src="@/assets/images/situationPresentation/dingwei.png" />
          <span>{{ item.dqwz }}</span>
        </div>
      </li>
      <el-empty description="没有数据" :image-size="0.1" v-if="!loading && xzList.list.length <= 0" />
    </ul>
    <div class="btnBox">
      <button class="dp-default" @click="buttonSubmit">确定</button>
    </div>
  </div>
</template>

<script setup>
import { qcckGet } from "@/api/qcckApi.js";
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
import emitter from "@/utils/eventBus.js";
import { getSelectDeckList } from "@/api/dpApi/home.js";
const show = ref(false);
const { proxy } = getCurrentInstance();
let xzList = reactive({ list: [] }); //巡组数据
const loading = ref(true); //警组加载
const pageSize = ref(500);
const pageCurrent = ref(1);
const totalPage = ref(0);
const type = ref("");
const dataObj = ref({});
const keyWord = ref('') //输入关键字
onMounted(() => {
  emitter.on("showXZBtn", (res) => {
    show.value = true;
    type.value = res.type;
    dataObj.value = res.data;
    xzList.list = []
    _ggetSelectDeckList('0,1,2');
  });
  emitter.on("closeAllDialog", (res) => {
    show.value = false;
  });
});
onUnmounted(() => {
  emitter.off("closeAllDialog");
  emitter.off("showXZBtn");
});

//巡组列表
function _ggetSelectDeckList(xfzt) {
  let data = { 
    xfzt, 
    pageSize: pageSize.value, 
    pageCurrent: pageCurrent.value,
    keyword:keyWord.value,
  };
  getSelectDeckList(data).then((res) => {
    loading.value = false;
    totalPage.value = res.records.length;
    xzList.list = []
    if (res.records.length > 0) {
      for (let i = 0; i < res.records.length; i++) {
        res.records[i].isChecked = false
        let num = Number(res.records[i].xfsc) || 0
        res.records[i].xfsc = (num/3600).toFixed(1)
        let lc = Number(res.records[i].xflc) || 0
        res.records[i].xflc = (lc/1000).toFixed(2)
        xzList.list.push(res.records[i]);
      }
    }
  }).catch(() => {
    loading.value = false;
  });
}

// 下发指令
function buttonSubmit() {
  let list = xzList.list.filter((item) => { return item.isChecked; });
  let ids = list.map((res) => { return res.id; }).join(",");
  if (ids.length <= 0) return proxy.$message({ type: "info", message: "请选择下发数据！" });
  proxy.$confirm("确定要要下发指令", "警告", { type: "warning" }).then(() => {
    let prams = { bbids: ids };
    if (type.value == "jq") {
      prams.jqid = dataObj.value.id;
      qcckGet(prams, "/mosty-yjzl/tbZl/andJqZl").then((res) => {
        proxy.$message({ type: "success", message: "下发成功" });
      });
    }
    if (type.value == "yj") {
      prams.yjid = dataObj.value.id;
      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;
    .mc { margin-left: 10px; }
  }
  .search{
    padding:  0 8px;
    box-sizing: border-box;
  }
  ul.groupList {
    height: calc(100vh - 570px);
    overflow: hidden;
    overflow-y: auto;
    padding: 4px 10px;
    box-sizing: border-box;
    li{
      border: 1px solid #275288;
      padding: 4px 10px;
      box-sizing: border-box;
      margin-bottom: 10px;
      .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .imgBtn{
        display: flex;
        img{ margin: 0 4px; }
      }
      .address{
        line-height: 30px;
        img{ margin-right: 10px; }
      }
    }
    .isChecked{
      border: 1px solid #cd6907;
      box-shadow: inset 0 0 10px #ff6c00;
    }
  }
}

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

.dialogBox > .btnBox{
  margin-bottom: 0px;
  padding-top: 0px;
}
::v-deep .el-input-group--append .el-input__inner{
  background-color: #062a48;
  border: 1px solid #114260;
  color: #fff;
}
::v-deep .el-input-group__append{
  background: transparent;
  border: 1px solid #0c4e77;
  border-left: none;
}
</style>
