
import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js'
import { POINT_SCANE } from '../points'
import { create2DModel, build2DModel } from '../utils'
import { bus } from '@/views/3DModel/state'
import CarModel from '../models/car'

import { createApp } from 'vue'
import CameraPlayer from '../../Doms2d/CameraPlayer.vue'
import VideoPopup from '@/components/Video/install'
import EventPop from '../../Doms2d/EventPop.vue'

import Socket from '../../../socket'

let orgDistance = null // 初始视距
let scale = 1 // 放大倍数
let env = null
let cameraMode = 'icon'

// 获取摄像机视距
const getDistance = () => {

  const context = env.getContext()

  const pt1 = context.camera.position
  const pt2 = context.controls.target

  return pt1.distanceTo(pt2)

}

// 道路摄像机功能构建
const camrasPlay = () => {

  const context = env.getContext()
  const cameras = env.getCameras()

  cameras.forEach(item => {

    const xvm = createApp(CameraPlayer)
    xvm.use(VideoPopup)
    const idStr = 'camera' + item.infos.id.slice('-6')

    const space = document.querySelector('.doms-2d')
    const xdev = document.createElement('div')

    space.appendChild(xdev)
    xdev.setAttribute('id', idStr)
    item.vmInstance = xvm.mount(xdev)

    const player2d = new CSS2DObject(xdev)
    item.player2d = player2d
    item.camera.add(player2d)

    const playFrame = player2d.element.querySelector('.frame')
    playFrame.setAttribute('id', item.infos.id)

    item.vmInstance.cameraInit(item.infos)

    const playTrigger = item.player2d.element.querySelector('.no-play')
    const fullScreenTrigger = item.player2d.element.querySelector('.full-screen')

    playTrigger.addEventListener('pointerdown', e => {
      playTrigger.click()
    })

    fullScreenTrigger.addEventListener('pointerdown', e => {
      fullScreenTrigger.click()
    })

  })

  context.controls.addEventListener('change', () => {

    scale = (orgDistance / getDistance()).toFixed(2)
    
    if (scale >= 9 && cameraMode === 'icon') {
      cameraMode = 'view'
      const els = document.querySelectorAll('.camera-player .player')
      els.forEach(item => item.classList.add('show'))
    }

    if (scale < 9 && cameraMode === 'view') {
      cameraMode = 'icon'
      const els = document.querySelectorAll('.camera-player .player')
      els.forEach(item => item.classList.remove('show'))
    }

  })

}

// 事件初始化
const eventRender = () => {

  const tunnels = env.getTunnles()
  const events = tunnels.map(item => item.events).flat()

  events.forEach(item => {

    if (!item.vmInstance) {
      const xvm = createApp(EventPop)
      const idStr = 'event' + item.infos.id.slice('-6')
      const space = document.querySelector('.doms-2d')
      const xdev = document.createElement('div')

      space.appendChild(xdev)
      xdev.setAttribute('id', idStr)
      
      item.vmInstance = xvm.mount('#' + idStr)

      const sign2d = new CSS2DObject(xdev)
      item.sign2d = sign2d
      item.event.add(sign2d)
      item.vmInstance.eventInit(item.infos)
    }

    /* const popTrigger = item.sign2d.element.querySelector('.event-tip')
    popTrigger.addEventListener('pointerdown', e => {
      popTrigger.click()
    }) */

  })

}

// 设置鸟瞰模式基本信息
const enviromentSet = () => {

  const context = env.getContext()

  orgDistance = getDistance()

  context.controls.maxPolarAngle = 0
  context.controls.minDistance = 10
  context.controls.maxDistance = orgDistance

}

// 车辆类型筛选
const typeSelect = (e) => {

  const tunnelx = env.getTunnles()[e.direct]
  tunnelx.cars.forEach(item => {
    item.vm_instance.focusChange(e.type)
  })
  return

  const SIGN_KEY_FOCUS = [null, null]

  return (e) => {
    if (SIGN_KEY_FOCUS[e.direct]) {
      CarModel.setRunningCall((plate, infos) => {
        plate.element.classList.remove('focus')
        if (infos.type === e.type) {
          plate.element.classList.add('focus')
        }
      }, SIGN_KEY_FOCUS[e.direct])
    } else {
      SIGN_KEY_FOCUS[e.direct] = CarModel.setRunningCall((plate, infos) => {
        plate.element.classList.remove('focus')
        if (infos.type === e.type) {
          plate.element.classList.add('focus')
        }
      })
    }
  }

}

// 俯瞰模式初始化
const scaneSet = (provides) => {

  env = { ...provides }

  enviromentSet()
  camrasPlay()
  eventRender()

  bus.on('event-update', () => {
    eventRender()
  })

  // 车辆类型筛选
  bus.on('focus-change', e => {
    typeSelect(e)
  })

}

// 退出俯瞰模式
const scaneClean = () => {
  orgDistance = null
  env = null
  scale = 1
  cameraMode = 'icon'
  
  document.querySelectorAll('.camera-player .player').forEach(item => {
    item.classList.remove('show')
  })


  bus.off('focus-change')
}



export {
  scaneSet,
  scaneClean
}