<template>
  <div class="credit-bank-container">
    <vab-card>
      <vab-query-form>
        <vab-query-form-left-panel>
          <el-form :inline="true" :model="queryForm" @submit.prevent>
            <el-form-item label="学生信息">
              <el-input v-model="queryForm.keyword" placeholder="姓名/学号" clearable />
            </el-form-item>
            <el-form-item label="学院">
              <el-select v-model="queryForm.college" placeholder="全部" clearable style="width: 150px">
                <el-option label="ZJE (生物医学)" value="ZJE" />
                <el-option label="ZJUI (联合学院)" value="ZJUI" />
                <el-option label="ZIBS (商学院)" value="ZIBS" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery"> <vab-icon icon="search-line" /> 查询</el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-left-panel>
        <vab-query-form-right-panel>
          <el-button type="success" @click="handleExport"> <vab-icon icon="download-line" /> 导出报表</el-button>
        </vab-query-form-right-panel>
      </vab-query-form>

      <el-table v-loading="loading" :data="tableData" border stripe>
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="studentId" label="学号" width="120" />
        <el-table-column prop="college" label="学院" width="150" />
        <el-table-column prop="creditScore" label="信用分 (行为)" width="150" sortable>
          <template #default="{ row }">
            <span :class="getCreditClass(row.creditScore)">{{ row.creditScore }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="qualityScore" label="素质分 (活动)" width="150" sortable>
          <template #default="{ row }">
            <span class="text-primary font-bold">{{ row.qualityScore }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="lastUpdate" label="最近变动" min-width="200" show-overflow-tooltip />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleAdjust(row)">奖惩/赋分</el-button>
            <el-button type="text" size="small" @click="handleHistory(row)">记录</el-button>
          </template>
        </el-table-column>
      </el-table>

      <vab-pagination
        :current-page="queryForm.pageNo"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </vab-card>

    <score-adjust-dialog ref="adjustDialogRef" @success="handleSuccess" />
    
    <!-- 简易的历史记录抽屉 -->
    <el-drawer v-model="historyVisible" title="积分变动记录" size="500px">
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in historyList"
          :key="index"
          :timestamp="item.time"
          :type="item.type === 'add' ? 'success' : 'danger'"
        >
          <h4>{{ item.reason }}</h4>
          <p>
            {{ item.category === 'credit' ? '信用分' : '素质分' }} 
            <span :class="item.type === 'add' ? 'text-success' : 'text-danger'">
              {{ item.type === 'add' ? '+' : '-' }}{{ item.score }}
            </span>
          </p>
        </el-timeline-item>
      </el-timeline>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import ScoreAdjustDialog from './components/ScoreAdjustDialog.vue'

defineOptions({
  name: 'CreditBank',
})

const queryForm = reactive({
  keyword: '',
  college: '',
  pageNo: 1,
  pageSize: 10,
})

const loading = ref(false)
const total = ref(100)
const tableData = ref([])
const adjustDialogRef = ref()
const historyVisible = ref(false)
const historyList = ref([])

const getCreditClass = (score) => {
  if (score < 60) return 'text-danger font-bold'
  if (score < 80) return 'text-warning'
  return 'text-success'
}

const handleQuery = () => {
  loading.value = true
  setTimeout(() => {
    tableData.value = [
      { name: '梁健', studentId: '31901001', college: 'ZJE', creditScore: 98, qualityScore: 12.5, lastUpdate: '2026-01-20 参加志愿活动 +2' },
      { name: '鲁永波', studentId: '31901002', college: 'ZJUI', creditScore: 85, qualityScore: 8.0, lastUpdate: '2026-01-15 寝室卫生不合格 -2' },
      { name: '王应哲', studentId: '31901003', college: 'ZIBS', creditScore: 55, qualityScore: 2.0, lastUpdate: '2026-01-10 晚归违规 -5' },
      { name: '曹青青', studentId: '31901006', college: 'ZJE', creditScore: 100, qualityScore: 25.0, lastUpdate: '2026-01-22 优秀寝室奖励 +5' },
    ]
    loading.value = false
  }, 500)
}

const handleExport = () => {
  ElMessage.success('报表导出中...')
}

const handleAdjust = (row) => {
  adjustDialogRef.value.open(row)
}

const handleHistory = (row) => {
  // Mock history
  historyList.value = [
    { time: '2026-01-20 14:00', type: 'add', category: 'quality', score: 2, reason: '参加志愿活动' },
    { time: '2025-12-15 09:30', type: 'deduct', category: 'credit', score: 2, reason: '寝室卫生检查不合格' },
    { time: '2025-11-01 10:00', type: 'add', category: 'quality', score: 0.5, reason: '学术讲座签到' },
  ]
  historyVisible.value = true
}

const handleSuccess = () => {
  handleQuery()
}

const handleCurrentChange = (val) => {
  queryForm.pageNo = val
  handleQuery()
}
const handleSizeChange = (val) => {
  queryForm.pageSize = val
  handleQuery()
}

onMounted(() => {
  handleQuery()
})
</script>

<style lang="scss" scoped>
.text-success { color: var(--el-color-success); }
.text-danger { color: var(--el-color-danger); }
.text-warning { color: var(--el-color-warning); }
.text-primary { color: var(--el-color-primary); }
.font-bold { font-weight: bold; }
</style>
