<script lang="ts" setup>
import { List, Refresh, Search } from '@element-plus/icons-vue';
import { computed, onMounted, ref } from 'vue';
import { getRechargeLog } from '@/api/model/index.ts';

interface RechargeLog {
  id: string;
  content: string;
  rechargeAmount: number;
  creationTime: string;
  expireDateTime: string;
  contactInfo: string;
  remark: string;
  userId: string;
}

const loading = ref(false);
const logData = ref<RechargeLog[]>([]);
const searchText = ref('');
const currentSort = ref({ prop: '', order: '' });
const currentPage = ref(1);
const pageSize = ref(10);

// 模拟数据获取
async function fetchRechargeLog() {
  try {
    loading.value = true;
    const res = await getRechargeLog();
    logData.value = res.data || [];
  }
  catch (error) {
    console.error('获取充值记录失败:', error);
    ElMessage.error('获取充值记录失败');
  }
  finally {
    loading.value = false;
  }
}

// 排序处理
function handleSortChange({ prop, order }: { prop: string; order: string }) {
  currentSort.value = { prop, order };
}

// 搜索处理
function handleSearch() {
  currentPage.value = 1;
}

function handleSearchClear() {
  searchText.value = '';
  currentPage.value = 1;
}

// 刷新数据
function refreshLog() {
  fetchRechargeLog();
  currentPage.value = 1;
  searchText.value = '';
  currentSort.value = { prop: '', order: '' };
}

// 过滤和排序后的数据
const filteredData = computed(() => {
  let data = [...logData.value];

  // 搜索过滤
  if (searchText.value) {
    const search = searchText.value.toLowerCase();
    data = data.filter(item =>
      (item.contactInfo && item.contactInfo.toLowerCase().includes(search))
      || (item.remark && item.remark.toLowerCase().includes(search)),
    );
  }

  // 排序处理
  if (currentSort.value.prop) {
    const { prop, order } = currentSort.value;
    data.sort((a, b) => {
      // 处理可能为null的值
      const valA = a[prop as keyof RechargeLog] || '';
      const valB = b[prop as keyof RechargeLog] || '';

      if (order === 'ascending') {
        return valA > valB ? 1 : valA < valB ? -1 : 0;
      }
      else {
        return valA < valB ? 1 : valA > valB ? -1 : 0;
      }
    });
  }

  // 分页处理
  // if (showPagination.value) {
  //   const start = (currentPage.value - 1) * pageSize.value;
  //   return data.slice(start, start + pageSize.value);
  // }

  return data;
});

// 是否显示分页 暂时不需要分页功能
const showPagination = computed(() => {
  // return logData.value.length > 10;
  return false;
});

onMounted(() => {
  fetchRechargeLog();
});
</script>

<template>
  <div class="recharge-log-container">
    <div class="log-header">
      <h2 class="log-title">
        <el-icon><List /></el-icon>
        充值记录
      </h2>
      <div class="header-actions">
        <el-tooltip content="刷新数据" placement="top">
          <el-button circle :loading="loading" @click="refreshLog">
            <el-icon><Refresh /></el-icon>
          </el-button>
        </el-tooltip>
        <el-input
          v-model="searchText"
          placeholder="搜索联系方式/备注"
          clearable
          style="width: 200px; margin-left: 10px;"
          @clear="handleSearchClear"
          @keyup.enter="handleSearch"
        >
          <template #append>
            <el-button @click="handleSearch">
              <el-icon><Search /></el-icon>
            </el-button>
          </template>
        </el-input>
      </div>
    </div>

    <el-table
      v-loading="loading"
      :data="filteredData"
      style="width: 100%"
      border
      stripe
      highlight-current-row
      @sort-change="handleSortChange"
    >
      <el-table-column
        prop="content"
        label="套餐类型"
        width="120"
        sortable="custom"
      />
      <el-table-column
        prop="rechargeAmount"
        label="金额(元)"
        width="120"
        align="right"
        sortable="custom"
      >
        <template #default="{ row }">
          <span class="amount-cell">¥{{ row.rechargeAmount.toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="creationTime"
        label="充值时间"
        width="180"
        sortable="custom"
      />
      <el-table-column
        prop="expireDateTime"
        label="到期时间"
        width="180"
        sortable="custom"
      />
      <el-table-column prop="contactInfo" width="100" label="联系方式">
        <template #default="{ row }">
          <el-tooltip v-if="row.contactInfo && row.contactInfo.length > 8" :content="row.contactInfo" placement="top">
            <span class="ellipsis-text">{{ row.contactInfo }}</span>
          </el-tooltip>
          <span v-else>{{ row.contactInfo || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注">
        <template #default="{ row }">
          <el-tooltip v-if="row.remark && row.remark.length > 10" :content="row.remark" placement="top">
            <span class="ellipsis-text">{{ row.remark }}</span>
          </el-tooltip>
          <span v-else>{{ row.remark || '-' }}</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="log-footer">
      <div class="summary">
        共 <span class="highlight">{{ filteredData.length }}</span> 条记录
      </div>
      <el-pagination
        v-if="showPagination"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="filteredData.length"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        background
      />
    </div>
  </div>
</template>

<style scoped>
.recharge-log-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.log-title {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 18px;
  color: #333;
}

.log-title .el-icon {
  margin-right: 8px;
  color: #409eff;
}

.header-actions {
  display: flex;
  align-items: center;
}

.amount-cell {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  color: #e74c3c;
}

.ellipsis-text {
  display: inline-block;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.log-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.summary {
  color: #666;
  font-size: 14px;
}

.highlight {
  color: #409eff;
  font-weight: bold;
}

/* 表格样式优化 */
:deep(.el-table) {
  font-size: 14px;
}

:deep(.el-table th) {
  background-color: #f8fafc;
  color: #333;
  font-weight: 600;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: #fafafa;
}

:deep(.el-table .cell) {
  padding: 8px 12px;
}

/* 分页样式优化 */
:deep(.el-pagination) {
  padding: 0;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #409eff;
  color: #fff;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled):hover) {
  color: #409eff;
}
</style>
