<template>
  <el-dropdown @command="handleMore" trigger="click">
    <el-icon class="cursor-pointer"><IEpMore /></el-icon>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="举报">举报</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="tsx">
import { addComplaint } from '@/api'
import type { ArticleItemDto } from '@/api/article/types'
import { push } from 'notivue'
import { useMessageBox } from '@/hooks'

const { prompt } = useMessageBox()
const { articleDetail } = defineProps<{
  articleDetail: ArticleItemDto
}>()

const handleMore = async (command: string) => {
  if (command === '举报') {
    const reason = await prompt({
      title: '请输入要举报原因',
      type: 'warning',
    })
    addComplaint({ articleId: articleDetail.id, reason })
    push.success('举报成功')
  }
}
</script>
