<template>

  <div class="controller">
    
    <template v-if="!blank">
      <div @click="goTracking" class="ctrl-btn">车辆追踪</div>
      <div class="ctrl-btn">段面漫游</div>
      <div @click="tunEntry" class="ctrl-btn">入口调转</div>
    </template>

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

    <template v-if="roamming">
      <div class="ctrl-btn">取消漫游</div>
      <div class="sections">
        <div
          :class="['x-sec', { act: roamAct === x }]"
          v-for="(itme, x) in fosViews"
          :key="x"
          @click="() => roamChange(x, context)"
        ></div>
      </div>
    </template>
  </div>

</template>

<script lang='ts' setup>

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

const blank = ref(null) // 面板
const trackingCar = ref(null)

// 车辆追踪
const goTracking = () => {

  blank.value = 'tracking'
  const cars = props.getCars()
  const context = props.getContext()
  cars[0].follow(context.camera)
  trackingCar.value = cars[0]

}

// 变道测试
const laneChange = () => {

  trackingCar.value.laneChange()

}

// 切换入口视角
const tunEntry = () => {

  const context = props.getContext()

  context.camera.position.set(2790, 10, -2261)
  context.camera.lookAt(2771, 0, -2238)
  context.controls.target.set(2777, 0, -2238)

}


</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>