<template>
  <KlNavTab />
  <div class="sign-content w-1440px ma-auto">
    <!-- 顶部统计 -->
    <div class="sign-header">
      <div class="sign-icon">
        <div class="icon-text">签</div>
      </div>
      <div class="sign-info">
        <div class="search-container">
          <div class="search-group">
            <span class="search-label">积分标题</span>
            <el-input v-model="query.title" placeholder="请输入关键词" class="search-input" clearable>
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
            <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
          </div>

          <div class="sign-center ml-[10px]">
            <el-button type="success" class="sign-btn" @click="handleClickSign"> 立即签到 </el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- Tab切换 -->
    <!-- <div class="sign-tabs">
      <div class="tab" @click="handleClickTab('today')" :class="{ active: sign_status_tab === 'today' }">今日签到</div>
      <div class="tab" @click="handleClickTab('allRanking')" :class="{ active: sign_status_tab === 'allRanking' }">总排行</div>
      <div class="tab" @click="handleClickTab('rewardRanking')" :class="{ active: sign_status_tab === 'rewardRanking' }">奖励排行</div>
    </div> -->

    <!-- 签到列表 -->
    <div class="sign-table">
      <div class="table-header">
        <!-- <div>昵称</div> -->
        <div>积分标题</div>
        <div>积分描述</div>
        <div>积分</div>
        <div>发生时间</div>
      </div>
      <div v-for="item in result?.list" :key="item.id" class="table-row">
        <!-- <div class="avatar"> -->
        <!-- <img :src="item.avatar" alt="avatar" /> -->
        <!-- <span>{{ item.nickname }}</span> -->
        <!-- </div> -->
        <div>{{ item.title }}</div>
        <div>{{ item.description }}</div>
        <div>{{ item.point }}</div>
        <div>{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
      </div>
    </div>
    <!-- 分页组件 -->
    <div class="mt-[10px] flex justify-center">
      <el-pagination
        v-model:current-page="query.pageNo"
        :page-size="query.pageSize"
        layout="prev, pager, next"
        :total="result?.total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'
  import { Search } from '@element-plus/icons-vue'
  import { signIn, getUserPointPage } from '~/api/personal-center/index'
  import type { PageResultMemberPointRecordRespVO } from '~/api/personal-center/types'
  import useUserStore from '~/stores/user'
  import dayjs from 'dayjs'
  const user = useUserInfo()

  const query = reactive({
    pageNo: 1,
    pageSize: 10,
    userId: user.value.id,
    title: '',
  })

  // const result = reactive<PageResultMemberPointRecordRespVO>({
  //   total: 0,
  //   list: [],
  // })
  // const signList = ref([
  //   {
  //     avatar: 'https://dummyimage.com/40x40/ccc/fff.png&text=美',
  //     name: '头街',
  //     totalDays: 756,
  //     continuousDays: 33,
  //     lastSignTime: '2025-05-11 09:22:13',
  //     reward: '3积分',
  //   },
  //   {
  //     avatar: 'https://dummyimage.com/40x40/ccc/fff.png&text=小',
  //     name: 'xiaoy94',
  //     totalDays: 648,
  //     continuousDays: 21,
  //     lastSignTime: '2025-05-11 09:21:15',
  //     reward: '3积分',
  //   },
  //   // ... 其余数据
  // ])

  // const sign_status_tab = ref('today') // today allRanking  rewardRanking
  // const handleClickTab = (val: string) => {
  //   sign_status_tab.value = val
  // }

  const handleCurrentChange = (val: number) => {
    console.log(1)
    query.pageNo = val // 更新当前页
    getUserPointPageList()
  }

  const { data: result, refresh: getUserPointPageList } = await useAsyncData(
    'getUserPointPage',
    async () => {
      const res = await getUserPointPage(query)
      return res.data
    },
    {
      immediate: true, // 立即请求
    }
  )

  // const getUserPointPageList = async () => {
  //   const res = await getUserPointPage(query)
  //   if (res.code === 0) {
  //     result.list = res.data.list
  //     result.total = res.data.total
  //   }
  // }
  // getUserPointPageList()

  const handleClickSign = async () => {
    const res = await signIn()
    if (res.code === 0) {
      ElMessage.success(res.msg)
      query.pageNo = 1
      getUserPointPageList()
    }
    console.log(res)
  }

  const handleSearch = () => {
    query.pageNo = 1
    getUserPointPageList()
  }
</script>

<style lang="scss" scoped>
  .sign-content {
    // background: #f5f5f5;
    padding: 24px;
    .sign-header {
      display: flex;
      align-items: center;
      background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 24px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      border: 1px solid #e9ecef;

      .sign-icon {
        .icon-text {
          font-size: 32px;
          color: #fff;
          background: linear-gradient(45deg, #4f46e5, #8b5cf6);
          width: 60px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 8px;
          box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);
        }
      }

      .search-container {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 32px;

        .search-group {
          flex: 1;
          display: flex;
          align-items: center;
          max-width: 600px;

          .search-label {
            font-size: 14px;
            color: #495057;
            margin-right: 12px;
            white-space: nowrap;
          }

          .search-input {
            flex: 1;
            margin-right: 12px;

            .el-input__inner {
              height: 40px;
              border-radius: 8px;
              border-color: #dee2e6;
            }
          }

          .search-btn {
            height: 40px;
            padding: 0 24px;
            border-radius: 8px;
            font-weight: 500;
          }
        }

        .sign-btn {
          height: 40px;
          padding: 0 24px;
          border-radius: 8px;
          font-weight: 500;
          background: linear-gradient(45deg, #10b981, #34d399);
          border: none;

          &:hover {
            opacity: 0.9;
          }

          .el-icon {
            margin-right: 8px;
          }
        }
      }
    }
    .sign-tabs {
      display: flex;
      background: #fff;
      border-radius: 8px 8px 0 0;
      overflow: hidden;
      border: 1px solid #eee;
      .tab {
        flex: 1;
        text-align: center;
        padding: 16px 0;
        font-size: 16px;
        cursor: pointer;
        &.active {
          background: #f44336;
          color: #fff;
          font-weight: bold;
        }
      }
    }
    .sign-table {
      background: #fff;
      border-radius: 0 0 8px 8px;
      border: 1px solid #eee;
      .table-header,
      .table-row {
        display: flex;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
        div {
          flex: 1;
          text-align: center;
        }
        .avatar {
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 8px;
          }
        }
      }
      .table-header {
        background: #fafafa;
        font-weight: bold;
      }
      .table-row:last-child {
        border-bottom: none;
      }
    }
  }
</style>
