<template>
  <div class="flex-1 flex flex-col" v-loading="loading">
    <!-- List Container -->
    <div class="flex-1 p-4 pt-1">
      <div class="relative">
        <el-tabs v-model="searchParams.isAudit" @tab-change="toggleTab">
          <el-tab-pane
            v-for="tab in auditTypeListOptions"
            :key="tab.value"
            :label="tab.label"
            :name="tab.value"
          />
        </el-tabs>
        <div class="absolute right-0 top-2.5 z-1000 flex items-center gap-2">
          <el-select v-model="searchType" @change="refresh" class="w-25!" size="small">
            <el-option
              v-for="tab in [{ label: '全部', value: 'ALL' }, ...articleTypeListOptions]"
              :key="tab.value"
              :label="tab.label"
              :value="tab.value"
            />
          </el-select>
          <el-icon
            size="15"
            class="cursor-pointer hover:rotate-180 transition-all duration-300"
            @click="refresh"
            ><IEpRefresh
          /></el-icon>
        </div>
      </div>
      <div v-if="!list.length" class="flex flex-col items-center justify-center h-64">
        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
          <el-icon class="text-2xl text-gray-300"><IEpDocument /></el-icon>
        </div>
        <div class="text-gray-500 text-lg mb-2">暂无内容</div>
      </div>

      <div v-else class="space-y-4">
        <div
          v-for="item in list"
          :key="item.id"
          class="flex items-center p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
        >
          <!-- Content -->
          <div class="flex-1 min-w-0">
            <!-- 头像 + 内容区 -->
            <div class="flex gap-3">
              <el-image :src="item.showAvatar" class="w-12 h-12 rounded-full flex-shrink-0" />

              <div class="flex-1 min-w-0 flex flex-col justify-center">
                <!-- 第一行:用户名 + 时间 + 标签 -->
                <div class="flex items-center gap-2 mb-1.5">
                  <span class="text-gray-900 text-sm flex-shrink-0">{{ item.showName }}</span>
                  <span class="text-gray-400 text-sm flex-shrink-0 whitespace-nowrap">
                    {{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
                  </span>
                  <div class="flex flex-wrap gap-1.5 flex-1 min-w-0">
                    <el-tag size="small">
                      {{ articleTypeListOptions.find((i) => i.value === item.type)?.label }}
                    </el-tag>
                  </div>
                </div>

                <!-- 第二行:标题 -->
                <div class="text-gray-700 font-medium truncate line-clamp-1">
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>

          <div
            v-if="searchParams.isAudit === AuditStatusEnum.UNAUDITED"
            class="flex items-center text-gray-400 text-sm ml-4"
          >
            <el-button type="info" link @click="openArticleDetail(item.id)">去详情页审核</el-button>

            <el-button
              type="primary"
              link
              @click="handleAudit({ articleId: item.id, auditResult: AuditStatusEnum.AGREED })"
            >
              同意
            </el-button>
            <el-button
              type="danger"
              link
              @click="
                handleAudit({
                  articleId: item.id,
                  auditResult: AuditStatusEnum.REJECTED,
                })
              "
            >
              拒绝
            </el-button>
          </div>
          <div
            v-if="searchParams.isAudit === AuditStatusEnum.AGREED"
            class="flex items-center text-gray-400 text-sm ml-4"
          >
            <el-button type="info" link @click="handleView(item)">查看</el-button>
          </div>
        </div>
      </div>
    </div>

    <div
      v-if="list.length"
      class="flex items-center justify-end px-6 py-4 border-t border-gray-200"
    >
      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2">
        <el-pagination
          v-model:current-page="searchParams.current"
          v-model:page-size="searchParams.size"
          @size-change="changePageSize"
          @current-change="goToPage"
          :page-sizes="[10, 20, 30, 40]"
          layout="prev, pager, next, jumper, total"
          :total="total"
          class="custom-pagination"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getAuditList, auditArticle } from '@/api'
import { usePageSearch } from '@/hooks'
import { auditTypeListOptions, articleTypeListOptions } from '@/constants/options'
import { AuditStatusEnum } from '@/constants'
import type { AuditArticleDto, AuditListItemDto } from '@/api'
import type { TabPaneName } from 'element-plus'
import { ArticleTypeEnum } from '@/constants'
import dayjs from 'dayjs'

const toggleTab = (key: TabPaneName) => {
  searchParams.value.isAudit = key as AuditStatusEnum
  refresh()
}

// State
const searchType = computed({
  get() {
    if (searchParams.value.type === '') {
      return 'ALL'
    }
    return searchParams.value.type
  },
  set(value) {
    if (value === 'ALL') {
      searchParams.value.type = ''
    } else {
      searchParams.value.type = value
    }
  },
})

const { list, loading, searchParams, total, refresh, goToPage, changePageSize } = usePageSearch(
  getAuditList,
  {
    defaultParams: {
      isAudit: AuditStatusEnum.UNAUDITED,
      type: '',
    },
    immediate: false,
  },
)

const handleAudit = async (data: AuditArticleDto) => {
  if (data.auditResult === AuditStatusEnum.REJECTED) {
    const { value } = await ElMessageBox.prompt('请输入拒绝理由', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern: /^\S+$/,
      inputErrorMessage: '请输入拒绝理由',
    })

    data.auditRemark = value
  }

  await auditArticle(data)
  ElMessage.success('审核成功')

  refresh()
}

const handleView = (item: AuditListItemDto) => {
  if (item.type === ArticleTypeEnum.VIDEO) {
    window.open(`/videoDetail/${item.id}`)
  } else {
    window.open(`/articleDetail/${item.id}`)
  }
}

const openArticleDetail = (id: number) => {
  window.open(`/auditArticle/${id}`)
}
onActivated(() => {
  refresh()
})
</script>
