<template>
  <div class="detailTunnel_topbar">
    <div class="eb-text">
      事件情况：{{ eventData.alarmDt || '-' }} 在{{ eventData.highSpeedLoad || '-' }}
      {{ eventData.direction || '-' }} {{ eventData.mill || '-' }}  发生{{
        eventData.alarmType || '-'
      }}
      <el-button plain type="danger" class="cencel-btn" @click="trackCancel"> 处 置 </el-button>
    </div>
    <div class="eb-sub">
      <div class="x-sub"> 持续时间：1分钟23秒 </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps<{
  eventData: any
}>()
// import { computed } from 'vue'
// import { CAR_TYPES } from '@/config/dict'

// import { useTunnelStoreWithOut } from '@/store/modules/tunnel'
// import { numToStone } from '@/utils/tunnel'

// 取消追踪
const trackCancel = () => {
  // trackers.value.tracking = false
  // trackers.value.cameraLock = false
}
</script>

<style lang="scss" scoped>
$base-url: '@/assets/images/home/';

.detailTunnel_topbar {
  margin: 18px 45px 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .eb-text {
    display: flex;
    align-items: center;
    width: 1200px;
    color: white;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    background: linear-gradient(270deg, rgba(250, 81, 81, 0) 0%, #fa5151 100%);
    .cencel-btn {
      height: 28px;
      width: 80px;
      margin-left: 10px;
      background: transparent;
      color: white;
      &:hover {
        color: #fa5151;
      }
    }
  }
  .eb-sub {
    display: flex;
    align-items: center;
    color: white;
    .x-sub {
      display: flex;
      align-items: center;
      font-size: 14px;
      .icon {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
      &:nth-child(1) {
        .icon {
          background: url($base-url + 'remain.png') no-repeat;
          background-size: cover;
        }
      }
      &:nth-child(2) {
        // margin-right: 30px;
        margin: 0 16px;
        .icon {
          background: url($base-url + 'speed.png') no-repeat;
          background-size: cover;
        }
      }
      &:last-child {
        .icon {
          background: url($base-url + 'distance.png') no-repeat;
          background-size: cover;
        }
      }
    }
  }
}
</style>
