<script setup lang="ts">
import { ref } from 'vue'
import sideBar from '../components/sideBar.vue';
import { useRouter } from 'vue-router'

const router = useRouter()

// 菜单项数据 // TODO
const menuItems = ref([
  { name: '造价计算', path: '/calculate', icon: '/icons/calculate' },
  { name: '钱包充值', path: '/pay', icon: '/icons/pay' },
  { name: '订阅记录', path: '/subscribe', icon: '/icons/subscribe' },
  { name: '开票记录', path: '/invoice', icon: '/icons/invoice' },
  { name: '我的账号', path: '/mine', icon: '/icons/mine' },
])

// 导航跳转函数
const navigate = (path: string) => {
  router.push(path)
}
</script>

<template>
  <div style="width: 100vw; height: 100vh; display: flex; flex-direction: row;">
    <sideBar/>
    <div style="flex: 1; font-size: 60px; color: #111111; display: flex; flex-direction: column; align-items: center; justify-content: center;" selectable="false" space="false" decode="false">
      欢迎使用众为计算工具
      <div class="cards-container">
        <div v-for="item in menuItems" :key="item.path" class="card" @click="navigate(item.path)">
          <img :src="item.icon + '.png'" class="card-icon">
          <span :to="item.path" class="card-name">{{ item.name }}</span>
        </div>
      </div>
    </div>
    
  </div>
</template>

<style scoped>
.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  height: 60vh; display: flex; flex-direction: row; align-items: center; justify-content: center;
}

.card {
  width: 200px;
  height: 250px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: #666666;
}

.card-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 12px;
  object-fit: contain;
}

.card-name {
  margin-top: 10px;
  font-size: 20px;
  color: #333333;
  font-weight: 500;
  text-align: center;
}

.card:hover .card-name {
  color: #666666;
}

</style>
