<script setup lang="ts">
import { list } from './componsables/geoblock'
import dialog from '~/assets/img/home/dialog.png'
import geo from '~/assets/img/home/geo.png'

import sign_blue from '~/assets/img/home/blue.png'
import sign_yellow from '~/assets/img/home/yellow.png'
import sign_red from '~/assets/img/home/red.png'

function getPosStr(item: any) {
  return {
    left: `${item.pos.x - 14}px`,
    top: `${item.pos.y - 24}px`,
  }
}
function getDialogPosStr(item: any) {
  return {
    left: `${item.pos.x - 300}px`,
    top: `${item.pos.y - 160}px`,
  }
}
const itemRefs = ref<unknown[]>([])
let dialogData = $ref<any>({
  pos: { x: 0, y: 0, c: '' },
})
let dialogVisible = $ref(false)
const dialogRef = ref()
let line_item2dialog: any | undefined
let line_item2item: any[] | undefined
function handleOpenDialog(item: any, idx: number) {
  dialogData = item
  dialogVisible = true

  line_item2item = item.children?.map((i: number) => new window.LeaderLine(itemRefs.value[idx], itemRefs.value[i], {
    size: 3,
    color: item.pos.c,
    path: 'magnet',
    dash: { len: 8, gap: 3, animation: { duration: 500 } },
  }))

  // console.log('refs :>> ', itemRefs.value[idx], dialogRef.value)
  nextTick(() => {
    line_item2dialog = new window.LeaderLine(itemRefs.value[idx], dialogRef.value, {
      size: 2,
      color: '#fff',
      endPlug: 'behind',
      startSocket: 'top',
      endSocket: 'right',
      path: 'grid',
    })
  })
}
function handleCloseDialog() {
  // console.log('leave')
  line_item2dialog?.remove()
  line_item2item?.forEach(line => line.remove())
  dialogVisible = false
}

// onUnmounted(() => {
//   line_item2dialog?.remove()
//   line_item2item?.forEach(line => line?.remove())
// })
</script>

<template>
  <div class="relative">
    <img :src="geo" alt="">
    <div
      v-for="(item, idx) in list" :ref="(el) => itemRefs[idx] = el" :key="item.name" class="z-10 w-28px h-48px absolute cursor-pointer"
      :style="getPosStr(item)" @mouseenter="handleOpenDialog(item, idx)" @mouseleave="handleCloseDialog"
    >
      <img v-if="item.pos.c === 'red'" :src="sign_red" alt="">
      <img v-if="item.pos.c === 'yellow'" :src="sign_yellow" alt="">
      <img v-if="item.pos.c === 'blue'" :src="sign_blue" alt="">
    </div>

    <div
      v-show="dialogVisible" ref="dialogRef" class="absolute z-20 w-241px h-137px"
      :style="getDialogPosStr(dialogData)"
    >
      <img :src="dialog" alt="">
      <div class="absolute z-2 top-0 left-0 p-4 text-xs">
        <template v-if="dialogData.pos.c === 'red'">
          <div class="text-sm mb-2">
            {{ dialogData?.name }}
          </div>
          <div class="flex items-center mb-1">
            <div>二级分校数: </div>
            <div class="ml-1 text-white">
              {{ dialogData.ejxxsl }}个
            </div>
          </div>
          <div class="flex items-center mb-1">
            <div>受援学校数: </div>
            <div class="ml-1 text-white">
              {{ dialogData.syxxsl }}个
            </div>
          </div>
        </template>
        <template v-if="dialogData.pos.c === 'yellow'">
          <div class="text-sm mb-2">
            {{ dialogData?.name }}（二级分校）
          </div>
          <div class="flex items-center mb-1">
            <div>结对学校数: </div>
            <div class="ml-1 text-white">
              {{ dialogData.jdxxs }}个
            </div>
          </div>
          <div class="flex items-center mb-1">
            <div>结对班级数: </div>
            <div class="ml-1 text-white">
              {{ dialogData.sybjsl }}个
            </div>
          </div>
          <div class="flex items-center mb-1">
            <div>客座名师数: </div>
            <div class="ml-1 text-white">
              {{ dialogData.kzmssl }}个
            </div>
          </div>
        </template>
        <template v-if="dialogData.pos.c === 'blue'">
          <div class="text-sm mb-2">
            {{ dialogData?.name }}（受援学校）
          </div>
          <div class="flex items-center mb-1">
            <div>全科教师数: </div>
            <div class="ml-1 text-white">
              {{ dialogData.qkjssl }}个
            </div>
          </div>
          <div class="flex items-center mb-1">
            <div>受援班级数: </div>
            <div class="ml-1 text-white">
              {{ dialogData.sybjsl }}个
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
