<template>
  <div class="list_box" @click="onGoDetail">
    <div class="time_box">
      <span class="title bule" :style="{ color: item.bjlb == '01000000' ? 'red' : '' }">{{
        item.bjlbmc +
        " — " +
        item.bjlxmc +
        (item.bjxlmc ? " — " + item.bjxlmc : "")
      }}</span>
      <span>{{ item.bjsj }}</span>
    </div>
    <span> </span>
    <!-- <span v-if="item.jqjb">
        <van-tag
          type="warning"
          style="padding: 0.3vw 5vw; border-radius: 3vw"
          v-if="item.jqjb == 1"
          >一级警情</van-tag
        >
        <van-tag
          type="warning"
          style="padding: 0.3vw 5vw; border-radius: 3vw"
          v-else-if="item.jqjb == 2"
          >二级警情
        </van-tag>
        <van-tag
          type="primary"
          style="padding: 0.3vw 5vw; border-radius: 3vw"
          v-else-if="item.jqjb == 3"
          >三级警情
        </van-tag>
        <van-tag
          type="success"
          style="padding: 0.3vw 5vw; border-radius: 3vw"
          v-else-if="item.jqjb == 4"
          >四级警情
        </van-tag>
      </span> -->
    <div class="title">{{ item.jqnr }}</div>
    <div class="item">
      <span class="address_box">位置</span>
      <span>&ensp;{{ item.sfdz }}</span>
    </div>
    <div class="item">
      <span>
        报警人：{{ item.bjrXm }}(<span style="color: #3e6ee8">{{
          item.bjdh
        }}</span>)
      </span>
      <span class="jjy_box">接警员：{{ item.jjyxm }}</span>
    </div>
    <div class="item">
      报警内容：<span class="bjnr">{{ item.bjnr }}</span>
    </div>
  </div>
</template>

<script setup>
import router from "../router/index.js";
import { defineProps, ref } from "vue";
const props = defineProps({
  item: Object, //列表内容
  path: { type: String, default: false }, //跳转详情的路由
});
//跳转
function onGoDetail() {
  if (!props.path) {
    return false;
  }
  router.push({ path: props.path, query: { id: props.item.id } });
}
</script>
<style lang="scss" scoped>
@import "../assets/styles/mixin.scss";

.list_box {
  @include font_size($font_medium_s);
  @include font_color($font-color-theme);
  // margin: 0vw 2vw 2vw 2vw;
  padding: 2vw 3vw;
  margin-bottom: 1.5vw;
  background: #f6f8fd;

  // @include item_bottom_color($bottom-border-top-clore-theme);
  .time_box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.title {
  @include font_size($font_medium);
  font-weight: 600;
}

.item {
  line-height: 6vw;
}

.list_box:nth-child(1) {
  border-top: none !important;
}

.jjy_box {
  display: inline-block;
  margin-left: 5vw;
}

.bjnr {
  font-weight: 600;
}

.address_box {
  background: #3bc2b5;
  color: #fff;
  display: inline-block;
  font-size: 11px;
  padding: 0 8px;
  border-radius: 10px;
  height: 17px;
  line-height: 18.5px;
}
</style>
