<template>
  <div class="dialogBox">
    <div class="title">
      <span class="mc">公安资源</span>
      <span @click="close" class="close">
        <el-icon><Close /></el-icon>
      </span>
    </div>
    <div v-if="info" class="containner">
      <div class="info-contant" v-for="(ele, index1) in info.data" :key="index1">
        <div class="infoBox">
          <div>{{ ele.gajgmc }}</div>
          <div class="other">所属部门：{{ ele.ssbm }}</div>
        </div>
        <div class="groupList" v-loading="loading" v-if=" ele.identification == 'jwz' || ele.identification == 'pcs' || ele.identification == 'xfq'">
          <div class="other"><p>巡防巡组列表：{{ele.list instanceof Array}}</p></div>
          <ul v-if ="ele.list">
            <li class="chidrensItem" v-for="(item, index) in ele.list" :key="index">
              <div class="top">
                <div class="top-cnt">
                  <span class="dian online" title="巡逻中"></span>
                  <span class="name">{{ item.jzMc }}</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，巡逻里程：{{ item.xflc ? item.xflc : 0 }}km</span>
                </div>
                <span class="imgBtn">
                  <img src="@/assets/images/situationPresentation/shipin.png" />
                  <img src="@/assets/images/situationPresentation/tel.png" />
                </span>
              </div>
              <div class="address">
                <img src="@/assets/images/situationPresentation/dingwei.png" />
                <span>{{ item.dqwz }}</span>
              </div>
            </li>
          </ul>
          <el-empty description="没有数据" :image-size="0.1" v-if="!loading && ele && ele.list.length <= 0"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive, watch } from "vue";
import { getSelectDeckList, pcsHasXz } from "@/api/dpApi/home.js";
// 左右折叠状态
import emitter from "@/utils/eventBus.js";
const props = defineProps({
  data: {
    type: Object,
    default: {}
  }
});
const data = ref();
const info = reactive({ data: [] }); //警情数据
const loading = ref(false);
watch(
  () => props.data,
  (val) => {
    if(val.length>0){
      info.data = val;
      if (val[0].identification == "jwz") {
        val.forEach((item) => { item.list = [] ; getList(item);  });
      }
      if (val[0].identification == "pcs") {
        val.forEach((item) => { item.list = []; getPcsList(item); });
      }
    }
  },
);
// 警务站
function getList(item) {
  let data = { xfzt: 0, jd: item.jd,  wd: item.wd, pageSize: 10086, pageCurrent: 1, radius: 300};
  getSelectDeckList(data).then((res) => {
    loading.value = false;
    item.list = res.records ? res.records : [];
  }).catch(() => {
    loading.value = false;
  });
}
// 派出所
function getPcsList(item) {
  let data = { ysid: item.id};
  pcsHasXz(data).then((res) => {
    loading.value = false;
    item.list = res.records ? res.records : [];
  }).catch(() => {
    loading.value = false;
  });
}
//关闭弹窗
function close() {
  emitter.emit("showGazy", false);
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.containner {
  max-height: 700px;
  overflow: hidden;
  overflow-y: auto;
  .info-contant {
    padding: 0px 14px;
    box-sizing: border-box;
    .infoBox {
      position: relative;
      margin-bottom: 4px;
      .other {
        color: #779dcd;
        list-style: none;
        p {
          margin: 0 2px;
        }
      }
    }
    .address {
      padding: 4px 0;
      box-sizing: border-box;
      border-top: 1px solid #193074;
      border-bottom: 1px solid #193074;
      margin: 4px 0;
      img {
        margin-right: 4px;
      }
    }
  }
  ul.groupList {
    margin-bottom: 0;
    .chidrensItem {
      .top {
        position: relative;
        .imgBtn {
          position: absolute;
          right: 0;
          bottom: 2px;
          img {
            margin: 0 4px;
          }
        }
      }
    }
  }
  .info-contant:last-child(1) {
    .address {
      margin-bottom: 0;
      border-bottom: none;
    }
  }
}
</style>
