<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="ts">
import { addComplaint } from '@/api'
import type { ArticleItemDto } from '@/api/article/types'

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

const handleMore = async (command: string) => {
  if (command === '举报') {
    const { value } = await ElMessageBox.prompt('请输入举报原因', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern: /^\S+$/,
      inputPlaceholder: '请输入举报原因',
      inputErrorMessage: '举报原因不能为空',
    })
    addComplaint({ articleId: articleDetail.id, reason: value })
    ElMessage.success('举报成功')
  }
}
</script>
