<template>

  <div class="out-direction">
  
    <!-- 段面控制器 -->
    <div class="sections">
      <div
        v-for="(_, x) in sections"
        :key="x"
        :style="{flexGrow: _.grow}"
        :class="['x-section', {'act': x === sectionAct}]"
        @click="sectionChange(x)"
      >
      </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="road-scale">
  
      <div :style="roadStyle" class="main-road">
    
        <!-- 摄像机层 -->
        <div class="level-camera">
          <div
            v-for="(item, x) in cameras"
            :key="x"
            :style="{ right: item.x + 'px' }"
            :class="['x-camera', { act: item.act }]"
          >
            <div v-if="item.act" class="pile">{{ item.pileNumber }}</div>
          </div>
        </div>
    
        <!-- 路面层 -->
        <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',
                right: 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>

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

        </div>
    
      </div>

    </div>

  </div>
  
  </template>
  
  <script lang='ts' setup>
  
  import { ref } from 'vue'

  import EventDot from '../EventDot/index.vue'

  import { useAppStoreWithOut } from '@/store/modules/app'

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

  const emits = defineEmits(['go-collect'])

  const appStore = useAppStoreWithOut()
  const sectionAct = ref(0) // 当前段面
  const sectionTrans = ref<any>(null) // 路段动画
  const trackCar = reactive<any>({}) // 追踪车辆
  
  // 段面物理总长
  const roadStyle = computed(() => {
    if (!props.sections.length) return
    const x = props.sections.length - 1 + props.sections.slice(-1)[0].grow
    return {
      width: x * appStore.getMode + 'px',
      ...sectionTrans.value
    }
  })

  // 缎面切换
  const sectionChange = (x, direct?: boolean) => {

    let realx = x
    if (x === props.sections.length - 1) {
      realx = props.sections.length - 2 + props.sections.slice(-1)[0].grow
    }

    const dx = Math.abs(sectionAct.value - x)

    // 跳过动画
    if (direct) {
      sectionTrans.value = {
        transform: `translateX(-${realx * appStore.getMode}px)`
      }
    } else {
      sectionTrans.value = {
        transform: `translateX(-${realx * appStore.getMode}px)`,
        transitionProperty: 'all',
        transitionDuration: `${2 * dx}s`,
        transitionTimingFunction: 'ease-in-out'
      }
    }

    sectionAct.value = x
    
  }

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

  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

  }

  // 车辆追踪
  watch(
    () => trackCar,
    (car) => {
      // if (car) {
      //   const left = Math.abs(car.x) % 1920
      //   const sections = (Math.abs(car.x) - left) / 1920 + (left > 0 ? 1 : 0)
      //   if (sections > 1) {
      //     sectionChange(sections - 1)
      //   }
      // }
    },
    {
      deep: true
    }
  )
  
  defineExpose({
    sectionChange
  })
  
</script>
  
<style lang='scss' scoped>

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

  $base-url: '@/assets/images/home/';
  
  .out-direction {
    text-align: center;
  }
  
  .ctrls {
    display: inline-flex;
    align-items: center;
    height: 42px;
    margin: 0 auto;
    .title {
      color: white;
      width: 316px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-image: url($base-url + 'arrow_lft.png');
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: 0 bottom;
      padding-bottom: 4px;
  
      .text {
        font-size: 24px;
        font-weight: 600;
        margin-left: 32px;
      }
      .more {
        font-size: 16px;
        color: rgba(240, 245, 255, 0.95);
        display: flex;
      }
    }
  }
  
  .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;
      }
    }
  }
  
  .sections {
    display: flex;
    margin: 15px 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);
      }
      &.act {
        background: #00DDFF;
      }
    }
  }
  
  .scales {
    display: flex;
    margin: 8px 90px 0;
  
    .x-scale {
      // flex-grow: 1;
      height: 2px;
      background: #1F5080;
      &:nth-last-of-type(2) {
        flex-grow: 0.2;
      }
    }
  
    .x-dot {
      width: 2px;
      height: 2px;
      background: #1F5080;
      &.act {
        height: 8px;
      }
    }
  }

  .road-scale {
    padding-top: 30px;
    height: 270px;
    position: relative;
    overflow: hidden;
  }
  
  .main-road {
    height: 270px;
    position: relative;
    position: absolute;
    left: 0;

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

      .running-car {

        left: -120px;
        width: 120px;
        height: 40px;

        .nameplate {
          font-size: 16px;
          top: -28px;
          padding: 2px 8px;
        }

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

      }

    }
  
    .level-camera {
      width: 100%;
      position: absolute;
      z-index: 2;
      right: 0;
      top: 0;
  
      .x-camera {
        width: 24px;
        height: 24px;
        cursor: pointer;
        position: absolute;
        transform: translateY(-50%);
        
        background: url($base-url + 'camera_1.png');
        background-size: cover;
  
        &.act {
          background: url($base-url + 'camera_2.png');
          background-size: cover;
        }
  
        .pile {
          position: absolute;
          font-size: 14px;
          font-weight: 600;
          color: #42E7FF;
          left: 0;
          top: -18px;
          left: 0;
          margin-left: -50%;
        }
      }
    }
  }
  
  .facilities {
    height: 65px;
    position: relative;
    .x-facility {
      position: absolute;
    }
    .flowers {
      top: 50%;
      height: 42px;
      width: 100px;
      background: url($base-url + 'flowers.png') no-repeat;
      background-size: 100%;
      transform: translateY(-50%);
      &.right {
        transform: translateY(-50%) rotateY(180deg);
      }
    }
    .man-cross {
      // top: 0;
      // width: 34px;
      // height: 100%;
      // background: url(../../../assets/images/home/flowers.png) no-repeat;
      // background-size: 100%;
    }
  }
  
  </style>