<template>

<div class="event-views">

  <!-- 卡口图片 -->
  <div class="view-block">

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

    <div class="content">
      <ImageSome :images="currentCar.imgs" />
    </div>

    <div class="bar">

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

        <div class="select-content">
          <div
            v-for="xcar in eventCars"
            :key="xcar.text"
            class="x-option act"
            @click="selected = xcar.text"
          >
            {{ xcar.text }}
          </div>
        </div>

      </el-popover>

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


    </div>

  </div>

  <!-- 事件图片 -->
  <div class="view-block">

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

    <div class="content">
      <ImageSome :images="eventImages" />
    </div>

    <div class="bar">
      <div class="text">{{ eventInfo.directionName }} {{ eventInfo.milestone && numToStone(eventInfo.milestone) }}</div>
      <div class="text">{{ eventInfo.createTime }}</div>
    </div>

  </div>

  <!-- 监控视频 -->
  <div class="view-block">

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

    <div class="content">
      <CameraPlayer
        v-if="allCameras[cameraInx]"
        v-bind="{
          frameW: 424,
          frameH: 230,
          vcode: allCameras[cameraInx].cameraIndexCode,
          pileNumber: allCameras[cameraInx].pileNumber
        }"
      />
      
      <div @click="openVideo" class="full-screen"></div>

    </div>

    <div class="bar">

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

  </div>

</div>

</template>

<script lang='ts' setup>

// 组件
import CameraPlayer from '@/views/components/VideoPlayer/index.vue'
import ImageSome from '@/components/ImageSome/index.vue'

// 工具函数
import { useTunnelStoreWithOut } from '@/store/modules/tunnel'
import { numToStone, awaitGet } from '@/utils/tunnel'

// apis
import { eventRemain } from '@/api/event'

// 静态资源
import { DIRECTIONS, CAR_SIMPLE_TYPES } from '@/config/dict'

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

const tunnelStore = useTunnelStoreWithOut()

const eventInfo = ref({}) // 事件信息
const eventImages = ref([]) // 事件图片
const eventCars = ref([]) // 事件车辆
const carSelected = ref(null) // 卡口选中车辆
const cameraInx = ref(null) // 选中摄像机

// 当前选中车
const currentCar = computed(() => {
  return eventCars.value.find(item => item.text === carSelected.value) || {
    text: '', imgs: []
  }
})

// 事件隧洞
const direct = computed(() => {
  return DIRECTIONS.find(item => item.key === eventInfo.value?.tunnelId)
})

// 摄像机
const allCameras = computed(() => {
  if (direct.value) {
    const arr = [...[
      tunnelStore.getUpTunnel,
      tunnelStore.getDownTunnel
    ][direct.value.value].cameras]
    !direct.value && arr.reverse()
    return arr.map((item, x) => {
      return {
        ...item,
        hasPrev: x > 0,
        hasNext: x < arr.length - 1
      }
    })
  } else {
    return []
  }
})

// 计算获取事件位置摄像机
const getEventCamera = async (e) => {

  const sure = await awaitGet(() => tunnelStore.init)
  if (!sure || !e.milestone) return

  if (direct.value.value === 0) {
    cameraInx.value = allCameras.value.findIndex(item => +item.mileStart <= +e.milestone)
  } else {
    cameraInx.value = allCameras.value.findIndex(item => +item.mileStart >= +e.milestone)
  }

  (cameraInx.value < 0) && (cameraInx.value = null)
  
}

// 事件初始化
const evtInit = (e) => {

  eventInfo.value = e

  eventCars.value = e.carInfoList.map(item => {
    return {
      text: `${CAR_SIMPLE_TYPES[item.vehicleType]}(${item.carPlate})`,
      imgs: [item.headImageUrl, item.plateImageUrl].filter(imgx => imgx)
    }
  })

  // 设置默认选中
  carSelected.value = eventCars.value[0]?.text || ''

  getEventCamera(e)

  // 设置事件图片
  eventRemain({ eventId: eventInfo.value.id }).then(res => {
    eventImages.value = res.eventImagesPath
  })

}

onMounted(async () => {
  await awaitGet(() => props.infos)
  evtInit(props.infos)
})

</script>

<style lang='scss' scoped>

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

.event-views {

  position: absolute;
  top: 55px;
  left: 50%;
  z-index: 9;
  width: 1350px;

  // height: 100%;
  margin-left: -675px;
  overflow: hidden;

  display: flex;
  justify-content: space-between;


  .view-block {
    // margin-bottom: 20px;
    position: relative;
    height: 300px;
   
    .header {
      display: flex;
      align-items: center;
      .icon {
        width: 30px;
        height: 30px;
        background: url($Common_Url + 'title.png') no-repeat;
        background-size: cover;
      }
      .text {
        height: 30px;
        line-height: 30px;
        color: white;
        font-size: 14px;
        font-weight: bold;
        padding-left: 15px;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
        background: linear-gradient(90deg, rgba(87, 115, 162, 0.81) 0%, rgba(87, 115, 162, 0) 99%);
      }
    }
    .content {
      width: 424px;
      height: 230px;
      margin-top: 8px;
      background: black;

      .full-screen {
        width: 20px;
        height: 20px;
        background: url($Common_Url + '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;
        }
      }
    }

    .bar {
      width: 424px;
      height: 32px;
      background: rgba(53, 102, 156, 1);
      position: absolute;
      left: 0;
      bottom: 0;
      font-size: 13px;
      font-weight: bold;
      color: white;
      padding: 0 10px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .ctrls {
        display: flex;
        z-index: 3;
        .circle-btn {
          cursor: pointer;
          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: 8px;
          cursor: pointer;
          &.disabled {
            opacity: 0.6;
            cursor: not-allowed;
            pointer-events: none;
          }
        }
      }
    }
  }

}

</style>