<script lang='ts' setup>

import { getCurrentInstance } from 'vue'
import { getCarImages } from '@/api/history'
import { ASYNC_DIRECTIONS, CAR_TYPES } from '@/config/dict'

const BASE_PATH = import.meta.env.VITE_PORT_IMAGE_BASE

const props = defineProps<{
  trackers: any,
  selected: any
}>()

const app = getCurrentInstance()
const imageSome = ref<any>(null)

const infos = computed(() => {

  const temp = {
    title: '',
    averageSpeed: '',
    directionName: '',
    inTunnelTime: '',
    outTunnelTime: '',
    duration: '',
    tunnelId:''
  }
  if (props.selected) {
    Object.keys(temp).forEach(key => {
      if (key === 'title') {
        temp[key] = `${props.selected.carPlate}（${props.selected.carType}）`
      } else {
        temp[key] = props.selected[key]
      }
    })
  }
console.log(temp,'props.selected)')

  return temp

})

const act = ref(0) // 激活图片
const images = ref([]) // 图片资源


// 切换
const handleChange = (e, type) => {

  if (type === 'self') {
    imageSome.value.setAct(e)
    return
  }

  if (type === 'auto') {
    if (e !== act.value) {
      act.value = e
    }
  }
}

// 图片弹窗
const openImage = (urls, str) => {
  app?.proxy?.$openImage(urls, str)
}

watch(
  () => props.trackers?.recordId,
  async id => {
    if (id) {
      const res = await getCarImages({ passProfileId: id })
      images.value = [BASE_PATH + res.headImage, BASE_PATH + res.plateImage]
    }
  },
  {
    immediate: true
  }
)
const directMap = computed(() => {
  return Object.fromEntries(
    ASYNC_DIRECTIONS().map((item) => {
      return [item.seKey, item]
    })
  )
})
</script>

<template>

  <div class="car-view">

    <div class="inner">

      <div class="infos">

        <div class="title">{{ infos.title }}</div>

        <div class="content">

          <div class="i-text">平均车速：{{ infos.averageSpeed }}</div>
          <div class="i-text">方向：
            {{ infos.tunnelId && infos.tunnelId.length ? directMap[infos.tunnelId].name : ''}}
          
          </div>
          <div class="i-text">进入时间：{{ infos.inTunnelTime }}</div>
          <div class="i-text">驶出时间：{{ infos.outTunnelTime }}
          
          </div>
          <div class="i-text">留存时间：{{ infos.duration }}</div>

        </div>

      </div>

      <div class="image-container">
        <ImageSome ref="imageSome" :images="images" @current-change="e => handleChange(e, 'auto')" />
      </div>

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

      <div class="footer">
        <div @click="() => handleChange(0, 'self')" :class="['df-btn', { act: act === 0 }]">车头照片</div>
        <div @click="() => handleChange(1, 'self')" :class="['df-btn', { act: act === 1 }]">车牌照片</div>
      </div>

    </div>

  </div>

</template>

<style lang='scss' scoped>

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

.car-view {

  .inner {
    background: rgba(53, 102, 156, 0.7);
    border-radius: 2px;
    position: relative;
    // box-shadow: 0 0 12px #00DDFF;
  }

  .infos {
    color: white;
    padding: 10px 12px;
    .title {
      font-size: 18px;
      font-weight: 500;
      line-height: 28px;
    }
    .content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-row-gap: 5px;
      margin-top: 5px;
      .i-text {
        font-size: 14px;
      }
    }
  }

  width: 583px;
  margin-top: 12px;
  position: relative;

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

  .footer {
    width: 100%;
    z-index: 2;
   
    padding: 9px 12px;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    color: white;
    font-size: 14px;

    .df-btn {
      width: 88px;
      height: 32px;
      border-radius: 4px;
      background: rgba(0, 125, 250, 0.15);
      text-align: center;
      line-height: 32px;
      border: 1px solid rgba(0, 125, 250, 0.15);
      margin-right: 10px;
      cursor: pointer;
      &.act {
        background: rgba(124, 213, 255, 0.15);
        border: 1px solid #7CD5FF;
        color: #00DDFF;
      }
    }
  }
  .full-screen {
    width: 20px;
    height: 20px;
    background: url($base-common + 'full-screen.png') no-repeat;
    background-size: cover;
    position: absolute;
    z-index: 2;
    bottom: 60px;
    right: 12px;
    z-index: 3;
    cursor: pointer;
    transition-property: all;
    transition-duration: 0.2s;
    &:hover {
      box-shadow: 0 0 10px #a1a1a1;
    }
  }
}

</style>