<template>
  <div class="sidebar">
    <!-- 用户信息 -->
    <div class="user-info">
      <div class="avatar">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="8" r="4" stroke="white" stroke-width="2"/>
          <path d="M6 21C6 17.134 8.686 14 12 14C15.314 14 18 17.134 18 21" stroke="white" stroke-width="2" stroke-linecap="round"/>
        </svg>
      </div>
      <div class="user-phone">{{ userPhone }}</div>
      <div class="user-count">累计估值次数: {{ valuationCount }}</div>
    </div>

    <!-- 菜单列表 -->
    <div class="menu-list">
      <div 
        v-for="menu in menuList" 
        :key="menu.id" 
        class="menu-item"
        :class="{ active: currentMenu === menu.id }"
        @click="handleMenuClick(menu)"
      >
        <component :is="menu.icon" class="menu-icon" />
        <span class="menu-text">{{ menu.label }}</span>
        <svg v-if="menu.id !== currentMenu" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  userPhone: {
    type: String,
    default: ''
  },
  valuationCount: {
    type: Number,
    default: 0
  },
  currentMenu: {
    type: String,
    required: true
  },
  menuList: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['menu-click'])

function handleMenuClick(menu) {
  emit('menu-click', menu)
}
</script>

<style scoped>
.sidebar {
  width: 240px;
  background: white;
  padding: 20px;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}

.user-info {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #EEEEEE;
  margin-bottom: 20px;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-phone {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 8px;
}

.user-count {
  font-size: 12px;
  color: #909399;
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #606266;
}

.menu-item:hover {
  background: #F5F7FA;
}

.menu-item.active {
  background: rgba(163, 1, 19, 0.08);
  color: #A30113;
}

.menu-icon {
  width: 20px;
  height: 20px;
  margin-right: 12px;
}

.menu-text {
  flex: 1;
  font-size: 14px;
}

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
  }
}
</style>
