<template>
  <div class="" style="padding-top: 13vw">
    <TopNav navTitle="巡大" :showRight="false" :showLeft="true" />
    <div class="jq_box topM">
      <span class="jmsfjq_total_title">街面六类</span>
    </div>
    <div class="jq_box">
      <div class="jq_item left_item" style="padding: 0">
        <div class="jrjqzs_total jq_total_item" @click="onClickJqTotal(1)">
          <span class="jmsfjq_total_title">抢夺</span>
          <div style="margin: 1vw 0">
            <span class="jq_num">{{ jqTotal.lqCount }} </span>
            件
            <span style="display: inline-block; margin-left: 6vw">较昨日<br />
              <span style="display: inline-block; margin-top: 1vw">
                <img src="../../assets/images/leader/arrow-up@2x.png" class="bl_img" v-if="jqTotal.lqUp > 0" />
                <img src="../../assets/images/leader/arrow-down@2x.png" class="bl_img" v-else />
                <span :class="jqTotal.lqCount > 0 ? 'red' : 'green'">
                  {{ jqTotal.lqUp > 0 ? "+" + jqTotal.lqUp : jqTotal.lqUp }}%</span>
              </span>
            </span>
          </div>
        </div>
        <div class="jrjqzs_total jq_total_item" @click="onClickJqTotal(2)">
          <span class="jmsfjq_total_title">抢劫</span>
          <div style="margin: 1vw 0 0 0">
            <span class="red jq_num">{{ jqTotal.lqCount }}</span>
            件
            <span style="display: inline-block; margin-left: 6vw">
              较昨日<br />
              <span style="display: inline-block; margin-top: 1vw">
                <img src="../../assets/images/leader/arrow-up@2x.png" class="bl_img" v-if="jqTotal.lqUp > 0" />
                <img src="../../assets/images/leader/arrow-down@2x.png" class="bl_img" v-else />
                <span :class="jqTotal.lqCount > 0 ? 'red' : 'green'">
                  {{ jqTotal.lqUp > 0 ? "+" + jqTotal.lqUp : jqTotal.lqUp }}%</span></span>
            </span>
          </div>
        </div>
        <!-- zdjqzs_total jq_total_item wffzzs_total jq_total_item-->
        <div class="zdjqzs_total jq_total_item" @click="onClickJqTotal(3)">
          <span class="jmsfjq_total_title">盗窃汽车</span>
          <div style="margin: 1vw 0">
            <span class="jq_num">{{ jqTotal.qcCount }}</span>
            件
            <span style="display: inline-block; margin-left: 6vw">
              较昨日<br />
              <span style="display: inline-block; margin-top: 1vw">
                <img src="../../assets/images/leader/arrow-up@2x.png" class="bl_img" v-if="jqTotal.qcUp > 0" />
                <img src="../../assets/images/leader/arrow-down@2x.png" class="bl_img" v-else />
                <span :class="jqTotal.qcUp > 0 ? 'red' : 'green'">
                  {{ jqTotal.qcUp > 0 ? "+" + jqTotal.qcUp : jqTotal.qcUp }}%</span></span>
            </span>
          </div>
          <!-- <div class="xz_xs_total">
            <span>刑事 {{ jqTotal.xsCount }} </span>
            <span class="sx"></span>
            <span>行政 {{ jqTotal.xzCount }}</span>
          </div> -->
        </div>
        <div class="zdjqzs_total jq_total_item" @click="onClickJqTotal(1)">
          <span class="jmsfjq_total_title">盗窃车内财物</span>
          <div style="margin: 1vw 0">
            <span class="jq_num">{{ jqTotal.ccCount }} </span>
            件
            <span style="display: inline-block; margin-left: 6vw">较昨日<br />
              <span style="display: inline-block; margin-top: 1vw">
                <img src="../../assets/images/leader/arrow-up@2x.png" class="bl_img" v-if="jqTotal.ccUp > 0" />
                <img src="../../assets/images/leader/arrow-down@2x.png" class="bl_img" v-else />
                <span :class="jqTotal.ccUp > 0 ? 'red' : 'green'">
                  {{ jqTotal.ccUp > 0 ? "+" + jqTotal.ccUp : jqTotal.ccUp }}%</span>
              </span>
            </span>
          </div>
        </div>
        <div class="wffzzs_total jq_total_item" @click="onClickJqTotal(2)">
          <span class="jmsfjq_total_title">扒窃</span>
          <div style="margin: 1vw 0 0 0">
            <span class="red jq_num">{{ jqTotal.pqCount }}</span>
            件
            <span style="display: inline-block; margin-left: 6vw">
              较昨日<br />
              <span style="display: inline-block; margin-top: 1vw">
                <img src="../../assets/images/leader/arrow-up@2x.png" class="bl_img" v-if="jqTotal.pqUp > 0" />
                <img src="../../assets/images/leader/arrow-down@2x.png" class="bl_img" v-else />
                <span :class="jqTotal.pqUp > 0 ? 'red' : 'green'">
                  {{ jqTotal.pqUp > 0 ? "+" + jqTotal.pqUp : jqTotal.pqUp }}%</span></span>
            </span>
          </div>
        </div>
        <div class="wffzzs_total jq_total_item" @click="onClickJqTotal(3)">
          <span class="jmsfjq_total_title">盗窃三车</span>
          <div style="margin: 1vw 0">
            <span class="jq_num">{{ jqTotal.dqscCount }}</span>
            件
            <span style="display: inline-block; margin-left: 6vw">
              较昨日<br />
              <span style="display: inline-block; margin-top: 1vw">
                <img src="../../assets/images/leader/arrow-up@2x.png" class="bl_img" v-if="jqTotal.dqscUp > 0" />
                <img src="../../assets/images/leader/arrow-down@2x.png" class="bl_img" v-else />
                <span :class="jqTotal.dqscUp > 0 ? 'red' : 'green'">
                  {{ jqTotal.dqscUp > 0 ? "+" + jqTotal.dqscUp : jqTotal.dqscUp }}%</span></span>
            </span>
          </div>
          <!-- <div class="xz_xs_total">
            <span>刑事 {{ jqTotal.xsCount }} </span>
            <span class="sx"></span>
            <span>行政 {{ jqTotal.xzCount }}</span>
          </div> -->
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import TopNav from "../../components/topNav.vue";
import { ref, onMounted, onUnmounted, onActivated, reactive } from "vue";
import { dateFormat } from "../../utils/tools.js";
import { baseUrl2 } from "../../utils/request";
import router from "../../router";
import axios from "axios";
const jqTotal = ref({}); //今日警情统计
const zrjqTotal = ref(0); //昨日警情数据
const QWLX = ref([]); //勤务类型
onMounted(() => {
  _getJqTotal();
  _getJqTotal(true);
});
//点击警情统计查看列表
function onClickJqTotal(status) {
  router.push(`/newTwoHome/jq/xzjqlist?status=${status}`);
}
//获取警情统计  type 是否是昨日
function _getJqTotal(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: "",
  };
  if (type) {
    data.startTime = `${dateFormat("z2")} 16:00:00`;
    data.endTime = `${dateFormat("z")} 16:00:00`;
  }
  axios.post(`${baseUrl2}/xz1Api/api/alarm/count`, data).then((res) => {
    if (res.data) {
      if (type) {
        let num =
          res.data.data.lqCount +
          res.data.data.qcCount +
          res.data.data.ccCount +
          res.data.data.pqCount +
          res.data.data.dqscCount;
        zrjqTotal.value = jqTotal.value.jmsfTotal - num;
      } else {
        jqTotal.value = res.data.data;
        jqTotal.value.jmsfTotal =
          res.data.data.lqCount +
          res.data.data.qcCount +
          res.data.data.ccCount +
          res.data.data.pqCount +
          res.data.data.dqscCount;
      }
    }
  });
}
</script>

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

.jq_box {
  display: flex;
  justify-content: space-between;
  @include font_size($font_medium_s);
  margin: 0 3vw 3vw 3vw;

  .jmsfjq_box {
    background: linear-gradient(0deg, #f4f8fb 35%, #e1eeff 100%);
  }

  .left_item {
    display: flex;
    // flex-direction: column;
    justify-content: space-between;
  }

  .jq_item {
    // flex-shrink: 0;
    flex-wrap: wrap;
    border-radius: 2vw;
    padding: 1.5vw;

    .mk_jq_total_box {
      margin: 5vw 0;

      .jq_total {
        @include font_size($font_medium);
        display: flex;
        justify-content: space-between;

        .jq_total_unit {
          @include font_size($font_medium_s);
        }
      }

      .jqhb {
        display: inline-block;
        margin-top: 1vw;
        color: #999;
      }
    }

    .jq_total_item {
      width: 37vw;
      padding: 2.5vw;
      border-radius: 2vw;
      margin: 2vw;
    }

    .dxzp_item {
      background: rgba(81, 193, 242, 0.1);
    }

    .zdjqzs_total {
      background: url("../../assets/images/new/zdjqzs.png");
      background-size: 100%;
    }

    .jrjqzs_total {
      background: #7d9ef8;
    }

    .wffzzs_total {
      background: #fae9e1;

      .xz_xs_total {
        display: flex;
        justify-content: space-between;
        color: #7c4e19;

        .sx {
          width: 1px;
          background: #7c4e19;
        }
      }
    }
  }
}

.topM {
  padding-top: 2vw;
}

.bl_img {
  width: 2vw;
  height: 2.5vw;
  margin-right: 1vw;
}

.jq_num {
  font-size: 6vw;
  font-weight: 700;
  margin: 2vw 0;
}
</style>
