<template>

<div class="videos">
 
  <div key="block_1" class="x-block">

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

      <template v-if="!carImages[selected]">
        <div class="empty"></div>
        <div class="footer"></div>
      </template>

      <template v-else>
        <div class="image-container">
          <ImageSome :images="carImages[selected].images" />
        </div>

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

        <div class="footer">

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

            <div class="select-content">
              <div
                v-for="(xcar, x) in carImages"
                :key="xcar.name"
                class="x-option act"
                @click="selected = x"
              >
                {{ xcar.name }}
              </div>
            </div>

          </el-popover>

          <div v-else class="text">
            {{ carImages[selected].name}}
          </div>

        </div>
      </template>

    </div>

  </div>

  <div key="block_2" class="x-block">

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

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

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

    </div>

  </div>

  <MediaPlayer v-if="isMocking" v-bind="{ milestone, file: videopath }" />

  <div v-else key="block_3" class="x-block">

    <div class="header">
      <div class="icon"></div>
      <div class="text">监控视频</div>
    </div>

    <div class="content">

      <div class="tips">
        <Timer symbols="/" />
        <div class="text">全息断面  {{ nowCamera.section }}</div>
      </div>

      <div class="player-content">
        <VideoPlayer
          v-if="nowCamera.cameraIndexCode"
          v-bind="{
            frameW: 583, frameH: 285,
            vcode: nowCamera.cameraIndexCode,
            pileNumber: nowCamera.pileNumber
          }"
        />
      </div>
      

      <div class="ctrls">
        <div @click="cameraChange('prev')" :class="['circle-btn', { disabled: !nowCamera?.hasPrev }]">上一路</div>
        <div @click="cameraChange('next')" :class="['circle-btn', { disabled: !nowCamera?.hasNext }]">下一路</div>
      </div>
      <div @click="openVideo" class="full-screen"></div>

      <div class="footer">{{ nowCamera?.pileNumber }}</div>

    </div>

  </div>

</div>

</template>

<script lang='ts' setup>

import { getCurrentInstance } from 'vue'
import { CAR_TYPES } from '@/config/dict'
import { ROAD_DIRECTION } from '@/config/enum'
import { numToStone } from '@/utils/tunnel'
import { useTunnelStoreWithOut } from '@/store/modules/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 { isMocking, direct } from '@/flash/Detail'
import { getRoadCameras, getComputedCamera } from '@/flash/Common'

const props = defineProps<{
  carImages: any[],
  evtImages: any[],
  milestone: number,
  videopath: any
}>()

const app = getCurrentInstance()
const selected = ref(0) // 默认选中车辆
const tunnelStore = useTunnelStoreWithOut()


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

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

  const camera = getComputedCamera(direct.value, props.milestone)

  if (!camera) {
    return {
      pileNumber: '', cameraIndexCode: ''
    }
  }

  return camera

})

// 摄像头切换
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 {
     height: 350px;
    .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,
      .empty{
        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>