<template>
  <el-drawer v-model="visible" title="房间违规详情" size="500px">
    <div class="detail-container">
      <el-descriptions title="基础信息" :column="1" border>
        <el-descriptions-item label="房间号">{{ roomData?.room }}</el-descriptions-item>
        <el-descriptions-item label="违规总次数">
          <span class="text-danger font-bold">{{ roomData?.count }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="最近违规时间">{{ roomData?.lastTime }}</el-descriptions-item>
        <el-descriptions-item label="责任人">
          <div v-for="student in studentList" :key="student.id" class="student-tag">
            {{ student.name }} ({{ student.id }})
          </div>
        </el-descriptions-item>
      </el-descriptions>

      <div class="chart-section mt-20">
        <div class="section-title">近30日违规趋势</div>
        <vab-chart :option="chartOption" style="height: 250px" />
      </div>

      <div class="history-list mt-20">
        <div class="section-title">历史违规记录</div>
        <el-timeline>
          <el-timeline-item
            v-for="(record, index) in historyList"
            :key="index"
            :timestamp="record.time"
            :type="record.type === 'malignant' ? 'danger' : 'warning'"
          >
            <h4>{{ record.title }}</h4>
            <p>{{ record.desc }}</p>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref, computed } from 'vue'

const visible = ref(false)
const roomData = ref(null)

// Mock Data
const studentList = [
  { id: '31901001', name: '梁健' },
  { id: '31901002', name: '鲁永波' },
  { id: '31901003', name: '王应哲' },
  { id: '31901004', name: '杨勇捷' },
]

const historyList = [
  {
    time: '2026-01-23 10:00:15',
    type: 'malignant',
    title: '检测到恶性负载 (热得快)',
    desc: '功率突变 800W，特征匹配度 98%',
  },
  {
    time: '2026-01-20 18:30:00',
    type: 'overload',
    title: '功率超限报警',
    desc: '总功率达到 3500W，持续 5分钟',
  },
  {
    time: '2026-01-15 21:15:00',
    type: 'malignant',
    title: '检测到恶性负载 (电吹风)',
    desc: '功率 1200W，非阻性负载',
  },
]

const chartOption = computed(() => ({
  grid: { top: 30, right: 20, bottom: 20, left: 40 },
  xAxis: {
    type: 'category',
    data: ['1-1', '1-5', '1-10', '1-15', '1-20', '1-25'],
  },
  yAxis: { type: 'value' },
  series: [
    {
      data: [0, 1, 0, 1, 1, 2],
      type: 'line',
      smooth: true,
      areaStyle: {
        color: 'rgba(245, 108, 108, 0.2)',
      },
      itemStyle: {
        color: '#f56c6c',
      },
    },
  ],
}))

const open = (data) => {
  roomData.value = data
  visible.value = true
}

defineExpose({
  open,
})
</script>

<style lang="scss" scoped>
.detail-container {
  padding: 0 10px;
}
.mt-20 {
  margin-top: 20px;
}
.text-danger {
  color: var(--el-color-danger);
}
.font-bold {
  font-weight: bold;
}
.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  border-left: 4px solid var(--el-color-primary);
  padding-left: 10px;
}
.student-tag {
  display: inline-block;
  background: #f0f2f5;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 5px;
  margin-bottom: 5px;
  font-size: 12px;
}
</style>
