<template>

<el-popover
  :offset="-36"
  :width="450"
  :show-arrow="false"
  :teleported="false"
  popper-class="self-event-popover"
  trigger="click"
>

  <template #reference>

    <div v-if="selected" class="event-act">
      <div v-show="infos.evType" class="type-text">{{ infos.evType }}</div>
    </div>

    <div v-else class="event-tip">
      <div v-show="infos.evType" class="type-text">{{ infos.evType }}</div>
    </div>

    
  </template>

  <div class="evt-card">

    <div class="content">
      <div class="img"></div>
      <div class="context">
        <div class="title">{{ infos.infotext }}</div>
        <div class="subs">
          <div class="name">关联车辆：</div>
          <div class="text">{{ infos.subtext }}</div>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="text">持续 {{ infos.remain }}</div>
      <div class="text">数据来源：{{ infos.source }}</div>
      <div @click.stop="toDetail" class="i-btn">事件详情</div>
    </div>
    
  </div>

</el-popover>

</template>

<script lang='ts' setup>

import { locate } from '@/views/3DModel/_state'

const EVENT_TYPES = {
  0: '急加速',
  1: '急减速',
  2: '实线变道',
  3: '蛇形驾驶',
  4: '逆行',
  5: '拥堵',
  6: '可疑事件',
  7: '追尾',
  8: '停车',
  100: '其他'
}

const CAR_TYPES = ['危化品车', '客车', '轿车', '货车', '其他车']

// 事件详细
const infos = ref({
  id: null,
  evType: '',
  infotext: '',
  subtext: '',
  remain: '',
  source: ''
})

// 是否被选中
const selected = ref(false)

// 初始化
const eventInit = (evt) => {

  const { id, eventType = null, infotext = '', cars = [], remain = '', source } = evt
  const evType = EVENT_TYPES[eventType] || ''
  const subtext = cars.map(item => {
    const { plate, type } = item
    return `${CAR_TYPES[type]}(${plate})`
  }).join('、')

  infos.value = {
    id,
    evType,
    infotext,
    subtext,
    remain,
    source: ['隧道管控', '全息隧道'][source] || ''
  }
}

// 设置标定
const setSelect = (e) => {
  selected.value = e
}

// 前往详情
const toDetail = () => {
  // console.log('aaa---')
}

defineExpose({
  eventInit,
  setSelect
})

</script>

<style lang='scss' scoped>

$Common_Url: "@/assets/images/3d/";

.type-text {
  padding: 4px 10px;
  background: #7A260F;
  border: 1px solid #F7A852;
  box-sizing: border-box;
  position: absolute;
  top: -32px;
  left: 50%;
  font-size: 12px;
  transform: translateX(-50%);
  color: white;
  white-space: nowrap;
  border-radius: 4px;
}

.event-act {
  width: 66px;
  height: 82px;
  position: relative;
  background: url($Common_Url + 'event.png') no-repeat;
  background-size: cover;
  position: relative;
  margin-top: -55px;
  animation-name: wave;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: center bottom;

  .type-text {
    font-size: 20px;
    top: -42px;
    // color: #DD6365;
    background: #8E3740;
    box-shadow: 0 0 20px #DD6365;
  }
}

.event-tip {
  width: 24px;
  height: 32px;
  position: relative;
  background: url($Common_Url + 'crowded.png') no-repeat;
  background-size: cover;
  position: relative;

  animation-name: show;
  animation-duration: 0.6s;
  transform-origin: center bottom;
  transform: scale(0.6);
  animation-fill-mode: forwards;
  margin-top: -32px;
}

.evt-card {
  width: 450px;
  background: #0D3561;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  color: white;
 

  .content {
    display: flex;
    padding: 16px;
    .img {
      width: 74px;
      height: 74px;
      border-radius: 4px;
      flex-shrink: 0;
      border: 1px solid white;
    }
    .context {
      margin-left: 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        font-size: 16px;
        font-weight: 600;
      }
      .subs {
        display: flex;
        font-size: 12px;
        .name {
          font-weight: bold;
        }
        
      }
    }
  }

  .bottom {
    display: flex;
    height: 42px;
    background: rgba(69, 116, 182, 0.36);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    box-sizing: border-box;
    font-size: 12px;
    .i-btn {
      cursor: pointer;
      background: #1270FF;
      border: 1px solid rgba(155, 193, 255, 0.74);
      padding: 3px 8px;
      border-radius: 4px;
    }
  }

}

@keyframes show {
  0% {
    transform: scale(0.6);
  }
  72% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes wave {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0);
  }
}

</style>

<style lang="scss">

.el-popper {
  &.self-event-popover {
    padding: 0;
    border: none;
    margin-top: -70px;
  }
}



</style>