<template>

<div class="out-direction">

  <div class="main-road">

    <!-- 路面层 -->
    <div class="level-road">

      <div class="entry"></div>
      <div class="export"></div>

      <!-- 虚实线 -->
      <div class="line">
        <div
          v-for="(item, x) in lines"
          :key="x"
          :class="['x-line', item.type]"
          :style="{
            width: item.long + 'px',
            left: item.x + 'px'
          }"
        >
        </div>
      </div>

      <!-- 车流层 -->
      <div
        v-for="item in cars"
        :class="classFix(item)"
        :key="item.id"
        :style="item.style"
        @click="goCollect(item)"
      >
        <div class="core"></div>
        <div class="nameplate">{{ item.originalCar.carPlate }}</div>
        <div class="tracker" v-if="trackCar === item.id"></div>
      </div>

      <!-- 事件层 -->
      <EventDot v-for="item in events" :key="item.id" :point="item" />

    </div>

     <!-- 摄像机层 -->
     <div class="level-camera">
      <div
        v-for="(item, x) in cameras"
        :key="x"
        :style="{ left: item.x + 'px' }"
        :class="['x-camera', { act: item.act }]"
        @click="openVideo"
      >
        <div v-if="item.act" class="pile">{{ item.pileNumber }}</div>
      </div>
    </div>

  </div>

  <!-- 刻度线 -->
  <div class="scales">

    <template v-for="(_, x) in sections" :key="x">
      <div :class="['x-dot', { 'act': x % 3 === 0 }]"></div>
      <div :style="{flexGrow: _.grow}" class="x-scale"></div>
      <div v-if="(x + 1) === sections.length" class="x-dot act"></div>
    </template>

  </div>

  <!-- 段面控制器 -->
  <div class="sections">
    <div
      v-for="(_, x) in sections"
      :key="x"
      :style="{flexGrow: _.grow}"
      @click="goSection(x)"
      class="x-section"
    >
    </div>
  </div>

</div>

</template>

<script lang='ts' setup>

const IMAGE_BASE = import.meta.env.VITE_IMAGE_BASE

import { withDefaults, defineProps } from 'vue'
import EventDot from '../EventDot/index.vue'


const props = withDefaults(defineProps<{
  cars?: any[] // 车流
  events?: any[] // 事件
  cameras?: any[] // 摄像机
  lines?: any[] // 路面虚实线
  sections?: any[] // 段面控制
  filterType?: null | string // 筛选类型
  trackCar?: null | string // 追踪车辆
}>(), {
  cars: () => [],
  events: () => [],
  cameras: () => [],
  lines: () => [],
  sections: () => [],
  filterType: null,
  trackCar: null
})

const emits = defineEmits(['go-section', 'go-collect', 'open-video'])

const getImage = (item) => {
  return {
    background: `url(${IMAGE_BASE}${item.originalCar.carImageUrl}) no-repeat`,
    backgroundSize: 'auto 100%'
  }
}

// 进入缎面模式
const goSection = (x) => {
  emits('go-section', {
    x,
    direction: 1,
    to: 'section'
  })
} 

// 收藏
const goCollect = (car) => {
  emits('go-collect', car)
}

// 打开视频 pop
const openVideo = () => {
  emits('open-video')
}

const classFix = (item) => {

  const { type, originalCar: { isFocusMark, isDangerous } } = item
  const classArr = ['running-car', 'type-' + type]

  if (isDangerous) {
    classArr.push('danger')
  } else if (isFocusMark) {
    classArr.push('collected')
  } else if (type == props.filterType) {
    classArr.push('selected')
  }

  return classArr

}

</script>

<style lang='scss' scoped>

@import url(@/views/traffic/css/car.scss);

$base-url: '@/assets/images/home/';

.out-direction {
  text-align: center
}

.main-road {
  height: 90px;
  position: relative;
  .level-road {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    background: url($base-url + 'road.png');
    background-size: auto 100%;
    .entry {
      height: 90px;
      width: 90px;
      background: url($base-url + 'entry.png') no-repeat;
      background-size: 100% 90.5px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .export {
      height: 90px;
      width: 90px;
      background: url($base-url + 'entry.png') no-repeat;
      background-size: 100% 90.5px;
      position: absolute;
      right: 0;
      top: 0;
      transform: rotateY(180deg);
      z-index: 1;
    }
    .line {
      height: 2px;
      position: absolute;
      top: 50%;
      width: 100%;
      margin-top: -1px;
      .x-line {
        height: 2px;
        position: absolute;
        &.dash {
          background: url($base-url + 'dash.png');
          background-size: 30px 2px;
        }
        &.solid {
          background: rgba($color: #ffffff, $alpha: .8)
        }
      }

    }
    .running-car {
      
      width: 36px;
      height: 12px;
      left: -60px;

      .nameplate {
        font-size: 12px;
        top: -24px;
        padding: 2px 5px;
      }

      .core {
        transform: rotate(180deg);
      }

    }
  }
}

.level-camera {
  width: 100%;
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;

  .x-camera {
    width: 24px;
    height: 24px;
    cursor: pointer;
    position: absolute;
    transform: translateY(-50%);
    
    background: url($base-url + 'camera_3.png');
    background-size: cover;

    &.act {
      background: url($base-url + 'camera_4.png');
      background-size: cover;
    }

    .pile {
      position: absolute;
      font-size: 14px;
      font-weight: 600;
      color: #42E7FF;
      left: 0;
      bottom: -18px;
      left: 0;
      margin-left: -50%;
    }
  }
}


.scales {
  display: flex;
  margin: 38px 90px 0;

  .x-scale {
    // flex-grow: 1;
    height: 2px;
    margin-top: 6px;
    background: #1F5080;
    &:nth-last-of-type(2) {
      flex-grow: 0.2;
    }
  }

  .x-dot {
    width: 2px;
    height: 2px;
    background: #1F5080;
    margin-top: 6px;
    &.act {
      height: 8px;
      transform: translateY(-6px);
    }
  }
}

.sections {
  display: flex;
  margin: 0 90px 0;
  .x-section {
    // flex-grow: 1;
    height: 12px;
    border-radius: 32px;
    background: #1F5080;
    cursor: pointer;
    margin-right: 1px;
    transition-property: all;
    transition-duration: 0.3s;
    &:last-child {
      flex-grow: 0.2;
    }
    &:hover {
      box-sizing: border-box;
      background: rgba(0, 221, 255, 0.3);
      border: 1px solid rgba(0, 221, 255, 1);
      box-shadow: 0 0 10px rgba(0, 221, 255, 1);
    }
  }
}

.ctrls {
  display: inline-flex;
  align-items: center;
  height: 42px;
  margin: 15px auto 0;
  .title {
    color: white;
    width: 316px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-image: url($base-url + 'arrow_rgt.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0 bottom;
    padding-bottom: 4px;

    .text {
      font-size: 24px;
      font-weight: 600;
    }
    .more {
      font-size: 16px;
      color: rgba(240, 245, 255, 0.95);
      display: flex;
      margin-right: 32px;
    }
  }
}

.filters {
  display: flex;
  margin-left: 15px;
  .x-car {
    height: 32px;
    font-size: 14px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    color: #ffffff;
    background: rgba(0, 125, 250, 0.15);
    margin-left: 8px;
    cursor: pointer;
    &.act {
      background: rgba(124, 213, 255, 0.15);
      box-sizing: border-box;
      border: 1px solid #7CD5FF;
    }
  }
}

</style>