import { defineStore } from 'pinia'
import { reactive, ref } from 'vue'

export const useScreenStore = defineStore('screen', () => {
  const controllerData = reactive({})
  const placeList = []
  const tunnelList = reactive([])
  const currentTunnel = ref({})
  const screenType = ref('map')
  const setController = (val) => {
    Object.assign(controllerData, val)
  }

  const setTunnelList = (val) => {
    placeList.length = 0
    val.list.forEach(item => {
      placeList.push({
        styleId: item.ID,
        position: { lat: item.latitude, lng: item.longitude },
      })
    })
    tunnelList.length = 0
    tunnelList.push(...val.list)
    // const deviceList = val.list[0].devices
    // powerList.length = 0
    // deviceList.forEach(item => {
    //   if (item.genre === 7) {
    //     powerList.push(item)
    //   }
    // })
  }

  const setCurrentTunnel = (val) => {
    currentTunnel.value = val
  }

  const setScreenType = (val) => {
    screenType.value = val
  }
  return {
    controllerData,
    setController,
    tunnelList,
    setTunnelList,
    placeList,
    currentTunnel,
    setCurrentTunnel,
    screenType,
    setScreenType,
  }
})
