/**
 * Real-Name Verification Management View
 */

import { adminApi } from '../api/admin.js';

const { ref, onMounted } = Vue;

export default {
  name: 'RealNameManagement',
  template: `
    <div class="realname-management">
      <div class="page-header">
        <h2>实名认证管理</h2>
      </div>

      <div class="table-container">
        <table class="admin-table">
          <thead>
            <tr>
              <th>ID</th>
              <th>用户邮箱</th>
              <th>真实姓名</th>
              <th>身份证号</th>
              <th>提交时间</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="record in records" :key="record.id">
              <td>{{ record.id }}</td>
              <td>{{ record.user_email }}</td>
              <td>{{ record.real_name }}</td>
              <td>{{ record.id_card }}</td>
              <td>{{ formatDate(record.created_at) }}</td>
              <td>
                <span :class="'status-tag ' + getStatusClass(record.status)">
                  {{ getStatusText(record.status) }}
                </span>
              </td>
              <td>
                <div class="row-actions" v-if="record.status === 0">
                  <a href="javascript:;" @click="approve(record)">通过</a>
                  <span class="sep">|</span>
                  <a href="javascript:;" class="text-danger" @click="reject(record)">驳回</a>
                </div>
                <span v-else>--</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div v-if="loading" class="loading">加载中...</div>
      <div v-else-if="records.length === 0" class="placeholder">暂无待审核记录</div>
    </div>
  `,
  setup() {
    const records = ref([]);
    const loading = ref(true);

    const loadRecords = async () => {
      loading.value = true;
      try {
        const res = await adminApi.getRealNameRecords();
        records.value = res.data || [];
      } catch (e) {
        console.error('Failed to load real-name records', e);
      } finally {
        loading.value = false;
      }
    };

    const formatDate = (ts) => new Date(ts * 1000).toLocaleString();

    const getStatusText = (s) => {
      const map = { 0: '待审核', 1: '已通过', 2: '已驳回' };
      return map[s] || '未知';
    };

    const getStatusClass = (s) => {
      const map = { 0: 'status-pending', 1: 'status-active', 2: 'status-disabled' };
      return map[s] || '';
    };

    const approve = (record) => {
       alert('功能开发中: 通过 ' + record.real_name);
    };

    const reject = (record) => {
       alert('功能开发中: 驳回 ' + record.real_name);
    };

    onMounted(loadRecords);

    return { records, loading, formatDate, getStatusText, getStatusClass, approve, reject };
  }
};
