<template>

  <el-dialog
    class="event-pop"
    v-model="state"
    width="445"
    :align-center="true"
  >
  
    <div class="content">
  
      <div class="images">
        <el-image
          :style="{ height: '100%', width: '100%' }"
          :src="IMAGE_BASE + nowEvent.eventImagesPath[0]"
          fit="contain"
        >
          <template #error>
            <div class="image-error">
              <Icon icon="ep:picture" />
            </div>
          </template>
        </el-image>
      </div>
  
      <div class="lines">
  
        <div class="line-ttl">
          <div class="ttl">{{ nowEvent.directionalPosition }}</div>
        </div>
  
        <div class="line-text">
          <div class="name">关联车辆：</div>
          <div class="text">{{ nowEvent.eventCarPlate.join('、') }}</div>
        </div>
        
      </div>
  
    </div>
  
    <template #footer >
  
      <div class="footer">
  
        <div class="cols">
  
          <div class="col-x">
            <div class="icon"></div>
            <div class="text">
              持续：{{ nowEvent.retainedTime || '' }}
            </div>
          </div>
  
        </div>
  
        <el-button @click="goDetail" class="def-btn">事件详情</el-button>
  
      </div>
    </template>
    
  
  </el-dialog>
  
  </template>
  
  <script lang='ts' setup>
  
  import { useRouter } from 'vue-router'
  
  const IMAGE_BASE = import.meta.env.VITE_IMAGE_BASE

  const props = withDefaults(defineProps<{
    events: any[]
  }>(), {
    events: () => []
  })
  
  const selected = defineModel<string | null>()
  const router = useRouter()

  const nowEvent = computed(() => {
    const {
      eventImagesPath = [],
      directionalPosition = '',
      eventCarPlate = [],
      retainedTime = ''
    } = props.events.find(item => item.id === selected.value) || {}

    return {
      eventImagesPath,
      directionalPosition,
      eventCarPlate,
      retainedTime
    }
  
  })

  // 状态
  const state = computed({
    get () {
      return Boolean(selected.value)
    },
    set (e) {
      if (!e) {
        selected.value = null
      }
    }
  })
  
  // 事件详情
  const goDetail = () => {
    router.push({
      path: 'detail',
      query: {
        id: selected.value,
        from: 'home'
      }
    })
  }

  </script>
  
  <style lang='scss' scoped>
  
  $base_url: '@/assets/images/home/';
  
  .content {
    display: flex;
    align-items: center;
    color: white;
    padding: 16px;
    .images {
      width: 74px;
      height: 74px;
      background: #eaeaea;
      flex-shrink: 0;
      :deep(.image-error) {
        height: 100%;
        width: 100%;
        background: #EAEAEA;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666666;
      }
    }
    .lines {
      flex-grow: 1;
      margin-left: 12px;
      .line-ttl {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
        .ttl {
          font-size: 18px;
          font-weight: 600;
          line-height: 18px;
          text-align: left;
        }
        .icon {
          width: 21px;
          height: 20px;
          background: url($base_url + 'collect_1.png') no-repeat;
          background-size: cover;
          cursor: pointer;
          &.collected {
            background: url($base_url + 'collect_2.png') no-repeat;
            background-size: cover;
          }
        }
      }
      .line-text {
        display: flex;
        margin-bottom: 3px;
      }
    }
  }
  
  .footer {
    height: 47px;
    background: rgba(69, 116, 182, 0.36);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 19px;
    color: white;
    .cols {
      display: flex;
      .col-x {
        display: flex;
        align-items: center;
        font-size: 14px;
        .icon {
          width: 24px;
          height: 24px;
          margin-right: 8px;
          // background: salmon;
          background: url($base_url + 'processive.png') no-repeat;
          background-size: cover;
        }
        
      }
      
    }
  }
  
  </style>
  
  <style lang="scss">
  
  .event-pop {
    padding: 0;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: #0D3561;
    border-radius: 4px;
  
    .el-dialog__header {
      display: none;
    }
    .el-dialog__footer {
      padding-top: 0;
    }
    .def-btn {
      background: #1270FF;
      border: 1px solid rgba(155, 193, 255, 0.74);
      height: 28px;
      padding: 8px 10px;
      color: white;
      &:hover {
        border: 1px solid rgba(255, 255, 255, 0.8);
      }
    }
  }
  
  </style>