<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.taskType" @tab-change="toggleTab">
          <el-tab-pane
            v-for="tab in taskTypeListOptions"
            :key="tab.value"
            :label="tab.label"
            :name="tab.value"
          />
        </el-tabs>
        <div class="absolute right-0 top-2.5 z-1000">
          <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"
        >
          <div class="flex-1 min-w-0">
            <div class="text-gray-900 font-medium truncate">
              {{ item.title }}({{ item.currentCount }}/{{ item.limitCount }})
            </div>
            <div class="text-gray-500 text-sm mt-1 truncate">
              <span class="mr-2">{{ item.description }}</span>
              <span class="mr-2"> +{{ item.rewardValue }}亚币</span>
              <span class="mr-2">
                {{
                  TaskDateLimitTypeText[item.limitType] &&
                  `${TaskDateLimitTypeText[item.limitType] + '刷新'}`
                }}
              </span>
            </div>
          </div>

          <div class="flex items-center text-gray-400 text-sm ml-4">
            <!-- <el-button v-if="item.currentCount === item.limitCount" type="info" link disabled
              >已完成</el-button
            > -->
            <!-- <el-button v-else type="primary" link @click="handleTask(item)">去完成</el-button> -->
            <el-button type="primary" link @click="handleTask(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 { getSelfTaskList } from '@/api'
import { usePageSearch } from '@/hooks'
import { taskTypeListOptions } from '@/constants/options'
import { TaskTypeEnum } from '@/constants/enums'
import type { TabPaneName } from 'element-plus'
import { TaskDateLimitTypeText } from '@/constants'
import type { TaskItemDto } from '@/api'
import { useRouter } from 'vue-router'

const router = useRouter()
const toggleTab = (key: TabPaneName) => {
  searchParams.value.taskType = key as TaskTypeEnum
  refresh()
}

const { list, loading, searchParams, total, refresh, goToPage, changePageSize } = usePageSearch(
  getSelfTaskList,
  {
    defaultParams: {
      taskType: TaskTypeEnum.REGULAR_TASK,
    },
  },
)

const handleTask = async (item: TaskItemDto) => {
  console.log(item)
  if (item.svgName === 'daily_sign') {
    router.push(`/homePage/homeTab#levelContainerRef`)
  } else if (item.svgName === 'valid_comments') {
    // 发布评论
    ElMessage.info('快去文章评论区去发表评论吧~')
  } else if (item.svgName === 'topic_publish') {
    router.push(`/homePage/askTab#tabsRef`)
  } else if (item.svgName === 'answer_ask') {
    // 回答问题
    router.push('/userPage/selfAnswer')
  } else if (item.svgName === 'video_publish') {
    // 视频发布
    router.push('/publishVideo')
  } else if (item.svgName === 'practice_publish') {
    // 个人实践/投稿
    router.push('/publishCase')
  }
}
</script>
