<template>
  <div class="pc-fund-record-container">
    <div class="record-wrapper">
      <div class="filter-card">
        <div class="filter-header">
          <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 bmc"></div>
              <span class="title-text">{{ t('资金记录') }}</span>
            </div>
          </div>
        </div>

        <el-form :inline="true" :model="queryParams" class="filter-body">
          <el-form-item :label="t('资金类型')">
            <el-select
                v-model="queryParams.type"
                class="dark-select"
                :placeholder="t('全部资金')"
                :teleported="false"
                @change="handleQuery"
                style="width: 140px"
            >
              <el-option
                  v-for="item in fundTypeColumns"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item :label="t('交易类型')">
            <el-select
                v-model="queryParams.change_type"
                class="dark-select"
                :placeholder="t('全部类型')"
                :teleported="false"
                @change="handleQuery"
                style="width: 140px"
            >
              <el-option
                  v-for="item in typeColumns"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item :label="t('日期区间')">
            <el-date-picker
                v-model="dateRange"
                type="daterange"
                :start-placeholder="t('开始日期')"
                :end-placeholder="t('结束日期')"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                class="dark-date-picker"
                :teleported="false"
                @change="handleQuery"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleQuery">
              <el-icon><Search /></el-icon>
              {{ t('查询') }}
            </el-button>
            <el-button @click="handleReset">
              <el-icon><RefreshRight /></el-icon>
              {{ t('重置') }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="table-card">
        <div class="table-content">
          <el-table
              :data="tableData"
              v-loading="loading"
              style="width: 100%;"
              height="100%"
              :empty-text="t('暂无相关资金记录')"
          >
            <el-table-column prop="created_at" :label="t('发生时间')" min-width="180">
              <template #default="scope">
                <span class="time-text">{{ scope.row.created_at }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="type" :label="t('资金类型')" min-width="120">
              <template #default="scope">
                <el-tag
                    :type="scope.row.type == 1 ? 'success' : (scope.row.type == 2 ? 'warning' : 'info')"
                    size="small"
                    effect="plain"
                    class="fund-type-tag"
                >
                  {{ scope.row.type == 1 ? t('可用余额') : (scope.row.type == 2 ? t('冻结金额') : t('未知')) }}
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="change_type" :label="t('类型')" :min-width="locale === 'zh' ? 160 : 240">
              <template #default="scope">
                <div
                    class="type-badge"
                    :class="parseFloat(scope.row.amount || 0) < 0 ? 'withdraw' : 'recharge'"
                >
                  <div class="dot"></div>
                  <span>{{ scope.row.change_type || (parseFloat(scope.row.amount || 0) < 0 ? t('支出') : t('收入')) }}</span>
                  <span v-if="scope.row.change_type_text" class="sub-text">({{ scope.row.change_type_text }})</span>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="amount" :label="t('变动金额')" min-width="150">
              <template #default="scope">
                <span
                    class="amount-val"
                    :class="parseFloat(scope.row.amount) < 0 ? 'decrease' : 'increase'"
                >
                  {{ parseFloat(scope.row.amount || 0) > 0 ? '+' : '' }}{{ parseFloat(scope.row.amount || 0) }}
                  <span class="currency">{{ $currency }}</span>
                </span>
              </template>
            </el-table-column>

            <el-table-column prop="before_balance" :label="t('变动前余额')" min-width="150">
              <template #default="scope">
                <span class="balance-text">{{ parseFloat(scope.row.before_balance || 0) }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="after_balance" :label="t('变动后余额')" min-width="150">
              <template #default="scope">
                <span class="balance-text highlighted">{{ parseFloat(scope.row.after_balance || 0) }}</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, 100]"
              :background="true"
              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, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { Search, RefreshRight, ArrowLeft } from '@element-plus/icons-vue'
import { getMoneyLog } from '@/request/api.js'
import { useRouter } from "vue-router"

const router = useRouter()
const { t, locale } = useI18n()

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

const queryParams = reactive({
  page: 1,
  limit: 20,
  type: '', // 资金类型
  change_type: '',
  start_time: '',
  end_time: ''
})

const fundTypeColumns = ref([
  { label: t('全部资金'), value: '' },
  { label: t('可用余额'), value: '1' },
  { label: t('冻结金额'), value: '2' }
])

const typeColumns = ref([
  { label: t('全部类型'), value: '' },
  { label: t('充值'), value: '充值' },
  { label: t('提现'), value: '提现' },
  { label: t('投注'), value: '投注' },
])

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

const fetchData = async () => {
  loading.value = true
  if (dateRange.value && dateRange.value.length === 2) {
    queryParams.start_time = dateRange.value[0]
    queryParams.end_time = dateRange.value[1]
  } else {
    queryParams.start_time = ''
    queryParams.end_time = ''
  }

  try {
    const res = await getMoneyLog(queryParams)
    if (res.code === 1) {
      tableData.value = res.data.list || []
      total.value = res.data.count || res.data.list.length
      typeColumns.value = [{ label: t('全部类型'), value: '' }].concat(res.data?.extend?.change_type_list || [])
    } else {
      tableData.value = []
      total.value = 0
    }
  } catch (err) {
    console.error(err)
    tableData.value = []
  } finally {
    loading.value = false
  }
}

const handleQuery = () => {
  queryParams.page = 1
  fetchData()
}

const handleReset = () => {
  queryParams.type = ''
  queryParams.change_type = ''
  dateRange.value = null
  queryParams.start_time = ''
  queryParams.end_time = ''
  handleQuery()
}

const handleSizeChange = (val) => {
  queryParams.limit = val
  fetchData()
}

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

const goBack = () => {
  router.back()
}
</script>

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

.pc-fund-record-container {
  container-type: inline-size;
  container-name: fund-record;
  height: 100%;
  padding: 6px 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .record-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .filter-card {
    flex-shrink: 0;
    background-color: $card-bg;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.05);

    .filter-header {
      margin-bottom: 8px;
      .header-left {
        display: flex;
        align-items: center;

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

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

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

    .filter-body {
      :deep(.el-form-item) {
        margin-bottom: 0;
        margin-right: 16px;
        .el-form-item__label {
          color: $text-secondary;
          font-size: 14px;
        }
      }
    }
  }

  .table-card {
    flex: 1;
    min-height: 0;
    background-color: $card-bg;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .table-content {
      flex: 1;
      overflow: hidden;
    }

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

    .fund-type-tag {
      font-weight: 500;
    }

    .type-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: bold;
      .dot { width: 4px; height: 4px; border-radius: 50%; margin-right: 4px; }
      .sub-text { margin-left: 4px; font-size: 10px; }

      &.recharge { background: rgba(103, 194, 58, 0.1); color: $color-increase; .dot { background: $color-increase; } }
      &.withdraw { background: rgba(245, 108, 108, 0.1); color: $color-decrease; .dot { background: $color-decrease; } }
    }

    .amount-val {
      font-size: 14px;
      font-weight: bold;
      &.increase { color: $color-increase; }
      &.decrease { color: $color-decrease; }
      .currency { font-size: 10px; color: #777; margin-left: 2px; }
    }

    .balance-text {
      font-size: 13px;
      color: #ccc;
      &.highlighted { color: $main-color; font-weight: bold; }
    }

    .pagination-wrapper {
      margin-top: 8px;
      display: flex;
      justify-content: flex-end;
      flex-shrink: 0;

      .dark-pagination {
        --el-pagination-bg-color: #262626;
        --el-pagination-text-color: #ccc;
        --el-pagination-hover-color: #f8b932;
        display: flex;
        align-items: center;
        gap: 4px;

        :deep(.el-pager li) {
          &.is-active { background-color: $main-color; color: #000; }
        }
      }
    }
  }
}
</style>
