import { ref, computed, onBeforeUnmount, onMounted } from 'vue'

type CameraType = '2D' | '3D'
type Item = {
  text: CameraType
  image: string
}

export const useSetCameraViews = (pauseFn?: () => void) => {
  const map: Record<CameraType, Item> = {
    '3D': {
      text: '2D',
      image: require('@/assets/images/nav/2D.svg')
    },
    '2D': {
      text: '3D',
      image: require('@/assets/images/nav/3D.svg')
    }
  }
  const text = ref<CameraType>('3D')

  const cameraViews = computed(() => text.value && map[text.value])

  //设置导航视角 2D或者3D
  function setCameraViews() {
    pauseFn?.()
    window.Map_QM.pathRePlay()
    const _text = text.value === '2D' ? '3D' : '2D'
    window.Map_QM.changePathDir(_text)
    text.value = _text
  }

  onMounted(() => {
    text.value = window.pathCameraState
  })
  onBeforeUnmount(() => {
    window.pathCameraState = '2D'
  })

  return { cameraViews, setCameraViews }
}