<template>

<div class="roamming">

  <div @click="stopRoamming" class="ctrl-btn">取消漫游</div>

  <div class="sections">
    <div
      :class="['x-sec', { act: act === x }]"
      v-for="x in sections"
      :key="x"
      @click="roamChange(x)"
    ></div>
  </div>

</div>


</template>

<script lang='ts' setup>

import * as TWEEN from '@tweenjs/tween.js'
import { amtMount, amtRemove } from '../models/center'

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

const emits = defineEmits('visual-reset')

const act = ref(null) // 选中段面
const sections = ref(6) // 段面数

// 段面切换
const roamChange = (x) => {

  const context = props.getContext()

  const prev = act.value
  act.value = x

  const tunnel = props.getTunnles()[1]

  console.log(TWEEN.Easing)

  const countMap = {}

  const tween = new TWEEN.Tween({ rate: 0 })
    .easing(TWEEN.Easing.generatePow(2).InOut)
    .to({ rate: 1 }, 10000)
  
  tween.onUpdate(({ rate }) => {
    const progress =  prev / 6 + rate * ((x - prev) / 6)
    const position = tunnel.roamCurve.getPointAt(progress)
    const direction = tunnel.roamCurve.getTangentAt(progress).add(position)
    position.y = position.y + 2
    direction.y = direction.y + 2
    context.camera.position.copy(position)
    context.camera.lookAt(direction)
  })

  const key = amtMount(() => {
    tween.update()
  })

  tween.onComplete(() => {
    amtRemove(key)
  })

  tween.start()


}

// 取消漫游
const stopRoamming = () => {
  emits('visual-reset')
}

</script>

<style lang='scss' scoped>

.roamming {

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