<template>

<div class="videos">

  <div class="x-block">

    <div class="header">
      <div class="icon"></div>
      <div class="text">卡口抓拍图片</div>
    </div>
    <div class="content">

      <div class="image-container">
        <ImageSome :images="nowCar.images" />
      </div>

      <div @click="openImage(nowCar.images, '卡口抓拍图片')" class="full-screen"></div>

      <div class="footer">

        <el-popover
          v-if="params.carImages.length > 1"
          placement="bottom-start"
          popper-class="car-select"
          width="auto"
          :teleported="false"
          :show-arrow="false"
          trigger="click"
        >
          <template #reference>
            <div class="text">
              {{ nowCar.name }}
            </div>
          </template>

          <div class="select-content">
            <div v-for="xcar in params.carImages" :key="xcar.name" class="x-option act">{{ xcar.name }}</div>
          </div>

        </el-popover>

        <div v-else class="text">
          {{ nowCar.name}}
        </div>

      </div>

    </div>

  </div>

  <div class="x-block">

    <div class="header">
      <div class="icon"></div>
      <div class="text">事件抓拍图片</div>
    </div>
    <div class="content">

      <div class="image-container">
        <ImageSome :images="params.eventImages" />
      </div>

      <div @click="openImage(params.eventImages, '事件抓拍图片')" class="full-screen"></div>
      
      <div class="footer">
        <div class="text">{{ numToStone(params.milestone) }}</div>
      </div>

    </div>

  </div>

  <MediaPlayer
    v-bind="{ milestone: params.milestone, file: params.eventVideo }"
  />

</div>

</template>

<script lang='ts' setup>

import { getCurrentInstance } from 'vue'
import { CAR_TYPES } from '@/config/dict'
import { ROAD_DIRECTION } from '@/config/enum'
import { inject } from 'vue'
import { numToStone } from '@/utils/tunnel'

import ImageSome from '@/components/ImageSome/index.vue'
import VideoPlayer from '@/views/components/VideoPlayer/index.vue'
import ImageView from '@/components/ImageView/index.vue'
import MediaPlayer from '../MediaPlayer/index.vue'

import { getRoadCameras, getComputedCamera } from '@/flash/Common'

const props = defineProps<{
  eventData: any
}>()

const app = getCurrentInstance()
const carSelected = ref(0) // 选中车辆

const direction = computed(() => getParams('direction')) // 方向

const params = reactive({
  milestone: 0, // 事件桩米号
  eventVideo: '', // 回溯视屏
  eventCars: [], // 事件车辆
  eventImages: [], // 事件图片
  carImages: [] // 车辆图片
})

watch(
  () => props.eventData,
  e => {
    if (e) { // 初始化
      params.milestone = +e.milestone
      params.eventVideo = e.videoPath || ''
      params.eventCars = e.carInfoList
      params.eventImages = e.eventImagesPath || []
      params.carImages = e.bayonetImage?.map(item => {
        return {
          name: item.carPlate,
          images: item.imagePath
        }
      }) || []
    }
  },
  {
    immediate: true
  }
)

// 当前车辆
const nowCar = computed(() => {
  return params.carImages[carSelected.value] || { name: '', images: [] }
})

// 所有摄像机
const allCameras = computed(() => {
  return getRoadCameras(direction.value)
})

// 当前摄像机
const nowCamera = computed(() => {

  if (params.milestone === 0 || allCameras.value.length === 0) {
    return {
      pileNumber: '',
      cameraIndexCode: ''
    }
  }

  const xCamera = getComputedCamera(direction.value, params.milestone)

  return xCamera

})

// 摄像头切换
const cameraChange = (type) => {

  if (!nowCamera.value) return
  const x = type === 'prev' ? nowCamera.value.realx - 1 : nowCamera.value.realx + 1
  setCamera(allCameras.value[x].id)

}

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

// 视频预览
const openVideo = () => {
  app?.proxy?.$openVideo(nowCamera.value)
}

defineExpose({
  cameraSet (e) {
    nowCamera.value = allCameras.value.find(item => item.id === e.id)
  }
})

</script>

<style lang='scss' scoped>

$base-url: '@/assets/images/event/';
$base-common: '@/assets/images/common/';

.videos {
  margin: 32px 50px 50px;
  display: flex;
  justify-content: space-between;

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

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

  .x-block {
    .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 {
      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>