<template>
  <el-container class="recharge-detail">
    <el-main v-loading="loading" :element-loading-text="t('common.loading')">
      <!-- 基本信息 -->
      <div class="basic-info sa-m-b-26">
        <h3 class="sa-m-b-20">{{ t('modules.recharge.basicInfo') }}</h3>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="info-item" :style="{ '--label-width': formLabelWidth }">
              <span class="label">{{ t('modules.recharge.orderNo') }}：</span>
              <span class="value">{{ rechargeDetail.orderNo || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item" :style="{ '--label-width': formLabelWidth }">
              <span class="label">{{ t('modules.recharge.status') }}：</span>
              <el-tag :type="getStatusType(rechargeDetail.status)">
                {{ getStatusText(rechargeDetail.status) }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item" :style="{ '--label-width': formLabelWidth }">
              <span class="label">{{ t('modules.recharge.amount') }}：</span>
              <span class="value">৳{{ rechargeDetail.amount || 0 }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item" :style="{ '--label-width': formLabelWidth }">
              <span class="label">{{ t('modules.recharge.currency') }}：</span>
              <span class="value">{{ getCurrencyText(rechargeDetail.currency) }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="sa-m-t-12">
          <el-col :span="6">
            <div class="info-item" :style="{ '--label-width': formLabelWidth }">
              <span class="label">{{ t('modules.recharge.userName') }}：</span>
              <span class="value">{{ rechargeDetail.userName || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item" :style="{ '--label-width': formLabelWidth }">
              <span class="label">{{ t('modules.recharge.phoneNo') }}：</span>
              <span class="value">{{ rechargeDetail.userPhone || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item" :style="{ '--label-width': formLabelWidth }">
              <span class="label">{{ t('modules.recharge.channel') }}：</span>
              <span class="value">{{ rechargeDetail.channelName || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item" :style="{ '--label-width': formLabelWidth }">
              <span class="label">{{ t('modules.recharge.method') }}：</span>
              <span class="value">{{ rechargeDetail.methodName || '--' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="sa-m-t-12">
          <el-col :span="6">
            <div class="info-item" :style="{ '--label-width': formLabelWidth }">
              <span class="label">{{ t('modules.finance.accountBalance') }}：</span>
              <span class="value">৳{{ rechargeDetail.walletBalance || 0 }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item" :style="{ '--label-width': formLabelWidth }">
              <span class="label">{{ t('modules.finance.commissionBalance') }}：</span>
              <span class="value">৳{{ rechargeDetail.earningsBalance || 0 }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="sa-m-t-12">
          <el-col :span="6">
            <!-- 预留位置 -->
          </el-col>
          <el-col :span="6">
            <!-- 预留位置 -->
          </el-col>
        </el-row>
      </div>

      <!-- 操作日志 -->
      <div class="operation-logs sa-m-b-26 mt-40px">
        <h3 class="sa-m-b-20">{{ t('modules.recharge.operationLog') }}</h3>
        <div class="sa-table-wrap">
          <el-table class="sa-table" :data="operationLogs.data" v-loading="operationLogs.loading" stripe border>
            <template #empty>
              <sa-empty />
            </template>
            <el-table-column prop="createTime" :label="t('modules.recharge.operationTime')" min-width="160"
              align="center">
              <template #default="scope">
                {{ scope.row.createTime || '--' }}
              </template>
            </el-table-column>
            <el-table-column prop="createUser" :label="t('modules.recharge.operator')" min-width="120" align="center">
              <template #default="scope">
                {{ scope.row.createUser || '--' }}
              </template>
            </el-table-column>
            <el-table-column prop="type" :label="t('modules.recharge.operationType')" min-width="200">
              <template #default="scope">
                {{ getLogTypeText(scope.row.type) }}
              </template>
            </el-table-column>
            <el-table-column prop="memo" :label="t('modules.recharge.remark')" min-width="160" align="center">
              <template #default="scope">
                {{ scope.row.memo || '--' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { usePagination } from '@/sheep/hooks';
import { useFormConfig } from '@/hooks/useFormConfig';
import { api, financeUtils } from '../finance.service';

const { t } = useI18n();

// 使用表单配置hooks来处理不同语言的宽度
const { formLabelWidth } = useFormConfig({ enWidth: '150px' });

const props = defineProps({
  modal: {
    type: Object,
    default: () => ({}),
  },
});

const rechargeDetail = ref({});
const loading = ref(false);

// 操作日志分页
const { pageData: logPageData } = usePagination();
const operationLogs = reactive({
  data: [],
  loading: false,
  total: 0,
  pageData: logPageData,
});

// 使用公共配置的函数
const getStatusType = (status) => financeUtils.getStatusType(status, 'recharge');
const getStatusText = financeUtils.getRechargeStatusText;
const getCurrencyText = financeUtils.getCurrencyText;
const getLogTypeText = financeUtils.getLogTypeText;

// 获取充值详情
async function getRechargeDetail() {
  if (!props.modal?.params?.id) return;

  loading.value = true;
  try {
    const { code, data } = await api.recharge.recordDetail(props.modal.params.id);
    if (code == '200') {
      rechargeDetail.value = data;
      // 获取详情后更新操作日志
      getOperationLogs();
    }
  } catch (error) {
    console.error('获取充值详情失败:', error);
  } finally {
    loading.value = false;
  }
}

// 获取操作日志 - 从详情数据中获取
function getOperationLogs() {
  operationLogs.loading = true;
  try {
    // 使用详情数据中的 bizLogs
    operationLogs.data = rechargeDetail.value.bizLogs || [];
    operationLogs.total = operationLogs.data.length;
  } catch (error) {
    console.error('获取操作日志失败:', error);
  } finally {
    operationLogs.loading = false;
  }
}

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

<style lang="scss" scoped>
.recharge-detail {
  .basic-info {
    h3 {
      font-size: 16px;
      font-weight: 600;
      color: var(--sa-title);
    }

    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      .label {
        flex-shrink: 0;
        color: var(--sa-subfont);
        font-size: 14px;
        min-width: var(--label-width, 80px);
      }

      .value {
        color: var(--sa-subtitle);
        font-size: 14px;
        font-weight: 500;
      }
    }
  }

  .operation-logs {
    h3 {
      font-size: 16px;
      font-weight: 600;
      color: var(--sa-title);
    }

    .sa-table {
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #dcdfe6;

      :deep(.el-table) {
        border: none;
        border-radius: 0;
      }

      :deep(.el-table__header-wrapper) {
        background: var(--sa-table-header-bg, #f5f7fa);

        .el-table__header {
          background: var(--sa-table-header-bg, #f5f7fa);

          th {
            background: var(--sa-table-header-bg, #f5f7fa) !important;
            font-weight: 600;
            color: var(--sa-title, #303133);
            border-bottom: 1px solid #dcdfe6;
            border-right: 1px solid #dcdfe6;

            &:first-child {
              border-left: none;
            }

            &:last-child {
              border-right: none;
            }
          }
        }
      }

      :deep(.el-table__body-wrapper) {
        .el-table__body {
          tr {
            &:hover {
              background: #f5f7fa !important;
            }

            td {
              border-bottom: 1px solid #dcdfe6;
              border-right: 1px solid #dcdfe6;
              border-left: none;

              &:first-child {
                border-left: none;
              }

              &:last-child {
                border-right: none;
              }
            }

            &:last-child td {
              border-bottom: none;
            }
          }
        }
      }
    }
  }
}
</style>
