<template>
  <view class="sidebar">
    <view class="logo-container">
      <!-- <image class="logo" src="/static/logo.png" mode="aspectFit"></image> -->
      <text class="logo-text">检修系统</text>
    </view>
    <view 
      v-for="(item, index) in menuList" 
      :key="index" 
      class="menu-item" 
      :class="{ active: activeMenuIndex === index }"
      @click="switchMenu(index)"
    >
      <text>{{ item.name }}</text>
    </view>
    <view class="menu-item alert" @click="showAlert">
      <text>当前报警项目</text>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  activeMenuIndex: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits(['update:activeMenuIndex', 'showAlert']);

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

// 切换菜单
const switchMenu = (index) => {
  emit('update:activeMenuIndex', index);
};

// 显示报警信息
const showAlert = () => {
  emit('showAlert');
};
</script>

<style lang="scss">
/* 左侧菜单栏样式 - 后台管理系统风格 */
.sidebar {
  width: 200rpx;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  border-right: 1rpx solid #e8eaed;
  box-shadow: 1rpx 0 3rpx rgba(0, 0, 0, 0.1);
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx 0;
  background-color: #f8f9fa;
  color: #3c4043;
  flex-direction: column;
  border-bottom: 1rpx solid #e8eaed;
}

.logo {
  width: 60rpx;
  height: 60rpx;
  background-color: transparent;
  border-radius: 50%;
}

.logo-text {
  font-size: 24rpx;
  font-weight: 500;
  margin-top: 8rpx;
  color: #3c4043;
}

.menu-item {
  padding: 20rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: transparent;
  color: #5f6368;
  border-bottom: 1rpx solid #f1f3f4;
  text-align: center;
  font-size: 24rpx;
  font-weight: 400;
  transition: all 0.2s ease;
}

.menu-item:hover {
  background-color: #f8f9fa;
  color: #3c4043;
}

.menu-item.active {
  background-color: #e8f0fe;
  color: #1a73e8;
  border-right: 3rpx solid #1a73e8;
  font-weight: 500;
}

.menu-item.alert {
  background-color: #fef7e0;
  color: #ea8600;
  margin-top: auto;
  border: 1rpx solid #fdd663;
  font-weight: 500;
}

// 响应式设计 - 平板设备适配
@media (min-width: 768px) and (max-width: 1024px) {
  .sidebar {
    width: 220rpx;
  }
  
  .logo-text {
    font-size: 26rpx;
  }
  
  .menu-item {
    font-size: 26rpx;
    padding: 24rpx 0;
  }
}

// 响应式设计 - 手机设备适配
@media (max-width: 750rpx) {
  .sidebar {
    width: 160rpx;
  }
  
  .logo-text {
    font-size: 20rpx;
  }
  
  .menu-item {
    font-size: 20rpx;
    padding: 16rpx 0;
  }
}

// 响应式设计 - 大屏设备适配
@media (min-width: 1200px) {
  .sidebar {
    width: 240rpx;
  }
  
  .logo-text {
    font-size: 28rpx;
  }
  
  .menu-item {
    font-size: 28rpx;
    padding: 28rpx 0;
  }
}
</style>