<template>
  <div class="course-qr-admin">
    <!-- 顶部标题 -->
    <div class="admin-header">
      <h1 class="admin-title">
        <i class="el-icon-qr-code"></i>
        课程二维码管理
      </h1>
    </div>
    <div class="admin-main">
      <!-- 课程列表面板 -->
      <div class="course-list-panel">
        <div class="panel-title">
          <i class="el-icon-menu"></i>
          选择课程
        </div>
        <el-scrollbar style="height: 600px;">
          <div v-for="course in courses" :key="course.id" :class="['course-item', {active: selectedCourse && selectedCourse.id === course.id}]" @click="selectCourse(course)">
            <div class="course-name">{{ course.name }}</div>
            <div class="course-info">
              <span><i class="el-icon-date"></i> {{ course.time }}</span>
              <span><i class="el-icon-location"></i> {{ course.location }}</span>
              <span><i class="el-icon-user"></i> {{ course.teacher }}</span>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <!-- 二维码展示面板 -->
      <div class="qr-display-panel">
        <div class="panel-title">
          <i class="el-icon-qr-code"></i>
          课程签到二维码
        </div>
        <div v-if="!selectedCourse" class="empty-state">
          <i class="el-icon-qr-code" style="font-size:64px;opacity:0.5;"></i>
          <h5>请选择课程生成二维码</h5>
          <p class="text-muted">选择左侧课程后，将自动生成对应的签到二维码</p>
        </div>
        <div v-else>
          <div class="qr-container">
            <h4 style="margin-bottom: 20px; color: #2c3e50;">{{ selectedCourse.name }}</h4>
            <div class="qr-code">
              <img :src="qrImgUrl" alt="二维码" style="width:200px;height:200px;" />
            </div>
            <div class="qr-info">
              <h6><i class="el-icon-info"></i> 课程信息</h6>
              <div class="qr-info-grid">
                <div><strong>时间：</strong>{{ selectedCourse.time }}</div>
                <div><strong>地点：</strong>{{ selectedCourse.location }}</div>
                <div><strong>主讲：</strong>{{ selectedCourse.teacher }}</div>
                <div><strong>类型：</strong>{{ getTypeName(selectedCourse.type) }}</div>
              </div>
            </div>
            <div class="qr-actions">
              <el-button type="primary" icon="el-icon-download" class="btn-qr" @click="downloadQR">下载二维码</el-button>
              <el-button type="success" icon="el-icon-view" class="btn-qr" @click="previewCheckin">预览签到页</el-button>
              <el-button type="info" icon="el-icon-document-copy" class="btn-qr" @click="copyUrl">复制链接</el-button>
            </div>
          </div>
          <div class="usage-tips">
            <h6><i class="el-icon-lightning"></i> 使用说明</h6>
            <ul>
              <li>学员扫描此二维码可直接进入课程签到页面</li>
              <li>二维码包含课程信息，自动识别对应课程</li>
              <li>支持微信扫一扫</li>
              <li>建议在课程开始前30分钟展示二维码</li>
              <li>可下载二维码图片用于打印或分享</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CourseQr',
  data() {
    return {
      courses: [
        {
          id: 1,
          name: '2025产业加速营 | 智能制造专题',
          time: '2025-06-04 09:00-17:00',
          location: '商学院A101',
          teacher: '王教授',
          type: 'course'
        },
        {
          id: 2,
          name: '校友企业参访 | 新能源企业',
          time: '2025-06-10 13:30-17:00',
          location: '苏州高新区',
          teacher: '李总监',
          type: 'activity'
        },
        {
          id: 3,
          name: '移动课堂 | AI商业落地',
          time: '2025-06-15 09:00-16:00',
          location: '创新实验室B202',
          teacher: '张教授',
          type: 'workshop'
        },
        {
          id: 4,
          name: '2025校友论坛 | 数字经济新机遇',
          time: '2025-06-20 14:00-17:30',
          location: '报告厅',
          teacher: '特邀嘉宾',
          type: 'activity'
        },
        {
          id: 5,
          name: '2025暑期创新营 | 项目路演',
          time: '2025-06-27 09:00-12:00',
          location: '多功能厅',
          teacher: '创业导师团',
          type: 'course'
        }
      ],
      selectedCourse: null
    }
  },
  watch: {
    selectedCourse(val) {
      if (val) this.$nextTick(this.renderQRCode)
    }
  },
  methods: {
    selectCourse(course) {
      this.selectedCourse = course
    },
    renderQRCode() {
      const checkinUrl = `${window.location.origin}/course-checkin.html?courseId=${this.selectedCourse.id}&courseName=${encodeURIComponent(this.selectedCourse.name)}`
      const qrDiv = this.$refs.qrcode
      qrDiv.innerHTML = ''
      // 这里需要根据实际情况生成二维码图片
      // 这里只是占位，实际实现需要根据后端接口生成二维码图片
      this.qrImgUrl = checkinUrl
    },
    getTypeName(type) {
      const types = { course: '课程', activity: '活动', workshop: '移动课堂' }
      return types[type] || type
    },
    downloadQR() {
      if (!this.selectedCourse) return
      // 直接下载图片
      const link = document.createElement('a')
      link.download = `${this.selectedCourse.name}-签到二维码.png`
      link.href = this.qrImgUrl
      link.click()
    },
    previewCheckin() {
      if (!this.selectedCourse) return
      const checkinUrl = `${window.location.origin}/course-checkin.html?courseId=${this.selectedCourse.id}&courseName=${encodeURIComponent(this.selectedCourse.name)}`
      window.open(checkinUrl, '_blank')
    },
    copyUrl() {
      if (!this.selectedCourse) return
      const checkinUrl = `${window.location.origin}/course-checkin.html?courseId=${this.selectedCourse.id}&courseName=${encodeURIComponent(this.selectedCourse.name)}`
      if (navigator.clipboard) {
        navigator.clipboard.writeText(checkinUrl).then(() => {
          this.$message.success('签到链接已复制到剪贴板')
        }).catch(() => {
          this.$prompt('请复制以下链接:', '复制签到链接', { inputValue: checkinUrl })
        })
      } else {
        this.$prompt('请复制以下链接:', '复制签到链接', { inputValue: checkinUrl })
      }
    }
  },
  computed: {
    qrImgUrl() {
      if (!this.selectedCourse) return ''
      // 假设后端二维码图片接口为 /api/qr/course?id=xxx
      return `/api/qr/course?id=${this.selectedCourse.id}`
    }
  }
}
</script>

<style scoped>
.course-qr-admin { background: #f8f9fa; min-height: 100vh; }
.admin-header { background: white; padding: 20px 30px; border-bottom: 1px solid #e9ecef; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.admin-title { font-size: 24px; font-weight: 700; color: #2c3e50; margin: 0; display: flex; align-items: center; gap: 12px; }
.admin-main { display: flex; gap: 24px; padding: 30px; min-height: calc(100vh - 100px); }
.course-list-panel { flex: 1; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 24px; max-width: 400px; }
.qr-display-panel { flex: 2; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.panel-title { font-size: 18px; font-weight: 600; margin-bottom: 20px; color: #3498db; display: flex; align-items: center; gap: 8px; }
.course-item { border: 1px solid #e9ecef; border-radius: 8px; padding: 16px; margin-bottom: 12px; cursor: pointer; transition: all 0.3s ease; }
.course-item:hover { border-color: #3498db; box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2); }
.course-item.active { border-color: #3498db; background-color: #e3f2fd; }
.course-name { font-weight: 600; font-size: 16px; margin-bottom: 8px; color: #2c3e50; }
.course-info { font-size: 14px; color: #6c757d; display: flex; flex-direction: column; gap: 4px; }
.qr-container { background: white; border: 2px solid #e9ecef; border-radius: 16px; padding: 30px; margin: 20px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.qr-code { margin: 0 auto; }
.qr-info { margin-top: 20px; padding: 20px; background: #f8f9fa; border-radius: 12px; text-align: left; }
.qr-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.qr-actions { display: flex; gap: 12px; margin-top: 20px; justify-content: center; }
.btn-qr { padding: 12px 24px; border-radius: 8px; font-weight: 500; display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; }
.btn-qr:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 400px; color: #6c757d; }
.usage-tips { background: #e8f5e9; border: 1px solid #c8e6c9; border-radius: 8px; padding: 16px; margin-top: 20px; text-align: left; }
.usage-tips h6 { color: #2e7d32; margin-bottom: 12px; }
.usage-tips ul { margin: 0; padding-left: 20px; color: #2e7d32; }
@media (max-width: 768px) { .admin-main { flex-direction: column; padding: 15px; gap: 15px; } .course-list-panel { max-width: none; } .qr-container { padding: 20px; } .qr-actions { flex-direction: column; } .btn-qr { width: 100%; justify-content: center; } }
</style>
