<template>
  <div class="flex-1 flex flex-col">
    <div class="flex-1 p-4 pt-1">
      <div class="relative">
        <el-tabs v-model="tab" @tab-change="toggleTab">
          <el-tab-pane
            v-for="tab in activityTypeListOptions"
            :key="tab.value"
            :label="tab.label"
            :name="tab.value"
          >
            <component :is="tab.component" />
          </el-tab-pane>
        </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 class="flex justify-end">
        <p class="text-gray-500 text-sm mb-1 flex items-center gap-1">
          <el-icon><IEpInfoFilled /></el-icon>
          页面仅展示竞拍成功的记录
        </p>
      </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">
        <el-table height="500" :data="list" stripe border>
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="startingPrice" label="起拍价" />
          <el-table-column prop="bidPrice" label="支出YA币" />
        </el-table>
      </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>
  </div>
</template>

<script lang="tsx" setup>
import { getSelfAuctionRecord, getUserLotteryRecordList } from '@/api'
import { usePageSearch } from '@/hooks'
import { ActivityTypeEnum } from '@/constants/enums'
import type { UserLotteryRecordItemDto } from '@/api/dailyLottery/types'

const EmptyComp = () => (
  <div 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>
)

const activityTypeListOptions = [
  {
    label: '限时竞拍',
    value: ActivityTypeEnum.AUCTION,
    component: () => (
      <>
        <div class="flex justify-end">
          <p class="text-gray-500 text-sm mb-1 flex items-center gap-1">
            <el-icon>
              <IEpInfoFilled />
            </el-icon>
            页面仅展示竞拍成功的记录
          </p>
        </div>
        {!list1.value.length ? (
          <EmptyComp />
        ) : (
          <>
            <div class="space-y-4">
              <el-table height="500" data={list1.value} stripe border loading={loading1.value}>
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="startingPrice" label="起拍价" />
                <el-table-column prop="bidPrice" label="支出YA币" />
              </el-table>
            </div>
            <div 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={searchParams1.value.current}
                  v-model:page-size={searchParams1.value.size}
                  onSizeChange={changePageSize1}
                  onCurrentChange={goToPage1}
                  page-sizes={[10, 20, 30, 40]}
                  layout="prev, pager, next, jumper, total"
                  total={total1.value}
                  class="custom-pagination"
                />
              </div>
            </div>
          </>
        )}
      </>
    ),
    refresh: () => refresh1(),
  },
  {
    label: '每日抽奖',
    value: ActivityTypeEnum.DAILY_LOTTERY,
    component: () => (
      <>
        {!list2.value.length ? (
          <EmptyComp />
        ) : (
          <>
            <div class="space-y-4">
              <el-table height="500" data={list2.value} stripe border loading={loading2.value}>
                <el-table-column prop="prizeName" label="名称" />
                <el-table-column prop="activityDateRange" label="参与时间" />
                <el-table-column prop="isLotteryDone" label="是否开奖">
                  {({ row }: { row: UserLotteryRecordItemDto }) => (
                    <div>{row.isLotteryDone ? <span>是</span> : <span>否</span>}</div>
                  )}
                </el-table-column>
                <el-table-column prop="isWin" label="是否中奖">
                  {({ row }: { row: UserLotteryRecordItemDto }) => (
                    <div>
                      {row.isLotteryDone ? (
                        row.isWin ? (
                          <span class="text-green-500">是</span>
                        ) : (
                          <span class="text-red-500">否</span>
                        )
                      ) : (
                        '暂未开奖'
                      )}
                    </div>
                  )}
                </el-table-column>
              </el-table>
            </div>
            <div 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={searchParams2.value.current}
                  v-model:page-size={searchParams2.value.size}
                  onSizeChange={changePageSize2}
                  onCurrentChange={goToPage2}
                  page-sizes={[10, 20, 30, 40]}
                  layout="prev, pager, next, jumper, total"
                  total={total2.value}
                  class="custom-pagination"
                />
              </div>
            </div>
          </>
        )}
      </>
    ),
    refresh: () => refresh2(),
  },
]

const tab = ref(activityTypeListOptions[0]!.value)

const toggleTab = () => {
  refresh()
}

const {
  list: list1,
  loading: loading1,
  searchParams: searchParams1,
  total: total1,
  refresh: refresh1,
  goToPage: goToPage1,
  changePageSize: changePageSize1,
} = usePageSearch(getSelfAuctionRecord, {
  immediate: false,
})
const {
  list: list2,
  loading: loading2,
  searchParams: searchParams2,
  total: total2,
  refresh: refresh2,
  goToPage: goToPage2,
  changePageSize: changePageSize2,
} = usePageSearch(getUserLotteryRecordList, {
  immediate: false,
})

const refresh = () => {
  activityTypeListOptions.find((item) => item.value === tab.value)?.refresh?.()
}

onActivated(() => {
  refresh()
})

defineExpose({
  refresh: () => refresh(),
})
</script>
