<template>
  <div v-loading="loading">
    <div class="lg:col-span-3 mb-20">
      <ArticleContent :articleDetail="articleDetail" :isAudit="true" />
    </div>
    <!-- 底部fixed -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg">
      <div class="max-w-7xl mx-auto px-6 py-4 flex justify-center items-center gap-4">
        <el-button
          type="primary"
          @click="handleAudit(AuditStatusEnum.AGREED)"
          class="min-w-[120px]"
        >
          通过
        </el-button>
        <el-button
          type="danger"
          @click="handleAudit(AuditStatusEnum.REJECTED)"
          class="min-w-[120px]"
        >
          驳回
        </el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import ArticleContent from '@/components/common/ArticleContent/index.vue'
import { type ArticleItemDto } from '@/api'
import { getArticleDetail, auditArticle } from '@/api'
import { AuditStatusEnum } from '@/constants/enums'
import type { AuditArticleDto } from '@/api'
import { push } from 'notivue'
import { useMessageBox } from '@/hooks'

const { prompt } = useMessageBox()
const route = useRoute()
const router = useRouter()
const id = route.params.id as string

const articleDetail = ref({} as ArticleItemDto)
const loading = ref(false)

const handleAudit = async (auditStatus: AuditStatusEnum) => {
  const auditData: AuditArticleDto = {
    articleId: Number(id),
    auditResult: auditStatus,
  }
  if (auditStatus === AuditStatusEnum.REJECTED) {
    const reason = await prompt({
      type: 'warning',
      title: '请输入拒绝理由',
    })

    auditData.auditRemark = reason
  }
  await auditArticle(auditData)
  push.success('审核成功')
  router.replace('/')
}

onMounted(async () => {
  loading.value = true
  const { data } = await getArticleDetail(id)
  articleDetail.value = data
  loading.value = false
})
</script>
