<template>

<div class="controller">

  <template v-if="!panel">
    <div @click="carTracking" class="ctrl-btn">车辆追踪</div>
    <div @click="sectionRoamming" class="ctrl-btn">段面漫游</div>
    <div class="ctrl-btn">事件定位</div>
    <div @click="tunEntry" class="ctrl-btn">入口调转</div>
  </template>

  <template v-if="panel === 'tracking'">
    <div @click="stopTracking" class="ctrl-btn">取消追踪</div>
    <div @click="laneChange" class="ctrl-btn">变道</div>
  </template>

  <Roamming
    v-bind="{ getContext, getTunnles }"
    v-if="panel === 'roamming'"
    @visual-reset="visualReset"
  />

</div>

</template>

<script lang='ts' setup>

import Roamming from './roamming.vue'

const props = defineProps<{
  getCars: Function,
  getTunnles: Function,
  getContext: Function
}>()

const panel = ref(null) // 面板
const focus = ref(null) // 追踪车辆

// 车辆追踪
const carTracking = () => {
  panel.value = 'tracking'
  const cars = props.getCars()
  const context = props.getContext()

  if (cars.length) {
    cars[0].follow(context.camera)
    focus.value = cars[0]
  } else {
    console.log('无车流')
  }
}

// 变道
const laneChange = () => {
  focus.value.laneChange()
}

// 取消追踪
const stopTracking = () => {
  const context = props.getContext()
  panel.value = null
  focus.value.stopFollow()
  focus.value = null
  visualReset()
}

// 段面漫游
const sectionRoamming = () => {
  const context = props.getContext()
  panel.value = 'roamming'
  // context.controls.enabled = false
  // context.scene.remove(context.controls)
  // context.controls = null
}

// 视角回归
const visualReset = () => {
  const context = props.getContext()
  panel.value = null
  context.camera.position.set(-10, 10, 0)
  context.camera.lookAt(20, 0, 0)
}

 
</script>

<style lang='scss' scoped>

.controller {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 2;

  .ctrl-btn {
    width: 80px;
    height: 30px;
    border-radius: 4px;
    background: rgba($color: #FFFFFF, $alpha: 0.6);
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    font-size: 13px;
    margin-top: 10px;
    transition-property: all;
    transition-duration: 0.3s;
    color: #616161;
    &:hover {
      background: rgba($color: #00DDFF, $alpha: 0.6);
      box-shadow: 0 0 12px #00DDFF;
      color: #f1f1f1;
    }
  }

  .sections {
    margin-top: 30px;
    .x-sec {
      height: 45px;
      width: 10px;
      border-radius: 5px;
      background: rgba($color: #FFFFFF, $alpha: 0.6);
      margin: 5px auto;
      transition-property: all;
      transition-duration: 0.3s;
      cursor: pointer;
      &:hover {
        background: rgba($color: #FFFFFF, $alpha: 1);
        box-shadow: 0 0 12px #FFFFFF;
      }
      &.act {
        background: rgba($color: #FFFFFF, $alpha: 1);
        box-shadow: 0 0 12px #FFFFFF;
      }
    }
  }

}

</style>