<template>
  <div>
    <el-container class="h-90vh">
      <el-aside class="bg-gray-100 w-60">
        <el-menu
          :default-active="activeMenu"
          mode="vertical"
          @select="handleMenuSelect"
          class="h-full border-r-0"
        >
          <el-menu-item index="deviceList">
            <template #title>
              <List class="mr-2" />
              设备列表
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="p-0">
        <component
          :is="currentComponent"
          @show-details="showElectricityDetails"
        ></component>
      </el-main>
    </el-container>

    <!-- Full-screen dialog for electricity details -->
    <el-dialog
      v-model="dialogVisible"
      :fullscreen="true"
      :show-close="true"
      :destroy-on-close="false"
      class="electricity-detail-dialog"
    >
      <template #header>
        <div class="flex items-center justify-between w-full">
          <h3 class="text-xl font-medium">电表详情</h3>
          <el-button type="primary" plain @click="dialogVisible = false">
            <X class="mr-1" />
            关闭
          </el-button>
        </div>
      </template>
      <electricityDetail :table-number="selectedTableNumber" v-if="dialogVisible" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import electricityDetail from "./components/electricity-detail.vue";
import deviceList from "./components/device-list.vue";
import { List, X } from "lucide-vue-next";

// 定义当前激活的菜单索引
const activeMenu = ref("deviceList");
// 定义当前要显示的组件
const currentComponent = ref(deviceList);

// 对话框控制
const dialogVisible = ref(false);
const selectedTableNumber = ref("");

// 处理菜单选择事件
const handleMenuSelect = (index) => {
  activeMenu.value = index;
  if (index === "deviceList") {
    currentComponent.value = deviceList;
  }
};

// 显示电表详情
const showElectricityDetails = (tableNumber) => {
  selectedTableNumber.value = tableNumber;
  dialogVisible.value = true;
};
</script>

<style scoped>
.electricity-detail-dialog :deep(.el-dialog__body) {
  padding: 0;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

.electricity-detail-dialog :deep(.el-dialog__header) {
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
}
</style>
