<template>
  <div class="container" style="padding-top: 13vw">
    <TopNav navTitle="临时勤务列表" />
    <!-- <van-search
      v-model="xfqList.xfqMc"
      placeholder="请输入巡防区名称"
      @update:model-value="getList(1)"
    /> -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        class="item-box item_box"
        v-for="(item, index) in xfqList.list"
        :key="index"
      >
        <div class="titleSJY">勤务说明: {{ item.bz }}</div>
        <div>
          勤务时间: {{ item.xfrq }}&nbsp; {{ item.kssj }}&nbsp;至&nbsp;{{
            item.jssj
          }}
        </div>
        <div><van-icon name="user-o" /> 负责人: {{ item.fzrXm }}</div>
        <div @click="getPop(item.mjsl, item.pbmj, '民警')">
          民警数量：{{ item.mjsl }}
        </div>
        <div @click="getPop(item.mjsl, item.pbfj, '辅警')">
          辅警数量：{{ item.fjsl }}
        </div>
        <div @click="getPop(item.mjsl, item.pbcl, '车辆')">
          车辆数量：{{ item.jcsl }}
        </div>
        <div>
          智能装备：
          <template v-if="item.znzbList.length > 0">
            <span v-for="(el, index) in item.znzbList" :key="index"
              >{{ el.sbmc }}&nbsp;</span
            >
          </template>
          <template v-else>无</template>
        </div>
        <div>
          警用器械：
          <template v-if="item.jyqxList.length > 0">
            <span v-for="(el2, index2) in item.jyqxList" :key="index2"
              >{{ el2.sbmc }}&nbsp;</span
            >
          </template>
          <template v-else>无</template>
        </div>
      </div>
    </van-list>
  </div>
  <van-popup
    v-model:show="showList"
    round
    :style="{ height: '60%', width: '90%' }"
  >
    <div class="jllbsty">{{ popTitle }}</div>
    <div class="police-list">
      <van-list
        v-model:loading="loading4"
        :finished="finished4"
        finished-text="没有数据了"
        offset="100"
        @load="onLoad(4)"
        :immediate-check="false"
      >
        <div
          class="list-item item_box detail_box"
          v-for="(ele, index5) in popList"
          :key="index5"
        >
          <div class="detail_item" v-if="popTitle == '车辆'">
            <div class="user_info">
              <div>
                <span>{{ ele.jdchphm }}</span>
              </div>
            </div>
            <div>车辆号牌类型: {{ setDict(ele.jdchpzldm, D_BZ_CLLX) }}</div>
          </div>
          <div class="detail_item" v-else>
            <div class="user_info">
              <div>
                <span>{{ ele.jlxm }}</span>
                <!-- <span> ({{ ele.sfzh }}) </span> -->
              </div>
              <van-tag type="primary">{{
                setDict(ele.jllx, D_BZ_JLLX)
              }}</van-tag>
            </div>
            <div>身份证号: {{ ele.sfzh }}</div>
          </div>
        </div>
      </van-list>
    </div>
  </van-popup>
</template>

<script setup>
import TopNav from "../../../components/topNav.vue";
import { getXfbb } from "../../../api/qwzx.js";
import { getPbbbByMonth } from "../../../api/calender";
import { ref, reactive, onMounted } from "vue";
import { getDictList, setDict } from "../../../utils/dict";
import { useRouter } from "vue-router";
const router = useRouter();
const { D_BZ_CLLX, D_BZ_XQLX, D_BZ_JLLX } = getDictList(
  "D_BZ_CLLX",
  "D_BZ_XQLX",
  "D_BZ_JLLX"
);
const xfqList = reactive({
  list: [],
  xfqMc: "",
});
onMounted(() => {
  getList();
});
const loading = ref(false);
const finished = ref(false);
const page = ref(1);
const total = ref(0);
function getList(val) {
  loading.value = false;
  getXfbb({
    pageCurrent: page.value,
    pageSize: 10,
    bblx: "02",
  })
    .then((res) => {
      if (val === 1) {
        xfqList.list = res.records;
      } else {
        res.records.forEach((ele) => {
          xfqList.list.push(ele);
        });
      }
      total.value = res.total;
      onLoad();
      finished.value = true;
    })
    .catch((err) => {
      finished.value = true;
    });
}
function onLoad() {
  if (page.value * 10 < total.value) {
    page.value++;
    getXfqList();
  }
}
const showList = ref(false);
const popTitle = ref("");
const popList = ref([]);
function getPop(sl, item, title) {
  if (sl > 0) {
    popTitle.value = title;
    showList.value = true;
    popList.value = JSON.parse(item);
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.item-box {
  padding: 2vw;
  line-height: 1.8em;
  margin: 3vw 3vw 0 3vw;
  border-bottom: 1px solid #f3f3f3;
  @include font_color($font-color-theme);
  @include font_size($font_medium_s);
}
.titleSJY {
  color: #1f6cec;
  font-weight: bold;
  @include font_size($font_medium);
}
.detail_box {
  margin-top: 1vw;
  display: flex;
  position: relative;
  @include font_size($font_medium_s);
  .detail_item {
    flex: 3.5;
    margin-left: 2vw;

    .user_info {
      @include font_size($font_medium);
      display: flex;
      justify-content: space-between;
      font-weight: 600;
      color: #507ce9;

      & > div > span {
        display: inline-block;
        margin-right: 2vw;
      }
    }

    .item {
      line-height: 6vw;
    }
  }
}
.jllbsty {
  text-align: center;
  @include font_size($font_medium);
  color: #507ce9;
  margin-top: 2vh;
}
.police-list {
  @include font_color($font-color-theme);
  padding: 3vw;
  .list-item {
    padding: 3vw;
    margin: 2vh 0;
    // box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 2vw;
    .phone-icon {
      position: absolute;
      right: 5vw;
    }
    .address-box {
      display: flex;
      justify-content: space-between;
      .adress-left {
        color: #3e6ee8;
      }
    }
    .name-text {
      @include font_size($font_medium);
      color: #3e6ee8;
      margin-bottom: 1vh;
      font-weight: bold;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .title {
      @include font_size($font_medium);
      font-weight: 550;
    }
    .num-text1 {
      @include font_size($font_large_s);
      color: #3e6ee8;
    }
    .num-text2 {
      @include font_size($font_large_s);
      color: #eea82f;
    }
    .num-text3 {
      @include font_size($font_large_s);
      color: #25b882;
    }
  }
}
</style>
