<template>
  <div class="cnt_box">
      <div class="list_box">
          <div class="head">
              <span class="time">
                  <van-icon name="clock-o" />&ensp;
                  {{item.pcsj}}</span>
              <span class="bq red" v-if="item.pcclJg == 2">{{item.pcclJgmc}}</span>
              <span class="bq blue" v-if="item.pcclJg == 1">{{item.pcclJgmc}}</span>
              <span class="bq orange" v-if="item.pcclJg == 9">{{item.pcclJgmc}}</span>
          </div>
          <div class="info">
              <div class="item">
                  车辆信息：<span class="text">{{item.hphm}}</span> <span>{{setDict(item.hpzl,dict.D_BZ_HPZL)}}</span>
              </div>
              <div class="item">
                  人员信息：<span class="text">{{item.jdcsyr}}</span> <span>{{item.jdcsyrsfzh}}</span>
              </div>
              <div class="item">
                  盘查人：<span class="text">{{item.ssbm}}</span> <span>{{item.pcmjXm}}</span>
              </div>
          </div>
      </div>
  </div>
</template>

<script setup>
import { ref, reactive,onMounted,defineProps } from "vue";
import {getDictList,setDict} from '../utils/dict'
const props = defineProps({
  item: Object, //列表内容
  path: String, //跳转详情的路由
  dict: {
    type: Object,
    default: {
      D_BZ_HPZL: []
    },
  },
});
</script>

<style lang="scss" scoped>
@import "../assets/styles/mixin.scss";
.cnt_box{
    margin-top: 2vw;
    padding: 0 4vw;
    box-sizing: border-box;
    .list_box{
        padding: 2vw;
        box-sizing: border-box;
        border-radius: 2vw;
        background: #fff;
        border: 1px solid #e5e5e5;
        .head{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 10vw;
            border-bottom: 1px solid #e9e9e9;
            .time{
                color: #4081e9;
                @include font_size($font_medium_s);
            }
            .bq{
                padding: 1vw 4vw;
                color: #fff;
                border-radius: 4vw;
                @include font_size($font_medium_s);
            }
            .red{
                background: red;
            }
            .orange {
                background-color: #FF802E;
            }
            .yellow {
                background-color: #FFB114;
            }
            .blue{
                background: #3ACDFF;
            }
        }
        .info{
            margin-top: 2vw;
            .item{
                @include font_size($font_medium_s);
                line-height: 6vw;
                .text{
                    margin: 0 4vw;
                }
            }
        }
    }
}
</style>>
