const pageContent = {
  phone: {
    title: '手机号卡旧界面参考',
    description: '保留原手机号卡列表的视觉层级，后续以 as_phone_asset 接口重新实现。',
    columns: ['手机号', '实名人', 'ICCID', '卡类型', '状态'],
    rows: [['138****8888', '张三', '8986 0117 0230', '移动', '正常'], ['176****1234', '王五', '8986 0117 8844', '电信', '异常停机']]
  },
  wechat: {
    title: '企微资料旧界面参考',
    description: '保留原企微资料页面的列表布局，后续以 as_wecom_account 接口重新实现。',
    columns: ['名称', '账号', '所属公司', '实名人', '状态'],
    rows: [['张三', 'zhangsan_88', '示例公司', '张三', '正常'], ['李四', 'lisi_2023', '示例公司', '李四', '待复核']]
  }
};

/**
 * 代码作用（白话）：展示已经删除业务实现的 phone/wechat 界面参考，全部数据固定在前端，防止访问旧 API 或写入旧数据。
 * 关联文件：frontend/src/router/index.js、frontend/tests/legacy-reference.spec.js、frontend/src/styles/app.css。
 * 关联逻辑（调用链/数据流）：参考路由 props.kind -> pageContent -> 表格渲染；禁用按钮 -> 仅显示不可操作提示。
 */
export default {
  props: { kind: { type: String, required: true } },
  setup(props) {
    return { content: pageContent[props.kind] };
  },
  template: `
    <section class="reference-page">
      <header class="page-header">
        <div><p class="eyebrow">LEGACY REFERENCE</p><h2>{{ content.title }}</h2><p>{{ content.description }}</p></div>
        <span class="reference-badge">旧界面参考，不可操作</span>
      </header>
      <article class="reference-card">
        <div class="toolbar"><strong>示例记录</strong><el-button disabled type="primary">新增（参考）</el-button></div>
        <el-table :data="content.rows.map((row) => Object.fromEntries(content.columns.map((column, index) => [column, row[index]])))">
          <el-table-column v-for="column in content.columns" :key="column" :prop="column" :label="column" />
        </el-table>
      </article>
    </section>
  `
};
