<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, getUserWheelRecordList } from '@/api'
import { usePageSearch } from '@/hooks'
import { ActivityTypeEnum } from '@/constants/enums'
import type { UserLotteryRecordItemDto, UserWheelRecordItemDto } from '@/api'
import { useUserStore } from '@/stores'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const isWareHouse = userInfo.value.address.includes('仓库')

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: string
  value: ActivityTypeEnum
  component: () => VNode
  refresh: () => void
}[] = []

if (!isWareHouse) {
  activityTypeListOptions.push(
    ...[
      {
        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(),
      },
      {
        label: '大转盘',
        value: ActivityTypeEnum.WHEEL,
        component: () => (
          <>
            {!list3.value.length ? (
              <EmptyComp />
            ) : (
              <>
                <div class="space-y-4">
                  <el-table height="500" data={list3.value} stripe border loading={loading3.value}>
                    <el-table-column prop="prizeName" label="名称">
                      {({ row }: { row: UserWheelRecordItemDto }) => (
                        <div>{row.prizeName ?? `谢谢参与（${row.blessingText}）`}</div>
                      )}
                    </el-table-column>
                    <el-table-column prop="createdAtStr" label="参与时间" />
                    <el-table-column prop="isLotteryDone" label="是否中奖">
                      {({ row }: { row: UserWheelRecordItemDto }) => (
                        <div>
                          {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={searchParams3.value.current}
                      v-model:page-size={searchParams3.value.size}
                      onSizeChange={changePageSize3}
                      onCurrentChange={goToPage3}
                      page-sizes={[10, 20, 30, 40]}
                      layout="prev, pager, next, jumper, total"
                      total={total3.value}
                      class="custom-pagination"
                    />
                  </div>
                </div>
              </>
            )}
          </>
        ),
        refresh: () => refresh3(),
      },
    ],
  )
}
const tab = ref(activityTypeListOptions[0]?.value || ActivityTypeEnum.AUCTION)

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 {
  list: list3,
  loading: loading3,
  searchParams: searchParams3,
  total: total3,
  refresh: refresh3,
  goToPage: goToPage3,
  changePageSize: changePageSize3,
} = usePageSearch(getUserWheelRecordList, {
  immediate: false,
})
const refresh = () => {
  activityTypeListOptions.find((item) => item.value === tab.value)?.refresh?.()
}

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

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