<template>
  <view class="system-container">
    <!-- 左侧菜单栏 -->
    <SideMenu 
      :activeMenuIndex="activeMenuIndex" 
      @update:activeMenuIndex="updateActiveMenu" 
      @showAlert="showAlert"
    />
    
    <!-- 右侧内容区 -->
    <view class="content-area">

      <!-- 内容区域 -->
      <view class="main-content">
        <!-- <text class="content-title">{{ currentMenu.name }}</text> -->
        
        <!-- 根据选中的菜单显示不同内容 -->
        <EnvironmentParams v-if="activeMenuIndex === 0" @openSettings="openSettings" />
        <ParameterRecord v-else-if="activeMenuIndex === 1" />
        <VisualMonitoring v-else-if="activeMenuIndex === 2" />
        <SystemLog v-else-if="activeMenuIndex === 3" />
        <AlarmRecord v-else-if="activeMenuIndex === 4" />
        <PlaceholderContent v-else :title="currentMenu.name" />
      </view>
    </view>
    
    <!-- 设置弹窗 -->
    <SettingsModal 
      v-model:visible="showSettingsModal" 
      @save="saveSettings"
    />
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import SideMenu from '@/components/SideMenu.vue';
import EnvironmentParams from '@/components/EnvironmentParams.vue';
import ParameterRecord from '@/components/ParameterRecord.vue';
import VisualMonitoring from '@/components/VisualMonitoring.vue';
import SystemLog from '@/components/SystemLog.vue';
import AlarmRecord from '@/components/AlarmRecord.vue';
import SettingsModal from '@/components/SettingsModal.vue';
import PlaceholderContent from '@/components/PlaceholderContent.vue';

// 菜单列表
const menuList = ref([
  { name: '现场环境参数' },
  { name: '参数记录' },
  { name: '视频监控' },
  { name: '日志' },
  { name: '报警' }
]);

// 当前选中的菜单索引
const activeMenuIndex = ref(0);

// 当前菜单
const currentMenu = computed(() => menuList.value[activeMenuIndex.value]);

// 不再需要动态组件，直接使用v-if/v-else进行条件渲染

// 更新当前选中的菜单
const updateActiveMenu = (index) => {
  activeMenuIndex.value = index;
};

// 显示报警信息
const showAlert = () => {
  uni.showToast({
    title: '暂无报警项目',
    icon: 'none'
  });
};

// 设置弹窗状态
const showSettingsModal = ref(false);

// 打开设置弹窗
const openSettings = () => {
  showSettingsModal.value = true;
};

// 保存设置
const saveSettings = (settings) => {
  console.log('保存的设置:', settings);
  // 这里可以添加保存设置的逻辑
};

// 页面加载时强制横屏
onMounted(() => {
  setOrientation();
});

// 设置横屏
const setOrientation = () => {
  try {
    // #ifdef APP-PLUS
    plus.screen.lockOrientation('landscape-primary');
    // #endif
    
    // #ifdef H5
    // H5环境下的横屏设置
    if (screen.orientation && screen.orientation.lock) {
      screen.orientation.lock('landscape').catch(err => {
        console.log('横屏锁定失败:', err);
      });
    }
    // #endif
  } catch (error) {
    console.log('设置横屏失败:', error);
  }
};
</script>

<style lang="scss">
.system-container {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

/* 右侧内容区样式 */
.content-area {
  flex: 1;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  overflow: hidden;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.camera-icon {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: calc(100% - 140rpx);
}

.content-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}
</style>