<template>
  <div class="training-detail-container">
    <a-card title="培训基本信息">
      <!-- 培训基本信息展示区 -->
    </a-card>
    <a-card title="互动与留痕" style="margin-top: 16px">
      <a-tabs>
        <a-tab-pane key="sign" tab="签到">
          <div class="sign-in-section">
            <a-button type="primary" :disabled="signedIn" @click="handleSignIn">
              {{ signedIn ? '已签到' : '点击签到' }}
            </a-button>
            <div v-if="signedIn" class="sign-in-success">签到成功！</div>
            <a-divider />
            <div class="sign-in-records">
              <h4>签到记录</h4>
              <a-table :data="signInRecords" :columns="signInColumns" row-key="id" size="small" />
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="quiz" tab="答题">
          <!-- 答题互动区 -->
        </a-tab-pane>
        <a-tab-pane key="discussion" tab="讨论">
          <!-- 讨论区 -->
        </a-tab-pane>
        <a-tab-pane key="score" tab="打分/评价">
          <!-- 打分/评价区 -->
        </a-tab-pane>
        <a-tab-pane key="feedback" tab="反馈/留痕">
          <!-- 反馈/留痕区 -->
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <a-card title="案例/公开课关联" style="margin-top: 16px">
      <!-- 关联案例/公开课展示区 -->
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 签到状态
const signedIn = ref(false)

// 签到记录（模拟数据）
const signInRecords = ref([
  { id: 1, name: '张三', time: '2024-06-01 09:00:00' },
  { id: 2, name: '李四', time: '2024-06-01 09:01:00' },
])

const signInColumns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '签到时间', dataIndex: 'time', key: 'time' },
]

// 签到操作
function handleSignIn() {
  signedIn.value = true
  // 实际应用中应调用后端API并刷新记录
}
</script>

<style scoped>
.training-detail-container {
  padding: 16px;
  background: #f5f5f5;
  min-height: 100vh;
}
.sign-in-section {
  padding: 16px 0;
}
.sign-in-success {
  color: #52c41a;
  margin-top: 8px;
}
.sign-in-records {
  margin-top: 24px;
}
</style>
