<template>
  <div class="outpatient-record">
    <el-table :data="records" style="width: 100%">
      <el-table-column prop="date" label="就诊日期" width="180"/>
      <el-table-column prop="doctor" label="医生" width="180"/>
      <el-table-column prop="status" label="状态" width="120">
        <!-- 修复：当 status 为 null、undefined、空字符串时统一显示为 “未确认” 并使用已选中样式 -->
        <template #default="{ row }">
          <el-checkbox
            v-model="row._statusChecked"
            :true-label="'已确认'"
            :false-label="'未确认'"
            :disabled="true"
            @change="onStatusChange(row)">
            {{ row._statusChecked ? '已确认' : '未确认' }}
          </el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button type="text" size="small" @click="viewDetail(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'OutpatientRecord',
  data() {
    return {
      records: []   // [{ date, doctor, status }]
    };
  },
  created() {
    this.fetchRecords();
  },
  methods: {
    /** 获取就诊记录 */
    async fetchRecords() {
      const res = await this.$api.getOutpatientRecords();
      // 这里统一把 status 转换为布尔值，避免出现空方框
      this.records = res.data.map(item => ({
        ...item,
        // status 可能为 null、undefined、''，统一映射为 false（未确认）
        _statusChecked: !!item.status
      }));
    },

    /** 当状态复选框变化时（理论上只读，这里保留以防后续业务需要） */
    onStatusChange(row) {
      // 只在前端展示，不向后端提交，防止误改
      // 如需持久化，请在此调用对应的 API
    },

    /** 查看详情 */
    viewDetail(row) {
      this.$router.push({ name: 'OutpatientDetail', params: { id: row.id } });
    }
  }
};
</script>

<style scoped>
.outpatient-record {
  padding: 20px;
}
</style>
