<template>
  <div class="yuebao-log-container">
    <div class="page-wrapper">
      
      <div class="header-card">
        <div class="header-left">
          <div class="back-action" @click="goBack">
            <el-icon><ArrowLeft /></el-icon>
            <span class="back-text">{{ t('返回') }}</span>
          </div>
          <el-divider direction="vertical" class="header-divider" />
          <div class="title-line">
            <div class="decorate-bar"></div>
            <span class="title-text">{{ t('余额宝明细') }}</span>
          </div>
        </div>
      </div>

      <div class="filter-card">
        <div class="filter-item">
          <span class="filter-label">{{ t('操作类型') }}</span>
          <el-select 
            v-model="queryParams.type" 
            class="dark-select" 
            :placeholder="t('全部类型')" 
            clearable 
            style="width: 140px;"
          >
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>

        <div class="filter-item">
          <span class="filter-label">{{ t('时间范围') }}</span>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            :range-separator="t('至')"
            :start-placeholder="t('开始日期')"
            :end-placeholder="t('结束日期')"
            value-format="YYYY-MM-DD"
            class="dark-date-picker"
            style="width: 280px;"
          />
        </div>

        <div class="filter-actions">
          <el-button type="primary" @click="handleSearch" class="search-btn">
            <el-icon class="mr-1"><Search /></el-icon> {{ t('搜索') }}
          </el-button>
          <el-button @click="handleReset" class="reset-btn">
            <el-icon class="mr-1"><Refresh /></el-icon> {{ t('重置') }}
          </el-button>
        </div>
      </div>

      <div class="list-card">
        <div class="table-content" v-loading="loading">
          <el-table
            :data="tableData"
            style="width: 100%;"
            class="dark-table"
            :empty-text="t('暂无明细记录')"
          >
            <el-table-column prop="id" label="记录ID" width="100" align="center" />
            
            <el-table-column :label="t('类型')" min-width="120" align="center">
              <template #default="scope">
                <el-tag :type="getTypeTag(scope.row.type)" effect="dark" size="small">
                  {{ getTypeText(scope.row.type) }}
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column :label="t('操作金额')" min-width="150" align="right">
              <template #default="scope">
                <span class="amount-text font-din" :class="scope.row.type === 1 ? 'text-success' : 'text-danger'">
                  {{ scope.row.type === 1 ? '+' : '-' }}{{ formatMoney(scope.row.amount) }}
                </span>
              </template>
            </el-table-column>

            <el-table-column :label="t('持仓时长')" min-width="120" align="center">
              <template #default="scope">
                <span class="text-normal" v-if="scope.row.hold_hours !== undefined && scope.row.hold_hours !== null">
                  {{ formatHoldTime(scope.row.hold_hours) }}
                </span>
              </template>
            </el-table-column>

            <el-table-column :label="t('产生收益')" min-width="150" align="right">
              <template #default="scope">
                <span class="amount-text font-din text-gold" v-if="Number(scope.row.interest) > 0">
                  +{{ formatMoney(scope.row.interest) }}
                </span>
                <span class="text-normal font-din" v-else>
                  {{ formatMoney(scope.row.interest) }}
                </span>
              </template>
            </el-table-column>

            <el-table-column :label="t('操作时间')" min-width="180" align="center">
              <template #default="scope">
                <span class="time-text">{{ scope.row.create_time }}</span>
              </template>
            </el-table-column>

            <template #empty>
              <el-empty :description="t('暂无符合条件的记录')" class="dark-empty"></el-empty>
            </template>
          </el-table>
        </div>

        <div class="pagination-wrapper" v-if="total > 0">
          <el-pagination
            v-model:current-page="queryParams.page"
            v-model:page-size="queryParams.limit"
            :page-sizes="[10, 20, 50]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            class="dark-pagination"
          />
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ArrowLeft, Search, Refresh } from '@element-plus/icons-vue';

// 引入你的接口
import { getYuebaoLogList } from '@/request/api';

const { t } = useI18n();
const router = useRouter();

const loading = ref(false);
const tableData = ref([]);
const total = ref(0);

// 日期范围绑定
const dateRange = ref([]);

const queryParams = reactive({
  page: 1,
  limit: 20,
  type: '', 
  start_time: '',
  end_time: ''
});

// 类型下拉配置 (假设 1为转入/增加, 2为转出/减少)
const typeOptions = computed(() => [
  { label: t('全部'), value: '' },
  { label: t('转入'), value: 1 },
  { label: t('转出'), value: 2 }
]);

onMounted(() => {
  fetchData();
});

const goBack = () => {
  router.back();
};

// --- 获取列表数据 ---
const fetchData = async () => {
  loading.value = true;
  try {
    const res = await getYuebaoLogList(queryParams);
    if (res && res.code === 1 && res.data) {
      tableData.value = res.data.list || [];
      total.value = res.data.count || res.data.total || tableData.value.length || 0;
    } else {
      tableData.value = [];
      total.value = 0;
    }
  } catch (error) {
    console.error('获取明细列表失败', error);
  } finally {
    loading.value = false;
  }
};

// --- 搜索与重置 ---
const handleSearch = () => {
  queryParams.page = 1;
  if (dateRange.value && dateRange.value.length === 2) {
    queryParams.start_time = dateRange.value[0] + ' 00:00:00';
    queryParams.end_time = dateRange.value[1] + ' 23:59:59';
  } else {
    queryParams.start_time = '';
    queryParams.end_time = '';
  }
  fetchData();
};

const handleReset = () => {
  queryParams.type = '';
  dateRange.value = [];
  queryParams.start_time = '';
  queryParams.end_time = '';
  queryParams.page = 1;
  fetchData();
};

// --- 分页响应 ---
const handleSizeChange = (val) => {
  queryParams.limit = val;
  fetchData();
};

const handleCurrentChange = (val) => {
  queryParams.page = val;
  fetchData();
};

// --- UI 辅助显示 ---
const formatMoney = (val) => {
  if (!val && val !== 0) return '0.00';
  return Number(val).toFixed(2);
};

// 格式化持仓时间
const formatHoldTime = (hours) => {
  const h = Number(hours);
  if (isNaN(h) || h === 0) return `0${t('小时')}`;
  if (h < 24) return `${h}${t('小时')}`;
  
  const days = Math.floor(h / 24);
  const remainHours = h % 24;
  return remainHours > 0 
    ? `${days}${t('天')}${remainHours}${t('小时')}` 
    : `${days}${t('天')}`;
};

const getTypeText = (type) => {
  if (Number(type) === 1) return t('转入');
  if (Number(type) === 2) return t('转出');
  return t('未知');
};

const getTypeTag = (type) => {
  if (Number(type) === 1) return 'success';
  if (Number(type) === 2) return 'danger';
  return 'info';
};
</script>

<style scoped lang="scss">
$main-color: #f8b932;
$bg-page: #141414;
$card-bg: #1e1e1e;
$border-color: #333;
$text-primary: #fff;
$text-secondary: #999;
$color-increase: #67c23a;
$color-decrease: #f56c6c;

.yuebao-log-container {
  min-height: calc(100vh - 64px);
  background-color: $bg-page;
  padding: 30px 20px;
  box-sizing: border-box;
}

.page-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ==================================
   1. 顶部 Header
   ================================== */
.header-card {
  flex-shrink: 0;
  background-color: $card-bg;
  border-radius: 8px;
  padding: 16px 24px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;

  .header-left {
    display: flex;
    align-items: center;

    .back-action {
      display: flex; align-items: center; cursor: pointer; color: $text-secondary; font-size: 14px; transition: color 0.2s;
      &:hover { color: $main-color; }
      .el-icon { margin-right: 4px; }
    }

    .header-divider { margin: 0 16px; height: 16px; border-left: 1px solid #444; }

    .title-line {
      display: flex; align-items: center;
      .decorate-bar { width: 4px; height: 16px; background-color: $main-color; margin-right: 8px; border-radius: 2px; }
      .title-text { font-size: 16px; font-weight: bold; color: $text-primary; }
    }
  }
}

/* ==================================
   2. 搜索过滤区
   ================================== */
.filter-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  background: $card-bg;
  padding: 20px 24px;
  border-radius: 8px;
  border: 1px solid $border-color;

  .filter-item {
    display: flex;
    align-items: center;
    gap: 10px;

    .filter-label {
      font-size: 14px;
      color: $text-secondary;
    }
  }

  .filter-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;

    .search-btn {
      background-color: $main-color;
      border-color: $main-color;
      color: #000;
      font-weight: bold;
      &:hover { opacity: 0.9; }
    }

    .reset-btn {
      background: transparent;
      color: #ccc;
      border: 1px solid #444;
      &:hover { color: $main-color; border-color: $main-color; }
    }
  }
}

/* ==================================
   3. 列表卡片区
   ================================== */
.list-card {
  background-color: $card-bg;
  border-radius: 12px;
  border: 1px solid $border-color;
  padding: 20px 24px;
  min-height: 500px;
  display: flex;
  flex-direction: column;

  .table-content {
    flex: 1;

    .amount-text {
      font-size: 15px;
      font-weight: bold;
    }
    
    .font-din { font-family: DIN, monospace; }
    .text-gold { color: $main-color; }
    .text-success { color: $color-increase; }
    .text-danger { color: $color-decrease; }
    .text-normal { color: #ccc; font-size: 13px; }

    .time-text {
      font-family: monospace;
      color: #aaa;
      font-size: 13px;
    }
  }
}

/* --- 深色组件深度覆盖 --- */
:deep(.dark-select) {
  .el-input__wrapper {
    background-color: #141414;
    box-shadow: 0 0 0 1px #333 inset;
    &:hover, &.is-focus { box-shadow: 0 0 0 1px $main-color inset; }
  }
  .el-input__inner { color: #fff; }
}

:deep(.dark-date-picker) {
  background-color: #141414 !important;
  box-shadow: 0 0 0 1px #333 inset !important;
  border: none;
  transition: all 0.3s;
  
  .el-range-input { color: #fff; background: transparent; }
  .el-range-separator { color: #999; }
  &:hover, &.is-active { box-shadow: 0 0 0 1px $main-color inset !important; }
}

:deep(.dark-table) {
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-header-bg-color: #141414;
  --el-table-header-text-color: #ccc;
  --el-table-text-color: #eee;
  --el-table-row-hover-bg-color: #262626;
  --el-table-border-color: #333;
  
  &::before { display: none; }
  
  th.el-table__cell {
    font-weight: bold;
    border-bottom: 1px solid #333 !important;
    padding: 12px 0;
  }
  td.el-table__cell {
    border-bottom: 1px solid #2a2a2a !important;
    padding: 14px 0 !important;
  }
  .el-table__inner-wrapper::before { background-color: transparent; }
}

/* --- 分页器 --- */
.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  
  :deep(.dark-pagination) {
    --el-pagination-bg-color: #141414;
    --el-pagination-text-color: #ccc;
    --el-pagination-button-color: #ccc;
    --el-pagination-hover-color: #f8b932;

    .btn-prev, .btn-next, .el-pager li {
      background-color: #141414;
      border: 1px solid #333;
      border-radius: 4px;
      margin: 0 4px;
      &.is-active { background-color: $main-color; color: #000; border-color: $main-color; }
    }
  }
}

.mr-1 { margin-right: 4px; }
</style>