<template>
  <el-drawer 
    v-model="visible" 
    title="设备详情" 
    size="50%" 
    :close-on-click-modal="true"
    destroy-on-close
    append-to-body
  >
    <div v-if="currentMeter" class="meter-detail">
      <!-- 头部概览 -->
      <div class="header-section">
        <div class="device-title">
          <div class="room-name">{{ currentMeter.roomName }}</div>
          <el-tag :type="currentMeter.status === 'online' ? 'success' : 'info'" class="ml-10">
            {{ currentMeter.status === 'online' ? '在线' : '离线' }}
          </el-tag>
          <el-tag :type="currentMeter.switchStatus === 'on' ? 'success' : 'danger'" effect="dark" class="ml-5">
            {{ currentMeter.switchStatus === 'on' ? '合闸' : '拉闸' }}
          </el-tag>
        </div>
        <div class="device-meta">
          <div class="meta-item">
            <span class="label">设备编号</span>
            <span class="value">{{ currentMeter.deviceId }}</span>
          </div>
          <div class="meta-item">
            <span class="label">当前余额</span>
            <span class="value text-warning">{{ currentMeter.balance.toFixed(2) }} kWh</span>
          </div>
          <div class="meta-item">
            <span class="label">更新时间</span>
            <span class="value">{{ currentTime }}</span>
          </div>
        </div>
      </div>

      <el-divider />

      <el-tabs v-model="activeTab">
        <!-- 实时监控 Tab -->
        <el-tab-pane label="实时监控" name="monitor">
          <!-- 仪表盘区域 -->
          <el-row :gutter="20" class="mt-20">
            <el-col :span="8">
              <vab-card shadow="never" class="dashboard-card">
                <div class="dashboard-title">电压 (V)</div>
                <div class="dashboard-value text-primary">{{ currentMeter.voltage || '0.0' }}</div>
                <div class="dashboard-icon"><vab-icon icon="flashlight-line" /></div>
              </vab-card>
            </el-col>
            <el-col :span="8">
              <vab-card shadow="never" class="dashboard-card">
                <div class="dashboard-title">电流 (A)</div>
                <div class="dashboard-value text-success">{{ currentMeter.current || '0.00' }}</div>
                <div class="dashboard-icon"><vab-icon icon="pulse-line" /></div>
              </vab-card>
            </el-col>
            <el-col :span="8">
              <vab-card shadow="never" class="dashboard-card">
                <div class="dashboard-title">功率 (W)</div>
                <div class="dashboard-value text-danger">{{ currentMeter.power || '0' }}</div>
                <div class="dashboard-icon"><vab-icon icon="dashboard-3-line" /></div>
              </vab-card>
            </el-col>
          </el-row>

          <!-- 趋势图表 -->
          <div class="chart-section mt-20">
            <div class="chart-header">
              <span class="title">近7日用电趋势 (kWh)</span>
            </div>
            <div class="chart-container" style="height: 300px; width: 100%;">
              <vab-chart :option="chartOption" :autoresize="true" />
            </div>
          </div>
        </el-tab-pane>

        <!-- 操作记录 Tab -->
        <el-tab-pane label="操作记录" name="logs">
          <el-timeline class="mt-20 pl-10">
            <el-timeline-item timestamp="2026-01-23 10:30:00" placement="top" type="primary">
              <el-card shadow="hover">
                <h4>远程充值</h4>
                <p>操作人：系统管理员</p>
                <p>金额：50元 (折合 83.33 kWh)</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2026-01-22 18:00:00" placement="top" type="warning">
              <el-card shadow="hover">
                <h4>余额预警</h4>
                <p>系统自动触发</p>
                <p>剩余电量低于 10 kWh</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref, reactive, onUnmounted } from 'vue'
import dayjs from 'dayjs'

defineOptions({
  name: 'MeterDetailDrawer',
})

const visible = ref(false)
const currentMeter = ref(null)
const activeTab = ref('monitor')
const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
let timer = null

// Chart Option - Simplified for stability
const chartOption = reactive({
  tooltip: { trigger: 'axis' },
  grid: { top: '10%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['01-17', '01-18', '01-19', '01-20', '01-21', '01-22', '01-23']
  },
  yAxis: { type: 'value' },
  series: [{
    name: '用电量',
    type: 'line',
    smooth: true,
    data: [12.5, 15.2, 10.8, 18.5, 22.1, 19.4, 14.2],
    itemStyle: { color: '#409eff' },
    areaStyle: {
      color: 'rgba(64, 158, 255, 0.1)' // Use simple color string instead of echarts.graphic
    }
  }]
})

const open = (row) => {
  console.log('MeterDetailDrawer open called with:', row)
  if (!row) return
  
  currentMeter.value = row
  activeTab.value = 'monitor'
  visible.value = true
  
  // Start simulated real-time clock update
  if (timer) clearInterval(timer)
  timer = setInterval(() => {
    currentTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
  }, 1000)
}

onUnmounted(() => {
  if (timer) clearInterval(timer)
})

defineExpose({ open })
</script>

<style lang="scss" scoped>
.meter-detail {
  padding: 0 10px;

  .header-section {
    .device-title {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      .room-name { font-size: 24px; font-weight: bold; color: #303133; }
    }
    
    .device-meta {
      display: flex;
      gap: 40px;
      background: #f8f9fa;
      padding: 15px;
      border-radius: 8px;

      .meta-item {
        display: flex;
        flex-direction: column;
        .label { font-size: 12px; color: #909399; margin-bottom: 5px; }
        .value { font-size: 16px; font-weight: 500; color: #606266; }
      }
    }
  }

  .dashboard-card {
    text-align: center;
    position: relative;
    background: #fbfdff;
    
    .dashboard-title { font-size: 14px; color: #909399; margin-bottom: 10px; }
    .dashboard-value { font-size: 28px; font-weight: bold; font-family: 'Arial', sans-serif; }
    .dashboard-icon { 
      position: absolute; 
      top: 10px; 
      right: 10px; 
      opacity: 0.2; 
      font-size: 24px; 
    }
  }

  .chart-section {
    .chart-header {
      margin-bottom: 15px;
      border-left: 4px solid var(--el-color-primary);
      padding-left: 10px;
      font-weight: bold;
      font-size: 16px;
    }
  }
}

.ml-10 { margin-left: 10px; }
.ml-5 { margin-left: 5px; }
.mt-20 { margin-top: 20px; }
.pl-10 { padding-left: 10px; }
.text-warning { color: var(--el-color-warning); }
.text-primary { color: var(--el-color-primary); }
.text-success { color: var(--el-color-success); }
.text-danger { color: var(--el-color-danger); }
</style>
