<template>
  <el-container class="commission-detail">
    <el-main>
      <!-- 基本信息 -->
      <div class="basic-info sa-m-b-26">
        <h3 class="sa-m-b-20">{{ t('modules.commission.basicInfo') }}</h3>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="info-item">
              <span class="label">{{ t('modules.commission.transactionNo') }}：</span>
              <span class="value">{{ commissionDetail.tranNo || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <span class="label">{{ t('common.status') }}：</span>
              <el-tag :type="getStatusType('commission', commissionDetail.status)">
                {{ getStatusText('commission', commissionDetail.status) }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <span class="label">{{ t('modules.commission.commissionType') }}：</span>
              <span class="value">{{ getBizTypeText(commissionDetail.bizType) }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <span class="label">{{ t('modules.commission.userName') }}：</span>
              <span class="value">{{ commissionDetail.name || '--' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="sa-m-t-12">
          <el-col :span="6">
            <div class="info-item">
              <span class="label">{{ t('modules.commission.phoneNo') }}：</span>
              <span class="value">{{ commissionDetail.phoneNo || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <span class="label">{{ t('modules.commission.transactionAmount') }}：</span>
              <span class="value">৳{{ commissionDetail.amount || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <span class="label">{{ t('modules.commission.balance') }}：</span>
              <span class="value">৳{{ commissionDetail.balance || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <span class="label">{{ t('modules.commission.orderNo') }}：</span>
              <span class="value">{{ commissionDetail.orderNo || '--' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="sa-m-t-12">
          <el-col :span="6">
            <div class="info-item">
              <span class="label">{{ t('modules.commission.createTime') }}：</span>
              <span class="value">{{ commissionDetail.createTime || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <span class="label">{{ t('modules.commission.issueTime') }}：</span>
              <span class="value">{{ commissionDetail.transTime || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <span class="label">{{ t('modules.commission.settleTime') }}：</span>
              <span class="value">{{ commissionDetail.settleTime || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <span class="label">{{ t('modules.commission.remark') }}：</span>
              <span class="value">{{ commissionDetail.memo || '--' }}</span>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 操作日志 -->
      <div class="operation-logs sa-m-b-26 mt-40px">
        <h3 class="sa-m-b-20">{{ t('modules.commission.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="time" :label="t('modules.commission.operationTime')" min-width="160" align="center">
              <template #default="scope">
                {{ scope.row.time || '--' }}
              </template>
            </el-table-column>
            <el-table-column prop="operator" :label="t('modules.commission.operator')" min-width="120" align="center">
              <template #default="scope">
                {{ scope.row.operator || '--' }}
              </template>
            </el-table-column>
            <el-table-column prop="action" :label="t('modules.commission.operationType')" min-width="200">
              <template #default="scope">
                {{ scope.row.action || '--' }}
              </template>
            </el-table-column>
            <el-table-column prop="remark" :label="t('modules.commission.remark')" min-width="300">
              <template #default="scope">
                {{ scope.row.remark || '--' }}
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <div class="sa-m-t-16" v-if="operationLogs.total > 0">
          <sa-pagination :pageData="operationLogs.pageData" @updateFn="getOperationLogs"
            layout="total, prev, pager, next" />
        </div>
      </div>
    </el-main>
  </el-container>
</template>

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

const { t } = useI18n();

const props = defineProps(['modal']);
const emit = defineEmits(['modalCallBack']);

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

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

// 通用状态处理函数
const getStatusText = (type, value) => {
  // 对于佣金状态，使用国际化文本
  if (type === 'commission') {
    const statusMap = {
      1: t('modules.commission.unsettled'),
      2: t('modules.commission.settled'),
    };
    return statusMap[value] || t('modules.commission.unknown');
  }
  return t('modules.commission.unknown');
};

const getStatusType = (type, value) => {
  // 对于佣金状态，直接使用financeUtils中的函数
  if (type === 'commission') {
    const statusMap = {
      1: 'warning', // 未结算
      2: 'success', // 已结算
    };
    return statusMap[value] || 'info';
  }
  return 'info';
};

// 获取佣金类型文本
function getBizTypeText(bizType) {
  const typeMap = {
    1001: t('modules.commission.recharge'),
    2001: t('modules.commission.withdraw'),
    3001: t('modules.commission.groupPayment'),
    3002: t('modules.commission.joinPayment'),
    4001: t('modules.commission.orderRefund'),
    4002: t('modules.commission.commissionRefund'),
    5001: t('modules.commission.inviteReward'),
    5002: t('modules.commission.levelReward'),
    5003: t('modules.commission.taskReward'),
    5004: t('modules.commission.inviteReward'),
    5005: t('modules.commission.levelReward'),
    6001: t('modules.commission.recharge'),
    7001: t('modules.commission.withdraw'),
  };
  return typeMap[bizType] || t('modules.commission.unknown');
}

// 获取佣金详情
async function getCommissionDetail() {
  if (!props.modal?.params?.id) return;

  loading.value = true;
  try {
    const { code, data } = await api.commission.detail(props.modal.params.id);
    if (code == '200') {
      commissionDetail.value = data;
    }
  } catch (error) {
    console.error('获取佣金详情失败:', error);
  } finally {
    loading.value = false;
  }
}

// 获取操作日志
function getOperationLogs(page) {
  if (page) operationLogs.pageData.page = page;
  operationLogs.loading = true;

  try {
    // 模拟操作日志数据
    const mockLogs = [
      {
        time: '2025/06/06 12:30:30',
        operator: 'Aamir Khan',
        action: '创建佣金记录',
        remark: '--',
      },
      {
        time: '2025/06/06 12:36:30',
        operator: 'system',
        action: '佣金状态更新为处理中',
        remark: '--',
      },
      {
        time: '2025/06/06 12:40:30',
        operator: 'admin',
        action: '佣金结算完成',
        remark: '正常结算',
      },
    ];

    operationLogs.data = mockLogs;
    operationLogs.total = mockLogs.length;
  } catch (error) {
    console.error('获取操作日志失败:', error);
  } finally {
    operationLogs.loading = false;
  }
}

onMounted(() => {
  getCommissionDetail();
  getOperationLogs();
});
</script>

<style lang="scss" scoped>
.commission-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: 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>
