<template>
  <div class="detailTunnel_vedio p-b-30px">
    <el-row :gutter="32">
      <el-col :span="12">
        <div key="block_1" class="x-block">
          <div class="header">
            <div class="icon"></div>
            <div class="text">报警图片信息</div>
          </div>
          <div class="content-box">
            <div class="content">
              <div class="image-container">
                <ImageSome :images="[data.imagePath]" />
              </div>

              <div @click="openImage([data.imagePath], '报警图片信息')" class="full-screen"></div>

              <div class="footer">
                <div class="text"> {{eventData.mill || '-' }} </div>
              </div>
            </div>
          </div>
        </div></el-col
      >
      <el-col :span="12">
        <div key="block_2" class="x-block">
          <div class="header">
            <div class="icon"></div>
            <div class="text">报警视频信息</div>
          </div>
          <div class="content-box">
            <div class="content">
              <div class="image-container">
                <ImageSome :images="[data.videoPath]" />
              </div>

              <div @click="openImage([data.videoPath], '报警视频信息')" class="full-screen"></div>

              <div class="footer">
                <div class="text"> {{eventData.mill || '-' }}</div>
              </div>
            </div>
          </div>
        </div></el-col
      >
    </el-row>

    <el-row :gutter="32" style="margin-top: 40px">
      <el-col :span="12">
        <div key="block_1" class="x-block">
          <div class="header">
            <div class="icon"></div>
            <div class="text">第三方处置结果</div>
          </div>
          <div class="text_style">{{
            eventData.handleVos && eventData.handleVos.length ? '' : '无'
          }}</div>
        </div>
      </el-col>
      <el-col :span="12">
        <div key="block_2" class="x-block">
          <div class="header">
            <div class="icon"></div>
            <div class="text">预案执行信息</div>
          </div>
          <div class="text_style">
            {{ eventData.rpLogId ? eventData.rpLogId : '未执行预案，无预案执行日志' }}</div
          >
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
const app = getCurrentInstance()
import { gettunnelEventresource } from '@/api/event'
import { useRoute, useRouter } from 'vue-router'

const props = defineProps<{
  eventData: any
}>()
const data = ref({
  imagePath: [
    'http://12.1.150.117:10000/gfjsd/iot/images/AE6231757/2024-11-18/head_20241118204739_59c79992-a5ee-11ef-8cc7-f0f64c9135bc.jpg'
  ]
})
const route = useRoute()

onBeforeMount(() => {
  if (!route.query.id) {
    return ElMessage.error('链接错误！')
  }

  const id = route.query.id
  const res = gettunnelEventresource({ alarmId: id })
  // data.value = {
  //   id: null,
  //   alarmId: null,
  //   imagePath:
  //     'http://12.1.150.117:10000/gfjsd/iot/images/AE6231757/2024-11-18/head_20241118204739_59c79992-a5ee-11ef-8cc7-f0f64c9135bc.jpg',
  //   videoPath:
  //     'http://12.1.150.117:10000/gfjsd/iot/images/AE6231757/2024-11-18/plate_20241118204739_59c79992-a5ee-11ef-8cc7-f0f64c9135bc.jpg',
  //   deviceId: 'AE6231757',
  //   deviceCode: null
  // }
})

// 图片预览
const openImage = (images, name) => {
  app?.proxy?.$openImage(images, name)
}
</script>

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

.detailTunnel_vedio {
  margin: 32px 50px 0px;

  &:deep(.el-image__error) {
    background: transparent;
  }

  &:deep(.el-image__placeholder) {
    background: transparent;
  }

  .x-block {
    // height: 350px;
    .text_style {
      padding: 16px;
      border-radius: 8px;
      background: rgba(69, 116, 182, 0.2);
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
      color: #ffffff;
      font-size: 14px;
      margin-top: 12px;
      min-height: 150px;
    }
    .header {
      display: flex;
      align-items: center;
      .icon {
        height: 30px;
        width: 30px;
        background: url($base-url + 'title.png') no-repeat;
        background-size: cover;
        margin-right: 2px;
      }
      .text {
        padding: 0 30px 0 12px;
        font-size: 16px;
        font-weight: 600;
        color: white;
        height: 30px;
        display: flex;
        align-items: center;
        border-radius: 30px 0 0 30px;
        background: linear-gradient(90deg, rgba(87, 115, 162, 0.81) 0%, rgba(87, 115, 162, 0) 99%);
      }
    }
    .content-box {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: rgba(69, 116, 182, 0.2);
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
      margin-top: 12px;
    }
    .content {
      width: 583px;
      height: 317px;
      // margin-top: 12px;
      position: relative;

      .image-container {
        width: 583px;
        height: 285px;
        background: black;
        position: relative;
      }

      .player-content {
        width: 583px;
        height: 285px;
        background: black;
        position: relative;
      }

      .image-x {
        width: 100%;
        height: 100%;
      }

      .footer {
        height: 32px;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 2;
        background: rgba(53, 102, 156, 0.7);
        padding: 0 12px;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        color: white;
        font-size: 14px;
      }
      .full-screen {
        width: 20px;
        height: 20px;
        background: url($base-common + 'full-screen.png') no-repeat;
        background-size: cover;
        position: absolute;
        z-index: 2;
        bottom: 42px;
        right: 12px;
        z-index: 3;
        cursor: pointer;
        transition-property: all;
        transition-duration: 0.2s;
        &:hover {
          box-shadow: 0 0 10px #a1a1a1;
        }
      }
      .ctrls {
        display: flex;
        position: absolute;
        bottom: 42px;
        left: 12px;
        z-index: 3;
        .circle-btn {
          background: rgba(32, 58, 96, 0.5);
          border: 1px solid #00ddff;
          width: 66px;
          height: 24px;
          font-size: 14px;
          color: #00ddff;
          border-radius: 12px;
          text-align: center;
          line-height: 22px;
          box-sizing: border-box;
          margin-right: 14px;
          cursor: pointer;
          &.disabled {
            opacity: 0.6;
            cursor: not-allowed;
            pointer-events: none;
          }
        }
      }
      .tips {
        position: absolute;
        left: 10px;
        top: 10px;
        z-index: 2;
        color: white;
        font-size: 14px;
        text-align: left;
      }
    }
  }
}
</style>
