import { useRootStore } from '@/store/root'
import { storeToRefs } from 'pinia'
import { getMapData } from '@/http/api/base'
import Message from '@/base/Message/Message'

export const useInitMap = async function () {
  const store = useRootStore()
  const { device, facilityList, shopList, config } = storeToRefs(store)
  try {
    const { data } = await getMapData()
    const delPrefixOfFacilityList = facilityList.value.slice().map(item => ({
      ...item,
      filePath: item.filePath.replace(config.value.sourceUrl, '')
    }))

    //初始化地图
    window.MainMap_QM.init(
      () => {
        store.SET_MAP_STATUS(true)
        window.Map_QM.addEventListener('shop', onClickShop, false)
        window.Map_QM.renderer.domElement.addEventListener('webglcontextlost', onContextLost)
      },
      {
        build: device.value?.buildingOrder ?? 0,
        floor: device.value.floorOrder,
        navPoint: device.value.location,
        angle: device.value.angle,
        iconUrl: delPrefixOfFacilityList,
        mapData: data,
        shopData: shopList.value.slice()
      }
    )
  } catch (error) {
    Message({ text: '获取地图数据失败', type: 'success' })
  }
}

//点击地图店铺box
function onClickShop(event: any) {
  const store = useRootStore()

  if (event.data) {
    showMapDialog()
    window.Map_QM.addElementLabel(document.getElementById('shopInfo'), event.data.xaxis, event.data.yaxis)
    store.SET_SHOP(event.data.shopData)
  } else {
    hideMapDialog()
  }
}
//地图弹框消失
export function hideMapDialog() {
  ;(document.getElementById('shopInfo') as HTMLElement).style.visibility = 'hidden'
}

//显示地图弹框
function showMapDialog() {
  ;(document.getElementById('shopInfo') as HTMLElement).style.visibility = 'visible'
}

//监听地图上下文丢失 刷新页面
function onContextLost() {
  location.reload()
}