<template>

<div class="event-bar">

  <div class="eb-text">
    事件情况：{{ params.situation }}

    <div class="flash-back">
      <div v-if="!params.generated" class="flash-status">
        <Icon class="loading-spinner" icon="ep:loading" /> 事件回溯生成中
      </div>
    </div>

  </div>
  
</div>

</template>

<script lang='ts' setup>
import { CAR_TYPES } from '@/config/dict'

const props = defineProps<{
  eventData
}>()

const params = reactive({
  situation: '未录入',
  status: false, // 事件是否未处置
  generated: false // 是否已生成回溯数据
})

// 车辆类型
const CAR_MAP = Object.fromEntries(CAR_TYPES.map(item => {
  return [item.type, item.name]
}))

// 事件情况
const eventDes = (info: any)=>{
  const { eventStartTime, carInfoList, eventSituation, nonVehicleFlag } = info

  let str = eventStartTime.slice(0, -3) + ' '
  
  let carList = carInfoList?.map(t=>{
    return `${CAR_MAP[t.vehicleType]}(${t.carPlate})`
  }) || []

  if(nonVehicleFlag) carList = []

  str+=`${carList.join('、')} ${eventSituation}`

  return str

}

watch(
  () => props.eventData,
  e => {
    if (e) {
      // params.situation = e.eventSituation
      params.situation = eventDes(e)
      params.status = e.eventStatus === 0
      params.generated = e.existHisData
    }
  }
)

const goHandle = () => {
  emits('event-handle')
}

</script>

<style lang='scss' scoped>

$base-url: '@/assets/images/event/';
$base-common: '@/assets/images/common/';

.event-bar {
  margin: 18px 45px 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .eb-text {
    display: flex;
    align-items: center;
    width: 1300px;
    color: white;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    background: linear-gradient(270deg, rgba(250, 81, 81, 0) 0%, #FA5151 100%);
  }
  .eb-sub {
    display: flex;
    align-items: center;
    color: white;
    .icon {
      width: 24px;
      height: 24px;
    }
    display: flex;
  }
  .flash-back {
    position: relative;
    .btn-2 {
      height: 24px;
      // width: 70px;
      padding: 0 8px;
      margin-left: 10px;
      font-size: 12px;
      color: white;
      background: transparent;
    }
    .flash-status {
      color: white;
      font-size: 12px;
      white-space: nowrap;
      margin-left: 10px;
      display: flex;
      align-items: center;
      :deep(.el-icon) {
        margin-right: 2px;
      }
    }
  }
}

</style>