<template>
  <div class="list_box" @click="onGoDetail">
    <div class="time_box">
      <span>
        <span class="title bule">{{ item.caseTypeName }}</span> &nbsp;
        <van-tag type="success">{{ item.statusName }}</van-tag>
      </span>
      <span> {{ item.alarmTime }}</span>
    </div>
    <span> </span>
    <div class="title">{{ item.jqnr }}</div>
    <div class="item">
      <span class="address_box">位置</span>
      <span>&ensp;{{ item.alarmAddress }}</span>
    </div>
    <div class="item">
      <span>派出所：{{ item.orgName + "_" + item.gridName }}</span>
    </div>
    <div class="item">
      报警内容：<span class="bjnr">{{ item.alarmContent }}</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: { item: JSON.stringify(props.item) },
  });
}
</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>
