<template>
  <div class="container" style="padding-top: 13vw">
    <TopNav :navTitle="titleTime ? `${titleTime}日勤务` : '历史勤务'" />
    <van-cell title="选择时间" @click="calShow = true">
      <template #value>
        <span>{{ chooseTime }}</span>
      </template>
    </van-cell>
    <van-calendar
      v-model:show="calShow"
      @confirm="onConfirm"
      :min-date="minDate"
      :max-date="maxDate"
      color="#3e6ee8"
    ></van-calendar>
    <div class="tabs-box">
      <div class="tab-item item_box" v-for="(item, index) in tabs" :key="index">
        <div
          class="tab-title"
          :class="
            item.name === '街面警力'
              ? 'bg2'
              : item.name === '请休假'
              ? 'bg3'
              : 'bg1'
          "
        >
          {{ item.name }}
        </div>
        <div class="tab-num">
          <div @click="getTabNum(item.leftText + '-' + item.name)">
            <span
              class="num-text1"
              :class="
                item.name === '街面警力'
                  ? 'text-color2'
                  : item.name === '请休假'
                  ? 'text-color3'
                  : 'text-color1'
              "
              >{{ item.leftNum }}</span
            ><br />{{ item.leftText }}
          </div>
          <div @click="getTabNum(item.rightText + '-' + item.name)">
            <span
              class="num-text2"
              :class="
                item.name === '街面警力'
                  ? 'text-color2'
                  : item.name === '请休假'
                  ? 'text-color3'
                  : 'text-color1'
              "
              >{{ item.rightNum }}</span
            ><br />{{ item.rightText }}
          </div>
        </div>
      </div>
    </div>
    <div class="select-box">
      <van-tabs
        v-model:active="active"
        @change="tabChange"
        title-active-color="#3e6ee8"
        color="#3e6ee8"
        :background="themeType == 'light' ? '#fff' : '#041634'"
        :title-inactive-color="themeType == 'light' ? '#333' : '#fff'"
      >
        <van-tab v-for="(ele, index) in selectList" :key="index" :name="ele">
          <template #title
            ><span>{{ ele }}</span></template
          >
        </van-tab>
      </van-tabs>
    </div>
    <!-- 警力清单 -->
    <div class="police-list" v-if="active === '警力清单'">
      <van-list
        v-model:loading="loading"
        :finished="finished1"
        finished-text="没有数据了"
        offset="100"
        @load="onLoad(1)"
        :immediate-check="false"
      >
        <div
          class="list-item item_box"
          v-for="(l, index1) in list.policeList"
          :key="index1"
        >
          <!-- <div class="phone-icon">
            <van-icon name="phone-circle-o" color="#25b882" size="30" />
          </div> -->
          <!-- <div class="name-text">{{ l.zbld }}</div> -->
          <div class="title">{{ l.ssbmmc }}</div>
          <div>
            总数<span class="num-text1">&nbsp;{{ l.jl }}&nbsp;</span>人,
            民警<span class="num-text2">&nbsp;{{ l.mj }}&nbsp;</span>人,
            辅警<span class="num-text3">&nbsp;{{ l.fj }}&nbsp;</span>人
          </div>
          <div>值班领导: {{ l.zbld }}, 值班电话: {{ l.zbldDh }}</div>
          <div class="line"></div>
          <div class="address-box">
            <div class="adress-left" v-if="l.wzXz">
              <van-icon name="location-o" color="#3e6ee8" />
              {{ l.wzXz }}
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <!-- 街面警力 -->
    <div class="police-street" v-if="active === '街面警力'">
      <div>
        <van-checkbox-group v-model="checked" @change="selectChange">
          <div class="police-select">
            <van-checkbox shape="square" name="0">
              <span class="police-o patroling"></span> 巡逻中
              {{ cjz }}</van-checkbox
            >
            <van-checkbox shape="square" name="1">
              <span class="police-o plicing"></span> 处警中
              {{ xlz }}</van-checkbox
            >
            <van-checkbox shape="square" name="2">
              <span class="police-o offing"></span> 离线 {{ lx }}</van-checkbox
            >
            <!-- <van-button type="primary" size="mini">全部呼叫</van-button> -->
          </div>
        </van-checkbox-group>
      </div>
      <van-list
        v-model:loading="loading"
        :finished="finished2"
        finished-text="没有数据了"
        offset="1"
        @load="onLoad(2)"
        :immediate-check="false"
      >
        <div
          class="list-item item_box"
          v-for="(s, index2) in list.streetList"
          :key="index2"
        >
          <div class="phone-icon">
            <van-icon name="phone-circle-o" color="#25b882" size="30" />
          </div>
          <div class="name-text">
            <span
              class="police-o plicing"
              :class="
                s.xfzt == '0'
                  ? 'patroling'
                  : s.xfzt == '1'
                  ? 'plicing'
                  : 'offing'
              "
            ></span
            >&nbsp;{{ s.jzMc }}
          </div>
          <div>
            民警<span class="num-text2">&nbsp;{{ s.mjsl }}&nbsp;</span>人,
            辅警<span class="num-text3">&nbsp;{{ s.fjsl }}&nbsp;</span>人,
            联系电话: {{ s.fzrLxdh }}
          </div>
          <div>
            巡组负责人：{{ s.fzrXm }} <br />
            巡组成员：{{ s.pname }} <br />
            巡组车辆：{{ s.clname }}
          </div>
          <div class="second-line">
            巡逻时长:{{s.xfsc != "" && s.xfsc > 0 ? (s.xfsc / 3600).toFixed(2): 0}}h,
            巡逻里程:{{s.xflc ? (s.xflc / 1000).toFixed(2) : 0 }}km
          </div>
          <div class="line"></div>
          <div class="address-box">
            <div class="adress-left">
              <van-icon name="location-o" color="#3e6ee8" />
              {{ s.dqwz }}
            </div>
            <!-- <div>{{ s.xflc ? s.xflc : 0 }}km</div> -->
          </div>
        </div>
      </van-list>
    </div>
    <!-- 不在岗警力 -->
    <div class="police-off" v-if="active === '不在岗警力'">
      <van-list
        v-model:loading="loading1"
        :finished="finished3"
        finished-text="没有数据了"
        offset="10"
        @load="onLoad(3)"
        :immediate-check="false"
      >
        <div
          class="list-item item_box"
          v-for="(o, index3) in list.offList"
          :key="index3"
        >
          <div class="name-text">
            <span class="police-o patroling"></span>&nbsp;{{ o.sqr_xm }}
          </div>
          <div class="context-co">
            部门: {{ o.ssbm }}, 联系电话: {{ o.lxdh }}
          </div>
          <div class="context-co">休假时间: {{ o.kssj }}--{{ o.jssj }}</div>
        </div>
      </van-list>
    </div>
    <van-popup
      v-model:show="showList"
      round
      :style="{ height: '60%', width: '90%' }"
    >
      <div class="jllbsty">{{ jlTitle }}</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="(el, index5) in list.jlList"
            :key="index5"
          >
            <van-image
              width="80px"
              height="85px"
              :class="_getBase64(l)"
              :src="el.baseUrl"
              style="flex: 1"
              v-if="el.wzXz"
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
            <div class="detail_item">
              <div class="user_info">
                <div>
                  <span v-if="jlsign === 1">{{ el.username }}</span>
                  <span v-if="jlsign === 2">{{ el.jlxm }}</span>
                  <span v-if="jlsign === 7">{{ el.user_name }}</span>
                  <span v-if="jlsign === 3">{{ el.xm }}</span>
                  <span v-if="jlsign === 4">{{ el.jlxm }}</span>
                  <span v-if="jlsign === 5">{{ el.jlxm }}</span>
                  <span v-if="jlsign === 6">{{ el.jlxm }}</span>
                  <span v-if="jlsign === 8">{{ el.jlxm }}</span>
                  <span v-if="jlsign === 9">{{ el.sqr_xm }}</span>
                  <span v-if="el.age > 0"> {{ el.age }}岁 </span>
                  <span v-if="jlsign === 1">{{ setDict(el.mz, D_BZ_MZ) }}</span>
                  <span v-if="jlsign === 3">{{
                    setDict(el.mzdm, D_BZ_MZ)
                  }}</span>
                </div>
                <van-tag v-if="jlsign === 1" type="primary">{{
                  setDict(el.jllx, D_BZ_JLLX)
                }}</van-tag>
                <van-tag v-if="jlsign === 2" type="primary">{{
                  setDict(el.jllx, D_BZ_JLLX)
                }}</van-tag>
                <van-tag v-if="jlsign === 3" type="primary">{{
                  setDict(el.fl, D_BZ_JLLX)
                }}</van-tag>
                <van-tag v-if="jlsign === 4" type="primary">{{
                  setDict(el.jllx, D_BZ_JLLX)
                }}</van-tag>
                <van-tag v-if="jlsign === 5" type="primary">{{
                  setDict(el.jllx, D_BZ_JLLX)
                }}</van-tag>
                <van-tag v-if="jlsign === 6" type="primary">{{
                  setDict(el.jllx, D_BZ_JLLX)
                }}</van-tag>
                <van-tag v-if="jlsign === 7" type="primary">{{
                  el.position_name
                }}</van-tag>
                <van-tag v-if="jlsign === 8" type="primary">{{
                  setDict(el.jllx, D_BZ_JLLX)
                }}</van-tag>
                <van-tag v-if="jlsign === 9" type="primary">{{
                  setDict(el.sqrlx, D_BZ_JLLX)
                }}</van-tag>
              </div>
              <div v-if="jlsign === 1">身份证号: {{ el.sfz }}</div>
              <div v-if="jlsign === 2">身份证号: {{ el.sfzh }}</div>
              <div v-if="jlsign === 3">身份证号: {{ el.sfzh }}</div>
              <div v-if="jlsign === 4">身份证号: {{ el.sfzh }}</div>
              <div v-if="jlsign === 5">身份证号: {{ el.sfzh }}</div>
              <div v-if="jlsign === 6">身份证号: {{ el.sfzh }}</div>
              <div v-if="jlsign === 7">身份证号: {{ el.id_entity_card }}</div>
              <div v-if="jlsign === 8">身份证号: {{ el.sfzh }}</div>
              <div v-if="jlsign === 9">联系电话: {{ el.lxdh }}</div>
              <!-- <div>所属部门: {{ el.ssbm }}</div> -->
            </div>
          </div>
        </van-list>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import {
  getMjQb,
  getMjZg,
  getFjQb,
  getFjZg,
  getKcd,
  getJmjl,
  getQxj,
  getJlqd,
  getJmxz,
  getBzgjlqd,
  getQb,
  getZg,
  qbList,
  jlqbsu,
  jlzgsu,
  qbmjsu,
  zgmjsu,
  qbfjsu,
  zgfjsu,
  mjkcdsu,
  fjkcdsu,
  mjjmjlsu,
  fjjmjlsu,
  mjqxjsu,
  fjqxjsu,
  selectJmllList,
} from "../../../api/qwzx";
import { ref, reactive, onMounted } from "vue";
import { Toast } from "vant";
import { useRouter, useRoute } from "vue-router";
import TopNav from "../../../components/topNav.vue";
import { timeValidate, getBase64 } from "../../../utils/tools";
import { getDictList, setDict } from "../../../utils/dict";
const { D_BZ_JLLX, D_BZ_MZ } = getDictList("D_BZ_JLLX", "D_BZ_MZ"); //字典信息
const router = useRouter();
const route = useRoute();
const themeType = ref(getStorage("themeSetting"));
onMounted(() => {
  Toast.loading({
    message: "加载...",
    forbidClick: true,
    loadingType: "spinner",
    duration: 0,
  });
  Promise.all([getMjTj(), getJlqdList(), getBzgjlqdList()])
    .then((res) => {
      Toast.clear();
    })
    .catch((err) => {
      Toast.clear();
    });
});
const minDate = new Date(2000, 0, 1);
const maxDate = new Date();
const calShow = ref(false);
const chooseTime = ref(timeValidate(new Date(), "ymd"));
const titleTime = ref();
function onConfirm(val) {
  calShow.value = false;
  chooseTime.value = timeValidate(val, "ymd");
  titleTime.value = timeValidate(val, "ymd");
  getJlqdList();
  getJmxzList("0,1,2");
  getBzgjlqdList();
  getMjTj();
}
const tabs = ref([
  {
    name: "警力",
    leftText: "全部",
    rightText: "在岗",
    leftNum: 0,
    rightNum: 0,
  },
  {
    name: "民警",
    leftText: "全部",
    rightText: "在岗",
    leftNum: 0,
    rightNum: 0,
  },
  {
    name: "辅警",
    leftText: "全部",
    rightText: "在岗",
    leftNum: 0,
    rightNum: 0,
  },
  {
    name: "可抽调",
    leftText: "民警",
    rightText: "辅警",
    leftNum: 0,
    rightNum: 0,
  },
  {
    name: "街面警力",
    leftText: "民警",
    rightText: "辅警",
    leftNum: 0,
    rightNum: 0,
  },
  {
    name: "请休假",
    leftText: "民警",
    rightText: "辅警",
    leftNum: 0,
    rightNum: 0,
  },
]);
const showList = ref(false);
const selectList = ref(["警力清单", "街面警力", "不在岗警力"]);
const active = ref("警力清单");
const list = reactive({
  policeList: [],
  streetList: [],
  offList: [],
  jlList: [],
});

const finished1 = ref(false);
const finished2 = ref(false);
const finished3 = ref(false);
const finished4 = ref(false);
const loading = ref(false);
const loading1 = ref(false);
const loading4 = ref(false);
const total1 = ref(0);
const total2 = ref(0);
const total3 = ref(0);
const total4 = ref(0);
const checked = ref(["0", "1", "2"]);

function tabChange(val) {
  pageCurrent1.value = 1;
  pageCurrent2.value = 1;
  pageCurrent3.value = 1;
  pageCurrent4.value = 1;
  finished3.value = false;
  finished2.value = false;
  finished1.value = false;
  finished4.value = false;
  loading.value = false;
  loading1.value = false;
  loading4.value = false;
  switch (val) {
    case "警力清单":
      getJlqdList();
      break;
    // case "警力列表":
    //   getJllbList();
    case "街面警力":
      list.streetList = [];
      temp.value = "0,1,2";
      checked.value = ["0", "1", "2"];
      getJmxzList("0,1,2");
      break;
    case "不在岗警力":
      getBzgjlqdList();
      break;
  }
}
//获取base64地址
function _getBase64(item) {
  getBase64((res) => {
    item.baseUrl = res;
  }, item.yjTp);
}
// 点击数字
const jlTitle = ref(); // 弹框标题
const jlsign = ref();
function getTabNum(val, current) {
  showList.value = true;
  loading4.value = true;
  finished4.value = false;
  if (current) {
    pageCurrent4.value = current;
  } else {
    pageCurrent4.value = 1;
    list.jlList = [];
  }
  const params = ref({
    bbrq: chooseTime.value,
    pageCurrent: pageCurrent4.value,
    pageSize: 10,
  });
  const params2 = ref({
    pageNum: pageCurrent4.value,
    pageSize: 10,
    xfbmdm: '',
    jllx: '02'
  })
  // getJllbList();
  jlTitle.value = val;
  switch (val) {
    case "全部-警力":
      jlsign.value = 1;
      jlqbsu(params.value).then((res) => {
        loading4.value = false;
        if (pageCurrent4.value > 1) {
          list.jlList = [...list.jlList, ...res.records];
        } else {
          list.jlList = res.records ? res.records : [];
        }
        total4.value = res.pages;
      }).catch(()=>{
        loading4.value = false;
      });
      break;
    case "在岗-警力":
      jlsign.value = 1;
      jlzgsu(params.value).then((res) => {
        loading4.value = false;
        if (pageCurrent4.value > 1) {
          list.jlList = [...list.jlList, ...res.records];
        } else {
          list.jlList = res.records ? res.records : [];
        }
        total4.value = res.pages;
      }).catch(()=>{
        loading4.value = false;
      });
      break;
    case "全部-民警":
      jlsign.value = 7;
      qbmjsu(params.value).then((res) => {
        loading4.value = false;
        if (pageCurrent4.value > 1) {
          list.jlList = [...list.jlList, ...res.records];
        } else {
          list.jlList = res.list ? res.records : [];
        }
        total4.value = res.pages;
      }).catch(()=>{
        loading4.value = false;
      });
      break;
    case "在岗-民警":
      jlsign.value = 2;
      zgmjsu(params.value).then((res) => {
        loading4.value = false;
        if (pageCurrent4.value > 1) {
          list.jlList = [...list.jlList, ...res.records];
        } else {
          list.jlList = res.records ? res.records : [];
        }
        total4.value = res.pages;
      }).catch(()=>{
        loading4.value = false;
      });
      break;
    case "全部-辅警":
      jlsign.value = 3;
      qbfjsu(params.value).then((res) => {
        loading4.value = false;
        if (pageCurrent4.value > 1) {
          list.jlList = [...list.jlList, ...res.records];
        } else {
          list.jlList = res.records ? res.records : [];
        }
        total4.value = res.pages;
      }).catch(()=>{
        loading4.value = false;
      });
      break;
    case "在岗-辅警":
      jlsign.value = 8;
      zgfjsu(params.value).then((res) => {
        loading4.value = false;
        if (pageCurrent4.value > 1) {
          list.jlList = [...list.jlList, ...res.records];
        } else {
          list.jlList = res.records ? res.records : [];
        }
        total4.value = res.pages;
      }).catch(()=>{
        loading4.value = false;
      });
      break;
    case "民警-可抽调":
      jlsign.value = 4;
      mjkcdsu(params.value).then((res) => {
        loading4.value = false;
        if (pageCurrent4.value > 1) {
          list.jlList = [...list.jlList, ...res.records];
        } else {
          list.jlList = res.records ? res.records : [];
        }
        total4.value = res.pages;
      }).catch(()=>{
        loading4.value = false;
      });
      break;
    case "辅警-可抽调":
      jlsign.value = 4;
      fjkcdsu(params.value).then((res) => {
        loading4.value = false;
        if (pageCurrent4.value > 1) {
          list.jlList = [...list.jlList, ...res.records];
        } else {
          list.jlList = res.records ? res.records : [];
        }
        total4.value = res.pages;
      }).catch(()=>{
        loading4.value = false;
      });
      break;
    case "民警-街面警力":
      jlsign.value = 5;
      params2.value.jllx = '01'
      selectJmllList(params2.value).then((res) => {
        loading4.value = false;
        if (pageCurrent4.value > 1) {
          list.jlList = [...list.jlList, ...res.records];
        } else {
          list.jlList = res.records ? res.records : [];
        }
        total4.value = res.pages;
      }).catch(()=>{
        loading4.value = false;
      });
      break;
    case "辅警-街面警力":
      jlsign.value = 5;
      params2.value.kssj = chooseTime.value + " 00:00:00";
      params2.value.jssj = chooseTime.value + " 23:59:59";
      params2.value.jllx = '02'
      selectJmllList(params2.value).then((res) => {
        loading4.value = false;
        if (pageCurrent4.value > 1) {
          list.jlList = [...list.jlList, ...res.records];
        } else {
          list.jlList = res.records ? res.records : [];
        }
        total4.value = res.pages;
      }).catch(()=>{
        loading4.value = false;
      });
      break;
    case "民警-请休假":
      jlsign.value = 6;
      mjqxjsu(params.value).then((res) => {
        loading4.value = false;
        if (pageCurrent4.value > 1) {
          list.jlList = [...list.jlList, ...res.records];
        } else {
          list.jlList = res.records ? res.records : [];
        }
        total4.value = res.pages;
      }).catch(()=>{
        loading4.value = false;
      });
      break;
    case "辅警-请休假":
      jlsign.value = 9;
      fjqxjsu(params.value).then((res) => {
        loading4.value = false;
        if (pageCurrent4.value > 1) {
          list.jlList = [...list.jlList, ...res.records];
        } else {
          list.jlList = res.records ? res.records : [];
        }
        records;
        total4.value = res.pages;
      }).catch(()=>{
        loading4.value = false;
      });
      break;
  }
}
// 统计模块
const tjList = reactive({
  mjQb: 0,
  mjZg: 0,
});
function getMjTj() {
  // 全部
  getQb({ bbrq: chooseTime.value }).then((res) => {
    tabs.value[0].leftNum = res;
  });
  getZg({ bbrq: chooseTime.value }).then((res) => {
    tabs.value[0].rightNum = res;
  });
  // 民警
  getMjQb({ bbrq: chooseTime.value }).then((res) => {
    tabs.value[1].leftNum = res;
  });
  getMjZg({ bbrq: chooseTime.value }).then((res) => {
    tabs.value[1].rightNum = res;
  });

  // 辅警
  getFjQb({ bbrq: chooseTime.value }).then((res) => {
    tabs.value[2].leftNum = res;
  });
  getFjZg({ bbrq: chooseTime.value }).then((res) => {
    tabs.value[2].rightNum = res;
  });

  // 可抽调
  getKcd({ bbrq: chooseTime.value }).then((res) => {
    tabs.value[3].leftNum = res[0].mj;
    tabs.value[3].rightNum = res[0].fj;
  });
  // 街面警力 有问题 街面警力 只能统计当天
  getJmjl({ bbrq: chooseTime.value }).then((res) => {
    tabs.value[4].leftNum = res.mj;
    tabs.value[4].rightNum = res.fj;
  });
  // 请休假
  getQxj({ qjrq: chooseTime.value }).then((res) => {
    tabs.value[5].leftNum = res[0].mj;
    tabs.value[5].rightNum = res[0].fj;
  });
}

// 警力清单
const pageCurrent1 = ref(1);
function getJlqdList() {
  loading.value = true;
  const params = {
    pageCurrent: pageCurrent1.value,
    pageSize: 10,
    bbrq: timeValidate(new Date(), "ymd"),
  };
  getJlqd(params)
    .then((res) => {
      loading.value = false;
      if (pageCurrent1.value > 1) {
        list.policeList.push(...res);
      } else {
        list.policeList = res ? res : [];
      }
      total1.value = res.total;
      list.policeList.forEach((item) => {
        item.bmfjsl = item.bmfjsl ? item.bmfjsl : 0;
        item.bmmjsl = item.bmmjsl ? item.bmmjsl : 0;
      });
    })
    .catch((err) => {
      loading.value = false;
    });
}

// 警力列表
const pageCurrent4 = ref(1);
function getJllbList() {
  const params = {
    bbrq: chooseTime.value,
    pageCurrent: pageCurrent4.value,
    pageSize: 10,
  };
  qbList(params).then((res) => {
    loading4.value = false;
    if (pageCurrent4.value > 1) {
      list.jlList.push(...res.list);
    } else {
      list.jlList = res.list;
    }
    total4.value = res.total;
  });
}

// 街面巡组
const temp = ref("0,1,2");
function selectChange(val) {
  loading.value = true;
  pageCurrent2.value = 1;
  list.streetList = [];
  let arr = [];
  checked.value.forEach((i) => {
    arr.push(i);
  });
  if (arr.length > 0) {
    temp.value = arr.join(",");
  } else {
    temp.value = "";
  }
  getJmxzList(temp.value);
}
const pageSize2 = ref(20);
const pageCurrent2 = ref(1);

const cjz = ref(0);
const xlz = ref(0);
const lx = ref(0);
function getJmxzList(xfzt) {
  let data = {
    bbrq: chooseTime.value,
    xfzt,
    pageSize: pageSize2.value,
    pageCurrent: pageCurrent2.value,
  };
  getJmxz(data)
    .then((res) => {
      loading.value = false;
      if (res.records.length > 0) {
        res.records.forEach((item) => {
          let cltemp = [];
          if (item.pbcl != null) {
            let cltemp = JSON.parse(item.pbcl).map((el) => el.jdchphm);
          }
          let clname = cltemp.join(",");
          let mjtemp = [];
          if (item.pbfj != "[]" && item.pbfj != null) {
            mjtemp.push([...JSON.parse(item.pbfj).map((x) => x.jlxm)]);
          }
          if (item.pbmj != "[]" && item.pbmj != null) {
            mjtemp.push([...JSON.parse(item.pbmj).map((y) => y.jlxm)]);
          }
          let pname = mjtemp.join(",");
          item.clname = clname;
          item.pname = pname;
        });
      }
      if (pageCurrent2.value > 1) {
        list.streetList = list.streetList.concat(res.records);
      } else {
        list.streetList = res.records;
      }
      total2.value = res.total;
    })
    .catch((err) => {
      loading.value = false;
    });
}

function getXfztNum(xfzt) {
  let data = {
    bbrq: chooseTime.value,
    xfzt,
    pageSize: pageSize2.value,
    pageCurrent: pageCurrent2.value,
  };
  getJmxz(data).then((res) => {
    if (xfzt === "0") {
      cjz.value = res.total ? res.total : 0;
    } else if (xfzt === "1") {
      xlz.value = res.total ? res.total : 0;
    } else if (xfzt === "2") {
      lx.value = res.total ? res.total : 0;
    }
  });
}

// 不在岗警力清单
const pageCurrent3 = ref(1);
function getBzgjlqdList() {
  loading1.value = true;
  const params = {
    pageCurrent: pageCurrent3.value,
    pageSize: 10,
    qjrq: chooseTime.value,
  };
  getBzgjlqd(params)
    .then((res) => {
      loading1.value = false;
      if (pageCurrent3.value == 1) {
        if (res) list.offList = res.list;
      } else {
        res.list.forEach((item) => {
          list.offList.push(item);
        });
      }
      total3.value = res.total;
    })
    .catch((err) => {
      loading1.value = false;
    });
}

function onLoad(val) {
  switch (val) {
    case 1:
      if (pageCurrent1.value * 10 < total1.value && total1.value > 10) {
        finished1.value = false;
        pageCurrent1.value++;
        getJlqdList();
      } else {
        finished1.value = true;
      }
      break;
    case 2:
      if (
        list.streetList.length < total2.value &&
        list.streetList.length != 0
      ) {
        finished2.value = false;
        pageCurrent2.value++;
        getJmxzList(temp.value);
      } else {
        finished2.value = true;
      }
      break;
    case 3:
      if (list.offList && list.offList.length < total3.value) {
        finished3.value = false;
        pageCurrent3.value++;
        getBzgjlqdList();
      } else {
        finished3.value = true;
      }
      if (list.offList && list.offList.length == 0) {
        finished3.value = true;
        loading1 = true;
      }
      break;
    case 4:
      if (pageCurrent4.value >= total4.value) {
        finished4.value = true;
      } else {
        finished4.value = false;
        pageCurrent4.value++;
        getTabNum(jlTitle.value, pageCurrent4.value);
      }
      break;
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.container {
  @include font_size($font_medium_s);
}
.empty-box {
  line-height: 8vh;
  text-align: center;
}
.tabs-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 3vw;
  .tab-item {
    width: 45vw;
    // box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    margin: 1vh 0;
    border-radius: 2vw;
    .tab-title {
      border-radius: 2vw 2vw 0 0;
      color: #fff;
      padding: 1vw;
      text-align: center;
    }
    .bg1 {
      background-color: #3e6ee8;
    }
    .bg2 {
      background-color: #eea82f;
    }
    .bg3 {
      background-color: #25b882;
    }
    .tab-num {
      padding: 3vw;
      display: flex;
      justify-content: space-between;
      & > div {
        text-align: center;
      }
      .num-text1,
      .num-text2 {
        font-size: 20px;
      }
      .text-color1 {
        color: #3e6ee8;
      }
      .text-color2 {
        color: #eea82f;
      }
      .text-color3 {
        color: #25b882;
      }
    }
  }
}
.line {
  height: 1px;
  @include bottm_tab_top_color($bottom-border-top-clore-theme);
  margin: 2vw 0;
}
.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;
    }
  }
}
.police-street {
  .police-select {
    @include font_color($font-color-theme);
    margin: 3vw;
    display: flex;
    justify-content: space-between;
  }
  padding: 3vw;
  .list-item {
    padding: 3vw;
    margin: 2vh 0;
    // box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 2vw;
    color: #333;
    .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);
      margin-bottom: 1vh;
      font-weight: bold;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .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;
    }
  }
  .second-line {
    color: #25b882;
  }
}
.police-o {
  display: inline-block;
  width: 2vw;
  height: 2vw;
  border-radius: 2vw;
}
.plicing {
  background-color: rgb(248, 16, 16);
}
.patroling {
  background-color: #25b882;
}
.offing {
  background-color: #a8a8a8;
}
.police-off {
  .police-select {
    margin: 3vw;
    display: flex;
    justify-content: space-between;
  }
  padding: 3vw;
  .list-item {
    padding: 3vw;
    margin: 2vh 0;
    // box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 2vw;
    color: #333;
    .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;
    }
    .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;
    }
  }
  .context-co {
    color: #333;
    @include font_size($font_medium_s);
    line-height: 3vh;
  }
  .second-line {
    color: #25b882;
  }
}
.detail_box {
  margin-top: 1vw;
  display: flex;
  position: relative;

  .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;
}
::v-deep .van-nav-bar {
  background-color: #3e6ee8;
}
::v-deep .van-nav-bar__title {
  color: #fff;
}
::v-deep .van-nav-bar .van-icon {
  color: #fff;
}
::v-deep .van-tabs__line {
  background-color: #3e6ee8;
}
::v-deep .van-checkbox__label {
  @include font_color($font-color-theme);
  color: #333;
}
</style>
