<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.type" @tab-change="toggleTab">
          <el-tab-pane
            v-for="tab in filterArticleType"
            :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="searchParams.messageType"
            @change="refresh"
            class="w-25!"
            size="small"
          >
            <el-option
              v-for="tab in commentTypeListOptions"
              :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 space-y-1.5">
            <div class="text-gray-900 font-medium text-base line-clamp-1">
              {{ item.title }}
            </div>
            <div class="text-gray-600 text-sm line-clamp-2" v-html="parseEmoji(item.content)"></div>
            <div class="text-gray-400 text-xs">
              {{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm') }}
            </div>
          </div>

          <!-- Meta Info -->
          <div class="flex items-center text-gray-400 text-sm ml-4">
            <el-button
              type="primary"
              link
              @click="jumpToArticleDetailPage({ type: item.type, id: item.articleId })"
              >查看</el-button
            >
            <el-button type="danger" link @click="handleDelete(item.id)">删除</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 { getSelfCommentList, deleteComment } from '@/api'
import { usePageSearch } from '@/hooks'
import {
  commentTypeListOptions,
  articleTypeListOptionsForReal,
  articleTypeListOptionsForNotReal,
} from '@/constants/options'
import dayjs from 'dayjs'
import { CommentTypeEnum, ArticleTypeEnum, BooleanFlag } from '@/constants/enums'
import type { TabPaneName } from 'element-plus'
import { IS_REAL_KEY } from '@/constants/symbolKey'
import { useNavigation } from '@/hooks'
import { push } from 'notivue'
import { useMessageBox } from '@/hooks'
import { parseEmoji } from '@/utils/emoji'
const { confirm } = useMessageBox()

const emit = defineEmits<{
  toggleReal: [BooleanFlag]
}>()
const route = useRoute()
const isReal = inject(IS_REAL_KEY)

const filterArticleType = computed(() => {
  if (isReal?.value === 1) {
    return articleTypeListOptionsForReal
  }
  return articleTypeListOptionsForNotReal
})

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

const { list, loading, searchParams, total, refresh, goToPage, changePageSize } = usePageSearch(
  getSelfCommentList,
  {
    immediate: false,
    defaultParams: {
      messageType: CommentTypeEnum.COMMNET_TO_OTHER,
      type: filterArticleType.value[0]!.value,
    },
  },
)
const { jumpToArticleDetailPage } = useNavigation()
const handleDelete = async (id: number) => {
  await confirm({
    title: '提示',
    message: '确定删除该评论吗？',
    type: 'danger',
  })
  await deleteComment(id)
  push.success('删除成功')
  refresh()
}

onActivated(() => {
  if (route.query.type) {
    searchParams.value.type = route.query.type as ArticleTypeEnum
    emit('toggleReal', BooleanFlag.YES)
  } else {
    searchParams.value.type = filterArticleType.value[0]!.value
  }
  if (route.query.messageType) {
    searchParams.value.messageType = Number(route.query.messageType)
  }
  refresh()
})

defineExpose({
  refresh: () => {
    searchParams.value.type = filterArticleType.value[0]!.value
    refresh()
  },
})
</script>
