<template>

<div class="event-bar">

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

    <el-button
      v-if="!handled"
      class="btn-1"
      type="danger"
      size="small"
      @click="goHandle('start')">
        处置
    </el-button>

    <div class="flash-back">

      <div v-if="!historyed" class="flash-status">
        <Icon class="loading-spinner" icon="ep:loading" /> 事件回溯生成中
      </div>
      <el-button @click="eventFlash" v-else-if="!isMocking" class="btn-2">
        事件回溯
      </el-button>
    </div>

  </div>
  
  <HandlePop @update="e => goHandle('complete')" ref="evtPop" />
  
</div>


</template>

<script lang='ts' setup>

import HandlePop from '@/views/components/HandlePop/index.vue'
import { useRouter } from 'vue-router'

import { historyed, isMocking, startFlows } from '@/flash/Detail'

const props = defineProps<{
  id,
  info,
  handled
}>()

const evtPop = ref(null) // 弹窗实例
const router = useRouter() 

// 车流回溯
const eventFlash = () => {
  isMocking.value = true
  startFlows()
}

// 事件处理
const goHandle = (state) => {
  
  if (state === 'start') {
    evtPop.value.diaOpen({ id: props.id })
    return
  }

  const { from } = route.query
  router.replace({
    path: from as any
  })
  
}

</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%);
    .btn-1 {
      height: 24px;
      width: 50px;
      margin-left: 10px;
    }
  }
  .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>