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

export const useInitMap = async function () {
  const store = useRootStore()
  const { device, facilityList, shopList, artPlaceList } = storeToRefs(store)
  try {
    const { data } = await getMapData()
    const delPrefixOfFacilityList = facilityList.value.map(item => ({
      ...item,
      filePath: item.navFilePath?.replace(PREFIX.STATIC_URL, '')
    }))

    //初始化地图
    window.MainMap_QM.init(
      () => {
        store.SET_MAP_STATUS(true)
        window.Map_QM.addEventListener('shop', onClickShop, false)
        window.Map_QM.addEventListener('art', onClickArt, false)
        window.Map_QM.renderer.domElement.addEventListener('webglcontextlost', onContextLost)
        const arr: string[] = []
        window.Map_QM.util.allMap[0].buildArr.forEach((item: any) => {
          item.mapData.parkArea.forEach((park: any) => {
            arr.push(park.parkNum)
          })
        })
        store.SET_MAP_PARK_LIST(arr)
      },
      {
        build: device.value?.buildingOrder ?? 0,
        floor: device.value.floorOrder,
        navPoint: device.value.location,
        angle: device.value.angle,
        iconUrl: delPrefixOfFacilityList,
        artUrl: artPlaceList.value,
        mapData: data,
        shopData: shopList.value.slice()
      }
    )
  } catch (error) {
    console.log(error)
    Message({ text: '获取地图数据失败', type: 'success' })
  }
}

//点击地图店铺box
function onClickShop(event: any) {
  const store = useRootStore()
  if (event.data) {
    hideMapDialog()
    !window.shopInfo && document.getElementById('shopInfo')
    window.Map_QM.addElementLabel(window.shopInfo, event.data.xaxis, event.data.yaxis)
    store.SET_SHOP(event.data.shopData)
    store.SET_CURRENT_ART_NAME('')
    showMapDialog()
  }
  // else {
  //   hideMapDialog()
  // }
}

// 艺术装置点击
function onClickArt(event: any) {
  const store = useRootStore()
  if (event.data) {
    const artWork: any = document.getElementById('artWorkInfo')
    const poi = event.data.artData.content.point.split('_')
    hideMapDialog()
    window.Map_QM.addElementByNode(artWork, Number(poi[2]))
    artWork.style.visibility = 'visible'
    const floors = store.currentBuildingFloorsList.filter(item => item.floorOrder === Number(poi[1]))
    const shop = {
      shopCode: '',
      shopName: event.data.artData.content.name,
      shopNameEn: event.data.artData.content.nameEn,
      floorOrder: floors[0].floorOrder,
      floor: floors[0].floor,
      logoUrl: event.data.artData.content.icon[0],
      yaxis: Number(poi[2]),
      doorMaterialList: event.data.artData.content.file_code
    }
    store.SET_CURRENT_ART_NAME(event.data.artData.content.name)
    store.SET_SHOP(shop)
  }
}

//地图弹框消失
export function hideMapDialog() {
  window.shopInfo.style.visibility = 'hidden'
  const art: any = document.getElementById('artInfo')
  const artWork: any = document.getElementById('artWorkInfo')
  art.style.visibility = 'hidden'
  artWork.style.visibility = 'hidden'
}

//显示地图弹框
function showMapDialog() {
  window.shopInfo.style.visibility = 'visible'
}

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