<template>
  <div class="behavior-record-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <vab-card title="行为记录管理">
          <template #header>
            <div class="card-header">
              <span>奖惩记录列表</span>
              <el-button type="primary" size="small" @click="handleAdd"> <vab-icon icon="add-line" /> 新增记录</el-button>
            </div>
          </template>

          <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.type" placeholder="全部" clearable style="width: 120px">
                    <el-option label="违规违纪" value="violation" />
                    <el-option label="表彰奖励" value="reward" />
                    <el-option label="日常检查" value="inspection" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="small" @click="handleQuery"> <vab-icon icon="search-line" /> 查询</el-button>
                </el-form-item>
              </el-form>
            </vab-query-form-left-panel>
          </vab-query-form>

          <el-table v-loading="loading" :data="tableData" border stripe style="height: calc(100vh - 400px);">
            <el-table-column prop="studentName" label="姓名" width="100" />
            <el-table-column prop="studentId" label="学号" width="120" />
            <el-table-column prop="college" label="学院" width="120" show-overflow-tooltip />
            <el-table-column prop="type" label="类型" width="100">
              <template #default="{ row }">
                <el-tag :type="getTypeTag(row.type)">{{ getTypeLabel(row.type) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="事项" min-width="150" show-overflow-tooltip />
            <el-table-column prop="score" label="分值变动" width="100" align="center">
              <template #default="{ row }">
                <span :class="row.score > 0 ? 'text-success' : 'text-danger'" class="font-bold">
                  {{ row.score > 0 ? '+' : '' }}{{ row.score }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="记录时间" width="160" />
            <el-table-column label="操作" width="100" fixed="right">
              <template #default="{ row }">
                <el-popconfirm title="确定撤销该条记录吗？" @confirm="handleDelete(row)">
                  <template #reference>
                    <el-button type="danger" text size="small">撤销</el-button>
                  </template>
                </el-popconfirm>
              </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>
      </el-col>

      <el-col :span="8" style="height: calc(100vh - 400px);">
        <!-- 信用分排行 -->
        <vab-card title="素质分红黑榜" class="mb-20">
          <el-tabs v-model="rankTab">
            <el-tab-pane label="红榜 (Top 5)" name="top">
              <div class="rank-list">
                <div v-for="(item, index) in topList" :key="index" class="rank-item">
                  <div class="rank-num top">{{ index + 1 }}</div>
                  <div class="info">
                    <div class="name">{{ item.name }} <span class="college">{{ item.college }}</span></div>
                    <div class="score text-success">{{ item.score }} 分</div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="黑榜 (Bottom 5)" name="bottom">
               <div class="rank-list">
                <div v-for="(item, index) in bottomList" :key="index" class="rank-item">
                  <div class="rank-num bottom">{{ index + 1 }}</div>
                  <div class="info">
                    <div class="name">{{ item.name }} <span class="college">{{ item.college }}</span></div>
                    <div class="score text-danger">{{ item.score }} 分</div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </vab-card>

        <!-- 规则说明 -->
        <vab-card title="评分规则说明">
          <el-collapse v-model="activeRule">
            <el-collapse-item title="违规扣分标准" name="1">
              <div class="rule-item">1. 宿舍卫生检查不合格：-2分/次</div>
              <div class="rule-item">2. 违规使用大功率电器：-10分/次</div>
              <div class="rule-item">3. 晚归/未归：-5分/次</div>
            </el-collapse-item>
            <el-collapse-item title="奖励加分标准" name="2">
              <div class="rule-item">1. 获得“文明寝室”称号：+5分</div>
              <div class="rule-item">2. 参加志愿服务活动：+0.5分/小时</div>
              <div class="rule-item">3. 拾金不昧等好人好事：+2分</div>
            </el-collapse-item>
          </el-collapse>
        </vab-card>
      </el-col>
    </el-row>

    <!-- 新增记录弹窗 -->
    <record-add-dialog ref="recordAddDialogRef" @success="handleQuery" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import RecordAddDialog from './components/RecordAddDialog.vue'

defineOptions({
  name: 'BehaviorRecord',
})

// --- Data ---
const queryForm = reactive({
  keyword: '',
  type: '',
  pageNo: 1,
  pageSize: 10,
})

const loading = ref(false)
const total = ref(100)
const tableData = ref<any[]>([])
const recordAddDialogRef = ref()
const rankTab = ref('top')
const activeRule = ref(['1'])

const topList = [
  { name: '梁健', college: 'ZJUI', score: 98.5 },
  { name: '鲁永波', college: 'ZJE', score: 96.0 },
  { name: '王应哲', college: 'ZIBS', score: 95.5 },
  { name: '杨勇捷', college: 'ZJUI', score: 94.0 },
  { name: '苑国波', college: 'ZJE', score: 93.5 },
]

const bottomList = [
  { name: '曹青青', college: 'ZIBS', score: 65.0 },
  { name: '石焕然', college: 'ZJUI', score: 68.5 },
  { name: '梁健', college: 'ZJE', score: 70.0 },
  { name: '鲁永波', college: 'ZJUI', score: 72.5 },
  { name: '王应哲', college: 'ZIBS', score: 75.0 },
]

// --- Helpers ---
const getTypeLabel = (type: string) => {
  const map: any = { violation: '违规', reward: '奖励', inspection: '检查' }
  return map[type] || type
}
const getTypeTag = (type: string) => {
  const map: any = { violation: 'danger', reward: 'success', inspection: 'info' }
  return map[type]
}

// --- Methods ---
const generateMockData = () => {
  return [
    {
      studentName: '梁健',
      studentId: '31901001',
      college: 'ZJUI',
      type: 'violation',
      title: '使用大功率电器(电磁炉)',
      score: -10,
      createTime: '2026-01-23 10:30:00'
    },
    {
      studentName: '鲁永波',
      studentId: '31901002',
      college: 'ZJE',
      type: 'reward',
      title: '获得“月度文明寝室”称号',
      score: 5,
      createTime: '2026-01-22 16:00:00'
    },
    {
      studentName: '王应哲',
      studentId: '31901003',
      college: 'ZIBS',
      type: 'inspection',
      title: '日常卫生检查-优秀',
      score: 1,
      createTime: '2026-01-21 09:00:00'
    }
  ]
}

const handleQuery = () => {
  loading.value = true
  setTimeout(() => {
    tableData.value = generateMockData()
    loading.value = false
  }, 500)
}

const handleAdd = () => {
  recordAddDialogRef.value.open()
}

const handleDelete = (row: any) => {
  ElMessage.success('记录已撤销，分值已回滚')
  handleQuery()
}

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

handleQuery()
</script>

<style lang="scss" scoped>
.behavior-record-container {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .mb-20 { margin-bottom: 20px; }
  .text-success { color: var(--el-color-success); }
  .text-danger { color: var(--el-color-danger); }
  .font-bold { font-weight: bold; }

  .rank-list {
    .rank-item {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child { border-bottom: none; }

      .rank-num {
        width: 24px;
        height: 24px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin-right: 15px;
        font-size: 14px;
        
        &.top { background: #ffece8; color: #f56c6c; }
        &.bottom { background: #f4f4f5; color: #909399; }
      }
      
      .info {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .name { font-weight: bold; font-size: 14px; }
        .college { font-size: 12px; color: #999; font-weight: normal; margin-left: 5px; }
        .score { font-weight: bold; }
      }
    }
  }

  .rule-item {
    font-size: 13px;
    color: #606266;
    margin-bottom: 8px;
    padding-left: 10px;
    border-left: 2px solid #eee;
  }
}
</style>
