<script setup lang="ts">
import { getAtUserList } from '@/api'
import { usePageSearch } from '@/hooks'
import type { AtUserInfoDto } from '@/api/article/types'
import { BooleanFlag } from '@/constants'
const show = defineModel<boolean>()

const { mousePosition = { x: 10, y: 10 }, isReal } = defineProps<{
  mousePosition: {
    x: number
    y: number
  }
  isReal: BooleanFlag
}>()
const emit = defineEmits<{
  mention: [item: AtUserInfoDto]
}>()

const { list, searchParams, total, goToPage, changePageSize, loading } = usePageSearch(
  getAtUserList,
  {
    defaultParams: {
      current: 1,
      size: 10,
      findType: isReal === BooleanFlag.YES ? 0 : 1,
    },
  },
)

// const list = [
//   {
//     id: 1,
//     name: '李家彬',
//     dept: '市场部',
//     avatar: 'https://api.dicebear.com/7.x/adventurer/svg?seed=li',
//   },
//   {
//     id: 2,
//     name: '王小雨',
//     dept: '产品部',
//     avatar: 'https://api.dicebear.com/7.x/adventurer/svg?seed=wang',
//   },
//   {
//     id: 3,
//     name: '赵一鸣',
//     dept: '技术部',
//     avatar: 'https://api.dicebear.com/7.x/adventurer/svg?seed=zhao',
//   },
//   {
//     id: 4,
//     name: '刘可可',
//     dept: '运营部',
//     avatar: 'https://api.dicebear.com/7.x/adventurer/svg?seed=liu',
//   },
// ]

watch(show, (visible) => {
  if (visible) {
    document.addEventListener('mousedown', handleDocumentPointerDown)
  } else {
    document.removeEventListener('mousedown', handleDocumentPointerDown)
  }
})

const handleDocumentPointerDown = () => {
  show.value = false
}

const handlePick = (item: AtUserInfoDto) => {
  show.value = false
  emit('mention', item)
}

onUpdated(() => {
  show.value = true
})

onMounted(() => {
  show.value = true
  console.log('onMounted')
})

onBeforeUnmount(() => {
  console.log('onBeforeUnmount')
  document.removeEventListener('mousedown', handleDocumentPointerDown)
})

defineExpose({
  show: () => {
    show.value = true
  },
  hide: () => {
    show.value = false
  },
})
</script>

<template>
  <transition name="fade1">
    <div
      v-if="show"
      class="absolute mention-panel z-[3000] w-60 rounded-xl border border-slate-200 bg-white p-2 shadow-[0_10px_26px_rgba(2,6,23,0.15)] transition-all duration-200"
      :style="{ left: mousePosition.x + 'px', top: mousePosition.y + 'px' }"
      @mousedown.stop
    >
      <div class="mb-1 flex items-center gap-1 border-b border-slate-100 pb-2">
        <el-input
          v-model="searchParams.findValue"
          placeholder="搜索用户名"
          size="small"
          clearable
          class="min-w-0 flex-1"
          @keyup.enter="goToPage(1)"
        />
        <el-button type="primary" size="small" :disabled="loading" @click="goToPage(1)">
          搜索
        </el-button>
        <el-pagination
          v-model:current-page="searchParams.current"
          v-model:page-size="searchParams.size"
          :total="total"
          size="small"
          class="shrink-0 !p-0"
          layout="prev, slot, next"
          @size-change="changePageSize"
          @current-change="goToPage"
        >
          <span class="text-xs text-slate-400">{{ searchParams.current }}</span>
        </el-pagination>
      </div>
      <el-scrollbar class="h-64" v-loading="loading">
        <button
          v-for="item in list"
          :key="item.userId"
          type="button"
          class="cursor-pointer flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left transition-colors hover:bg-blue-50"
          @click="handlePick(item)"
        >
          <img
            :src="item.avatar"
            :alt="item.name"
            class="h-8 w-8 rounded-full border border-slate-200"
          />
          <div class="min-w-0 flex-1">
            <div class="truncate text-sm font-medium text-slate-800">{{ item.name }}</div>
          </div>
          <span v-if="isReal" class="text-xs text-blue-500">@{{ item.name }}</span>
        </button>
      </el-scrollbar>
    </div>
  </transition>
</template>

<style scoped>
.mention-panel::before {
  position: absolute;
  top: -6px;
  left: 16px;
  width: 12px;
  height: 12px;
  border-top: 1px solid #e2e8f0;
  border-left: 1px solid #e2e8f0;
  background: #fff;
  content: '';
  transform: rotate(45deg);
}

.fade1-enter-active,
.fade1-leave-active {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.fade1-enter-from,
.fade1-leave-to {
  opacity: 0;
  transform: translateY(6px);
}
</style>
