<template>

  <div class="event-bar">
  
    事件情况：{{ evtFmt.info }}
  
    <el-button
      v-if="!handled"
      class="btn-1"
      type="danger"
      size="small"
      @click="goHandle">
        处置
    </el-button>
  
    <div class="flash-back">
  
      <div v-if="!evtFmt.historyed" class="flash-status">
        <Icon class="loading-spinner" icon="ep:loading" /> 事件回溯生成中
      </div>
      <el-button size="small" v-else class="btn-2">
        事件回溯
      </el-button>
      <el-button @click="emits('go-handle')" size="small" class="btn-0">返回</el-button>
    </div>
  
  
  </div>
  
  </template>
  
  <script lang='ts' setup>
  
  const props = defineProps<{
    infos: any
  }>()
  
  const emits = defineEmits(['go-handle'])
  
  const evtFmt = computed(() => {

    const temp = { info: '', handled: false, historyed: true }
    if (props.infos) {
      temp.info = props.infos.eventSituation
    }
    return temp

  })

  const goHandle = () => {
    emits('go-handle', 'start')
  }

  
  </script>
  
  <style lang='scss' scoped>
  
  .event-bar {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    padding: 4px 30px 4px 30px;
    color: white;
    font-size: 14px;
    margin-left: 10px;
    background: linear-gradient(270deg, rgba(255, 81, 81, 0) 0%, rgba(255, 81, 81, 0.7) 16%, rgba(255, 81, 81, 0.7) 83%, rgba(255, 81, 81, 0) 100%);
    border-radius: 18px;
    .eb-text {
      display: flex;
    }
  
    .btn-1, .btn-2 {
      margin-left: 10px;
    }

    .btn-0 {
      margin-right: 10px;
    }
    
  }
  
  </style>