<template>
  <div class="tabsBox">
    <van-tabs v-model:active="active" title-active-color="#3e6ee8" color="#3e6ee8" @click="onChange"
      :background="themeType == 'light' ? '#fff' : '#041634'"
      :title-inactive-color="themeType == 'light' ? '#333' : '#fff'">
      <van-tab v-for="(item, index) in Tabslist" :key="index" :name="index" :title="item.name"
        :badge="item.count"></van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import axios from "axios";
import { baseUrl2 } from "../../utils/request";
import { dateFormat } from "../../utils/tools.js";
import { ref, defineProps, reactive, defineEmits, onMounted, watch } from "vue";
const active = ref(0);
const emits = defineEmits(["TabsItem"]);
const themeType = ref("light");
const props = defineProps({
  status: {
    type: Number,
    default: 1,
  },
});
watch(
  () => props.status, (val) => {
    active.value = val - 1
  }, {
  deep: true,
  immediate: true
}
);
const Tabslist = ref([
  { name: "总警情", count: 0 },//0
  { name: "重大警情", count: 0 },//1
  { name: "违法犯罪", count: 0 },//2
  { name: "行政", count: 0 },//3
  { name: "刑事", count: 0 },//4
  { name: "盗窃三车", count: 0 },//5
  { name: "扒窃", count: 0 },//6
  { name: "车财", count: 0 },//7
  { name: "两抢", count: 0 },//8
  { name: "汽车", count: 0 },//9
  { name: "入盗", count: 0 },//10
  { name: "电诈", count: 0 },//11
  { name: "纠纷", count: 0 },//12
  { name: "求助", count: 0 },//13
  { name: "其他", count: 0 },//14
]);

onMounted(() => {
  getCount()
})
// 点击tabs
function onChange(e) {
  emits('TabsItem', active.value)
}

function getCount(type) {
  let data = {
    orgId: JSON.parse(window.localStorage.getItem("userInfo")).deptList[0].deptCode,
    startTime: `${dateFormat("z")} 16:00:00`,
    endTime: `${dateFormat()} 16:00:00`,
    type: 1,
    keyword: "",
  };
  axios.post(`${baseUrl2}/xz1Api/api/alarm/count`, data).then((res) => {
    if (res.data) {
      Tabslist.value[0].count = res.data.data.total //总警情
      Tabslist.value[1].count = res.data.data.zdCount //重大警情
      Tabslist.value[2].count = res.data.data.wffzCount //违法犯罪
      Tabslist.value[3].count = res.data.data.xzCount //行政
      Tabslist.value[4].count = res.data.data.xsCount //刑事
      Tabslist.value[5].count = res.data.data.dqscCount //盗窃三车
      Tabslist.value[6].count = res.data.data.pqCount //扒窃
      Tabslist.value[7].count = res.data.data.ccCount //车财
      Tabslist.value[8].count = res.data.data.lqCount //两抢
      Tabslist.value[9].count = res.data.data.qcCount //汽车
      Tabslist.value[10].count = res.data.data.rdCount //入盗
      Tabslist.value[11].count = res.data.data.dzCount //电诈
      Tabslist.value[12].count = res.data.data.jfCount //纠纷
      Tabslist.value[13].count = res.data.data.qzCount //求助
      Tabslist.value[14].count = res.data.data.qtCount //其他
    }
  });
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/mixin.scss";

.tabsBox {
  @include font_size($font_medium_s);
  @include font_color($font-color-theme);
  @include bg_color($background-color-theme);
  margin-top: 8.5vw;
}

::v-deep .van-tabs__wrap {
  height: 70px;
}

::v-deep .van-badge--fixed {
  color: var(--badgeTextCoior);
  background: none;
  top: 30px;
  right: 50%;
  font-size: 13px;
}

::v-deep .van-badge {
  border: none;
}
</style>